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.
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 am trying to use ViewComponents tag helpers in CKEditor to show some products but it doesn't.
I created a vc tag helper like this :
<vc:products html-class="col-12 col-md-5" html-style="" skip="0" take="10"></vc:products>
Now I am trying to use this code in CKEditor, I mean post editors can call products anywhere they want. but it doesn't work. CKEditor shows it as a html code.
what should I do?
This code will be actually executed on the server side and it will add partial html to your page then the server will return it to the client.
<vc:products html-class="col-12 col-md-5" html-style="" skip="0" take="10"></vc:products>
Here I'm not sure what you are trying to accomplish, but you cannot dynamically use tag helpers on the client side. May be this link can help you.
Dynamically Produce Razor Views at Runtime?
I'm upgrading from .NET 2.0 to MVC 4. Back in .NET 2.0 webform, we had to inject license information on the fly to the footer of the software by override the "Render" function in .aspx.cs page (using HtmlTextWriter), find a particular spot of the footer and then insert the license text info there.
The reason I don't want to directly put that in the viewstart page or any razor page themselves using HTMLhelper is because I don't want my customers to mess with it. So hard code is not an option.
I use Glimpse and I see Glimpse is enabled by adding a HTTPModule,etc in web.config and magically, an icon appears on my app. Something similar ?
Bottom line is, I need to hijack the finished HTML output, modify it and return the final result to client.
How do you do this in MVC? HttpModule?
Thanks!
Glimpse uses a feature of ASP.NET called a ResponseFilter to change the output HTML on the fly.
The ResponseFilter, in the case of Glimpse, is set inside the HttpModule - but it could be set anywhere.
Four Guys From Rolla has an old but still relevant article on how to create ResonseFilters.
I have tried asking this question in a number of ways, and I still can't get an answer. In Asp.net MVC4, is there a way I can just add jquery code to my views and not have to add any kind of annotation to a model to validate my form input? I just realized that I am using Ajax.BeginForm... I am betting that I cannot using regular Jquery Ajax calls with that on my form. I bet if I use HTML.beginForm, regular jquery will work. But now that will break my ajax calls... Which were failing for some reason. Well, I am about to find out why. Hopefully I can figure out how to just avoid using all Asp.net Ajax crap. It has given me nothing but a massive headache. Oh wait, you know what, I just looked at another view, and there I am using Html.BeginForm and I still can't use plain jquery code in my views to validate my form. Is this even possible in MVC4?
of course this is possible - ASP.NET MVC just emits HTML yes? so just add some jquery validate code to the document ready.
$(function(){
$('#myform').validate(/* options here */);
});