Using razor engine to parse cshtml file - asp.net-mvc

I have two apps. One of them is web app and the other one is mobile app. I am trying to parse one of the views from the web app and compile a html file for the mobile app. The structure of my view in web app is as follows
App.cshtml
partialview1.cshtml
partialview2.cshtml
....
The web app is built in asp.net mvc and I am using Microsoft visual studio cordova to built the mobile apps.
I have a separate project, which takes the App.cshtml and compile index.html for mobile app. Here is the structure of my App.cshtml file
#model Account
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = Texts.App;
}
#section head{
#Styles.Render("~/Content/css/app")
}
#section scripts {
#Scripts.Render("~/bundles/moment")
#Scripts.Render("~/bundles/tippnett/app")
<script>
var userId = '#Model.Id';
TippNett.StartApp();
</script>
}
<div id="appview" class="loading">
<div id="workspace" class="map_canvas">
<section class="other-stuff">
#RenderPage("~/Views/Home/subPagesForApp/_locationWindow.cshtml")
#RenderPage("~/Views/Home/subPagesForApp/_moveLocationWindow.cshtml")
#RenderPage("~/Views/Home/subPagesForApp/_orderWindow.cshtml")
#RenderPage("~/Views/Home/subPagesForApp/_createLocation.cshtml")
#RenderPage("~/Views/Home/subPagesForApp/_ordersListWindow.cshtml")
#RenderPage("~/Views/Home/subPagesForApp/_reportAbuse.cshtml")
</section>
</div>
<div class="locations-list" data-bind="visible:locationView">
#RenderPage("~/Views/Home/subPagesForApp/_locationList.cshtml")
</div>
<div id="loading-wale">
<div id="loading-info">
<div>
<i class="spinner"> </i>
</div>
<div>#Texts.Loading</div>
</div>
</div>
</div>
<div class="show-for-small" id="stick-menu" data-role="footer">
<div class="icon-bar three-up ">
<a class="item active locations" data-bind="click: openLocationView.bind($data,true)">
<i class="fi-marker"></i>
<label>#Texts.Location</label>
</a>
<a class="item maps" data-bind="click: openMapView.bind($data,true)">
<i class="fi-map"></i>
<label>#Texts.Maps</label>
</a>
<a class="item notifications" data-bind="click: openOrders.bind($data,true)">
<i class="fi-list"></i>
<span class="order-notification-counter notification-counter" data-bind=" text: orders().length,visible: orders().length > 0"></span>
<span class="matches-notification-counter notification-counter" data-bind=" text: matches().length,visible: matches().length > 0"></span>
<label>
#Texts.OrdersLabel
</label>
</a>
</div>
I have looked into RazorEngine.Razor.Compile, but no luck. I have also looked into this library as well http://razorengine.codeplex.com/, but couldn't get anywhere.

cshtml is run server side,cordova app run in mobile(client)
so i think you can't run mvc on mobile,you should use some mobile framework
html as template,js call ajax get data,and bind to html template.

Related

DateTimepicker bootstrap with sveltekit

i want to write this code with svelte framework
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $('#datetimepicker1').datetimepicker(); });
</script>
</div>
</div>
Or if there is another way to write the timing as in the picture
enter image description here
I searched for a long time and didn't find a solution
I can see you're using jQuery in svelte, do note that the $ shorthand is a reserved word in svelte and this won't work.
Please visit this question to see how to use jQuery and Svelte together... Otherwise you could use the vanillajs-datepicker library to implement the date picker in your svelte web app.
See my demo of the library here. Do read the comments for more guidance
Happy Coding 😊 ....

MVC How to create tiles (?) in a view

I'm sorry for what I think is a bad question. Would anyone have an example of how to create something like on the picture, so some sort of tiles, within MVC? This used to be available on https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/ but it isn't anymore, and I need to know how to create something like that but haven't been able to find it.
Any help would be appreciated even if it's just the correct name of the above!
It really doesn't matter too much if its in ASP, Java Spring or plain old HTML, this is more related to CSS and Bootstrap rather than ASP.NET MVC.
This is what I would do.
Open up your Views\Home\index.html and you can delete everything and paste something like below (which makes a good starting template) - grabbed from here.
#{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
You will get thumbnail style grid which you then need to refine (with CSS) to give it the look and feel that you're after (make you to read bootstrap's documentation).
You don't need to use MVC to create tiles. You can use CSS or Javascript. There are a number of JS/CSS libraries that will allow you to tile your HTML.
I'd post some here, but honestly you should probably just use google to find some js/css tile layout libraries so that you can find one that best fits your needs.

Using an HTML Action Link to target a div

I am new to ASP/MVC and I am having trouble figuring out how to link a div to a page in HTML markup. This is the current link in pure HTML. I want to accomplish this, but in razor syntax
<div class="col-md-2">
<a href="ambulance.html">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
I've been looking into action links, but if there is a better way to accomplish this, I'm open to it!
Possible duplicate. I'll add a bit of explanation that pertains to the question since it has to do with Razor:
What your backend developer needs is Url.Action helper. This will let you route the link through the MVC framework.
So say:
<div class="col-md-2">
<a href="#Url.Action("Cars", "Ambulance")">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
ASP.NET MVC: generating action link with custom html in it
Html.ActionLink method only creates anchor tags for some action method, you need Url.Action method. Using the rest of the markup is fine.
<div class="col-md-2">
<a href="#Url.Action("Index","Home")">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>

jQuery Mobile: Content doesn't load properly after changePage

My application has a button (on app.html) that leads to a new page with a navbar (app2.html). The Navigation has an internal link (Toolbar 2) that should show the internal div "page2".
When coming from the button with changePage() it is not able to display the content when clicking on the navigation. It seems like the reloadPage is not working.
app.html looks like this:
<body>
<!-- Home -->
<div data-role="page" id="page3">
<div data-role="content">
<a id="asdf" data-role="button" name="asdf">
Button
</a>
</div>
</div>
<script>
$('#asdf').click(function(){
$.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });
});
</script>
</body>
This is my app2.html:
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div id="navigation" data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar1
</a>
</li>
<li>
<a href="#page2" data-theme="" data-icon="check">
toolbar 2
</a>
</li>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="header">
<h3>asdfasd</h3>
</div>
</div>
</div>
</body>
Where's the problem? I'm using jQuerymobile 1.1.1 with jQuery 1.7.1.
Here are the files:
app.html
app2.html
You cannot have two jQuery Mobile pages in the second page. When you click on the link in app.html, it will do an ajax request to app2.html to get the data-role="page" and it expects only in the html file. You should read up on the difference between a single page template and a multi-page template.
You can find more in the docs, look for "Linking within a multi-page document".
tl;dr: You either need to put all the pages in one HTML file and link to the id or put all the pages in separate HTML files and link to the file.

Create Help and Manual for MVC Application

I have a small application that needs to have a professional looking Help/Manual section. The help would consist of:
HowTos
FAQ
References
I am wondering if there is a free (Easy to learn) tool that can help me produce these documents in HTML format? Any suggestions?
Thanks for the help
for a new MVC application we are designing right now we plan to use an external help site in a wiki form. There are wiki engines like mediawiki and others, the idea is to have context sensitive help ( different help page opened from different application pages ) and also to allow users to add content like formulas and examples afterwards.
The cool thing is that a wiki track changes and does the versioning for us and for free so help can grow being fully decoupled from our application source code and users can see who has added what if they want.
in our case, it's only an Intranet application so in fact we have no security issues in the internal network.
You have to create more or lesss that has MSDN for instance.
It has two columns
The firsrt column has list of descriptions
The second column is text + images + video + links.
https://learn.microsoft.com/en-US/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-3.1&tabs=visual-studio
Simplest approach is to use static files and resources. Try it.
In ASP .Net MVC you can create special _LayoutFAQ.cshtml and apply it to IFRAME pages.
The Index FAQ page could look like following
#{
ViewBag.Title = "FAQ";
Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
<div class="container-fluid">
<h5 class="mt-1 text-center text-success mb-0">My mega FAQ</h5>
<hr class="mt-1" />
<div class="row">
<div class="col-sm-3 overflow-auto pl-0">
<ul class="">
<li><a onclick="NavigateIframe('#Url.Content("~/FAQ/Page1")');" href="#">Page 1</a></li>
<li><a onclick="NavigateIframe('#Url.Content("~/FAQ/Page2")');" href="#">Page 2</a></li>
</ul>
</div>
<div class="col-sm-9 border-left">
<div class="embed-responsive embed-responsive-16by9">
<iframe style="height:80vh!important;" id="pageContainer" class="embed-responsive-item" src=""></iframe>
</div>
</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light border-top border-secondary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<i class="fa fa-angle-left"></i> Back
</li>
</ul>
</div>
</nav>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(function () {
});
function NavigateIframe(url) {
event.preventDefault();
$("#pageContainer").prop("src", url);
return false;
}
</script>
}
#section head{
<style type="text/css">
</style>
}
But if your FAQ changes often you probably have to replicate backend and frontend like this https://learn.microsoft.com/en-US/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-3.1&tabs=visual-studio

Resources