We want to use TagHelpers to replace html elements (like links) in user content data (comments area of a page). The goal is to replace certain things (e.g. HTTP GET parameters).
The TagHelpers are obviously only called for static HTML, not for dynamic HTML from the ViewModel.
How can we use the TagHelper in dynamic Content?
We already tried the HtmlAgilityPack; it works, but it slows down the whole page build by a factor of 35.
Related
Is it best practice for ALL text on a .Net Core Razor webpage to be injected with Model Binding (Even on a static page), or should I only inject text which may need to change dynamically at runtime?
E.g. My Index.cshtml page has a h1 title as per below. Is this considered bad practice or is it ok?
<h1 class="block-title-text" localize-content>A Fun Title</h1>
Thanks. Just trying to get my head around Razor and .Net Core.
This if fine, in general you should keep user interface elements in the view (or the .cshtml file for Razor Pages). See benefits of using views for more details, which among other things includes:
The parts of the app are loosely coupled. You can build and update the app's views separately from the business logic and data access components. You can modify the views of the app without necessarily having to update other parts of the app.
Just realised something which is obvious in hindsight. By injecting the strings using Model Binding instead of placing them into the HTML as above, it allows the incorporation of unit tests around those strings.
I've seen in some sample code that a route template ("{id:int}") on top of razor page causes the links to that page to use another pattern:
https://localhost/Movies/Edit/6
instead of
https://localhost/Movies/Details?id=6
My question is how asp.net manages to change all the links to that pattern, does it know about that page before rendering it?
Does it collaborate with other pages when processing a page?
When the application first starts, a collection of attribute routes are built. The routes are built for any Razor file with an #page directive in the root Pages folder, and for any other routes that have been defined via PageRouteConventions.
When you use the Url helper to generate links, or the anchor tag helper (which uses the Url helper behind the scenes), the link that gets generated is based on the attribute route that was built for the page that you pass to the helper.
In attribute routing, route parameters are added as segments in the URL, which is why the values are not appended as query string values. If you prefer query strings, don't declare route values as part of the #page directive.
Run the dotnet publish -c Release command and take a look inside the bin/Release folder.
You will not find your .cshtml files with html in them. What happaned where did all the html go? And how does this relate to the question?
You gotta remember that cshtml will endup being your regular ol' c# and all that fancy razor templating syntax end's up being c#. This process has many names and transpilation is one of them performed by transpilers.
Okey so now that we can safely assume that when you have a Index.cshtml file it will get populated in to some sort of an object, let's call it RazorPage.cs this will just store all the configuration for this page. Now let's say this index page is living in a folder called Home now we can have a dictionary Dictionary<string, RazorPage> and let's say that the key will be "/Home/Index". Following along based on transpiled #page "{id:int}" syntax, it might generate a template string for the route and store that in the RazorPage in a RouteTemplate parameter.
So when you use asp-page tag helper it will find the correct RazorPage and it can know the template for the url, populating it with the values you provided.
I haven't seen the actual implementation this is just my guess.
My question is how asp.net manages to change all the links to that pattern, does it know about that page before rendering it?
Yes it knows everything about the page at run time. Most likely the services.AddMvc() service takes care of loading in all the razor pages / views / controllers, at startup.
Does it collaborate with other pages when processing a page?
Highly likely no, unless you mean components/layouts/partials. It will however struggle to resolve a page if you have identical route for 2 pages.
I was hoping someone had any insight on this basic approach. Sample scenario:
I have a dashboard template with menu links a(href "/page") and I want to click the links to render a different section/view on the template. I used block content...but does it need a specific route?
If I understand correctly, you want to update the content of the page on click of the link without the page getting refreshed.
In that case, no you can't do it using block content.
The purpose of block content is to apply inheritance in your templates.
The typical use of block content would be creating a layout and then creating more specific page from the layout. This is what the official documentation says.
The reason why you cannot do it because, jade is server side templating library. This resolves the block content on server. Once rendered in client, the html looses all the information that was specific to jade (which is obvious because its an html afterall).
What you can do here is
Create a /page.jade and make a ajax call to a service. That service should return an already compiled html string. Since you are using jade, you can easily use jade.compile(source, options) to template / generate html.
Jade API documentation here
I'm new to web development and ASP.NET MVC 4
My question is: Is it possible to replace the content of div tag without needing to refresh the whole page?
If so, what is the best practice of it (best use of MVC 4)?
In order to refresh partial content of a page, you have to use AJAX. There are plenty of resources available online describing how to implement this in ASP.NET MVC. One of the possibilities is using partial views, on which you can find a good tutorial here. However, if you're comfortable with javascript/jQuery a partial view might be overkill if you're just looking to update one div.
Use javascript and make an ajax call. MVC has a JsonResult for the controller you can use if you like.
Not 100% sure but if I remember right, jQuery is bundled with MVC4. Correct me if I'm wrong.
// Javascript code
$('#mydiv').load('/Content/html/mySnippet.html');
Would replace the contents of a <div id="mydiv"></div> with the contents of the /Content/html/mySnippet.html.
You can also call an action and return a partial view if you wish to have dynamic content instead of a static html template.
I am confused when I should use a custom widget or renderPartial in my view files. Sometimes I use widget and sometimes I use renderPartial.
Widget
You use widget when your application logic is defined in a separate CLASS file and the logic is somehow separated and standalone.
Widget's are chosen when the functionality is repeatedly used elsewhere, on lot of pages.
renderPartial
You use renderPartial for VIEW files that you want to embed into something bigger, or when you want to print something without using the application layouts.
renderPartial is chosen when all the variables it need to access are already prepared in the current action.
Widget
You can use widget when your site has some common part like header and footer or sometime some kind filter which require on every page of site.
renderPartial
Take example of search form of yii crude which is called by using renderPartial because that serach form is changing according to requirement of pages.
Sorry for english.