I'm going to take a few courses in ASP.NET Core MVC and for the frontend HTML stuff I am finding a varied number of examples on how a task should be completed.
The task in question is to display a list of products which contains an image, title, short description, price and View More or Add button for each product.
In webforms, I used to grab a repeater and then used the RowBound event to carry out other functionality.
When I first started to learn ASP.NET MVC, there were no repeaters or gridviews, but recently I have noticed these in the toolbox. The problem I found with these controls in webforms was it added a lot of additional Javascript so when it came to adding CSP we couldn't as these controls broke the page when certain events were triggered.
Fast forward to today and ASP.NET Core MVC can use a similar approach use a HTML table and maybe dataTable to do the same thing (I think from my research) using JQuery, Ajax etc.
My question is, are the available repeater/gridview controls in ASP.NET Core MVC any better/same as webforms? Should I invest in learning in other HTML/jQuery third party controls instead?
Going a little further forward, I would like whichever is the preferred method to also be inline with ASP.NET Core 6 so there isn't a huge learning curve so appreciate any answers someone can provide as to what they have done for controls such as repeater/gridview in ASP.NET Core MVC as I'm pretty confused what should be used.
The fact that in modern asp.net applications is that we are using loops to render items. For instance, if you want to render a list you will have something like this:
#model IEnumerable<ViewComponentSample.Models.TodoItem>
<ul>
#foreach (var todo in Model)
{
<li>#todo.Name</li>
}
</ul>
Where you are rendering all items in the model defined at the top of the page. Which is being passed to the view from the controller.
And yes you can all kind of loops such as #for, #foreach, #while, and #do while based on your situation.
This allows you to render all kinds of items like rendering table rows, bootstrap cards, etc.
And even to make it enhance it furthermore you can create a partial and render items dynamically and improve the code readability and maintainability.
Partials are just a razor markup file that renders HTML output within another markup file's rendering output
#foreach (var product in Model.Products)
{
<partial name="_ProductPartial" model="product" />
}
Read further at Microsoft docs: Create view component
Read further at Microsoft docs: Render partials in a loop
Read further at Microsoft docs: Looping in asp.net
You can easily list your products using Asp.Net Core Razor.
In your .cshtml file you can use such a razor code.
<ul>
#foreach (var product in products) // 'products' is your Model
{
<li>#product.Name</<li>>
<li>#product.CreationDate</li>
<li>#product.Description</li>
<li><img src="~/img/#product.Picture" alt="ProductImage_#product.Name"/></li>
}
</ul>
Here is an introduction about razor:
Razor is a markup syntax for embedding .NET based code into webpages.
The Razor syntax consists of Razor markup, C#, and HTML. Files
containing Razor generally have a .cshtml file extension. Razor is
also found in Razor component files (.razor). Razor syntax is similar
to the templating engines of various JavaScript single-page
application (SPA) frameworks, such as Angular, React, VueJs, and
Svelte.
As the introduction says, You can use c# code in razor page. For Example, You can use Looping like #for, #foreach, #while, and #do while in razor.
More details you can refer to Razor syntax reference for ASP.NET Core.
Related
I'm updating my application that was developed using .net framework. To generate the search results I used html helpers. The search result that I mean is like a search on Youtube that includes the Image, some description text and one or two links. Now that html helpers were depricated in asp.net I am wandering If I should implement this functionality as tag helpers. I used html helpers because the requerement to display search results is found in many places in my site. The drawback is that my tag helper used several lines of code as required by the TagBuilder class for example.
TagBuilder tag = new TagBuilder("select");
tag.MergeAttribute("id", "ddlBrands");
tag.MergeAttribute("name", "BrandId");
tag.MergeAttribute("class", "form-control");
//code to add to a container
5 lines of code is required to set only one element if I have ten I will end up with a helper with 50 lines of code. I can't use routing feature as effectively as I can on a view. Is there a better solution for this?
I would not use html helpers.
I would not use c# code to generate HTML. I would use html to create html. I would pass model to view and use Razor.
Another solution is to use some javascript templating engines
Third solution, which I use recently is React.js with combination with ReactJS.NET if you want SEO friendly website.
This question already has answers here:
Using ASPX View Engine with MVC 5
(2 answers)
Closed 7 years ago.
I am new to ASP.Net MVC 5 and I want to know if Razor view engine is compulsory, or can you use ASPX view engine?
I try to create new application but I am not getting option to change the view engine.
Razor views are not compulsory. You can use aspx views. When creating your project there is a dropdown that allows you to select which view engine you want the template to use, if you are creating a project from a template.
However, this option doesn't make any difference to your project apart from the views that vs creates in the template. For example, change the name of one of your views, eg. Change home.cshtml to bob.cshtml. Run the project and navigate to the page that uses this view. You will get an error page which displays a list of views that the framework has attempted to find in different folders. This is an operation that uses convention and is the default method mvc will use to find views. Anyway, in the list you will see aspx and cshtml files, so you can go ahead and create an aspx view and mvc will pick it up. Note that the order of the list in the error message is the order mvc will look up each view. It will use the first one it comes across.
Razor views are not compulsory in ASP.net MVC..in ASP.net MVC there are two view Engine are there:
Razor View Engine:
1.Razor View Engine is an advanced view engine and introduced with MVC3. This is not a language but it is a markup syntax.
2.In Razor View Engine we use Layouts.
3.Razor Engine is a little slow compared to Aspx Engine.
Web Form/Aspx View Engine
1.ASPX View Engine is the default view engine for the ASP.NET MVC that is included with ASP.NET MVC from the beginning.
2.In ASPX View Engine we use masterPages.
Following along on a tutorial in MVC, would you tell me the alternative to this in a ASPX page
<div>
<%=ViewData["CurrentTime"]%>
</div>
In a cshtml page, the default view type in MVC 4 on VS2013. When I try the above, the literal meaning is displayed. i.e. ViewData["CurrentTime"] instead of the value DateTime.now
When you using a cshtml. You are working with Razor engine.
In Razor engine, You need to use # like
#ViewData["CurrentTime"]
<%=ViewData["CurrentTime"]%> is a ASP.Net engine code
There are two engines in MVC: Razor and ASP.NET WebForms.
.cshtml filles are the files using Razor engine and this is a default engine of ASP.NET MVC from the third version.
The syntax you are using would work with the old WebForms engine.
So you should write:
#ViewData["CurrentTime"]
in case you use ViewData or
#ViewBag.CurrentTime
in case you use ViewBag which is more common when using Razor view engine and in general newer version of ASP.NET MVC .
I want to refactor an existing MVC action so that it can be used offline to build email content.
The action just fetches a model by Id and hands it over to the view, where the view renders it's fields. There is a foreach loop in the view.
My first thought was to just create an html file and do string search and replace in it.
Is there any template rendering libraries I should consider instead?
You may take a look at RazorEngine.
Ok, so here is my situation. I am creating a web application using ASP.NET MVC 2 using the C# language. I have programmed in HTML, CSS, and PHP for several years and I am very new to ASP.NET. The part that I am having trouble with is the image gallery.
The setup: I have a link on the navigation bar that goes to a "Galleries" page. This page will show a list of galleries. Each gallery has a title, an image, and a description. All of this information is pulled from an XML file. I'm using the XML file like a database. I wanted to use this method so that i could easily update the list of galleries and have the updated XML file automatically be reflected by the website. Now, the galleries should link to an "Images" page. This page will display a list of images within the gallery based on what gallery was selected. This page will also pull from an XML file.
The problem: I cannot seem to attach a dynamic link to the image? I am also stuck and not sure how to get the correct View to display. I know I need to do something with the controllers and models, right? I have some code if needed? I would greatly appreciate any help or direction for this! Thanks!
For the image, as long as you have the collection of images in the Model for the page, you can loop through each element and do something like:
<a href="<%= Html.Encode(image.Url) %>" />
When it comes to the Views, there's some auto-magic that happens behind the scenes to map you Controller to the View.
Scott Guthrie has a good post on the inner workings of the ASP.NET MVC Framework and the different methods that it uses to go from your Controller to your Views:
ASP.NET MVC Framework (Part 1) - ScottGu's Blog
I would much rather create an Html Helper for that. That way you can write something more along the lines of this:
<%= Html.ImageLink("<url to image">) %>
Feels like a cleaner solution to me then having to write out an anchor tag. Either way will work, though.
For more info on writing custom Html Helpers:
http://www.asp.net/Learn/MVC/tutorial-09-cs.aspx