ASP.NET MVC: My Rules for Views
I have been working with a team on several ASP.NET MVC projects since October 2009. Although not that much time has passed, and I am not an expert yet, I want to describe a number of rules that we have developed to make the code a little bit better. ASP.NET MVC, like any new technology, may not be used successfully, and with unsuccessful examples, we always try to make the code better by choosing the best options for implementing tasks.
First, let's think about the tasks of the View (View), its main function is the insertion of data into HTML. This rule excludes discrepancies - not to receive data, not to transfer data, but simply to insert data into HTML. And frankly, it is quite difficult. The approach that I always try to follow is to create a page markup (aspx) as similar as possible to the resulting HTML. The main reason for this approach is to bring the original markup closer to the resultant, thus eliminating double work. I want to see the “div” in the original markup, and be sure that the “div” will also be located in the resulting HTML.
Do not take this rule literally, the code should still be in the View. For example, a simple “for” loop for creating a table, or “if” for displaying administrator functionality, but you don’t have to specify the date format time or parse rows - this is what the Model should do for the View. Make an approximate calculation - if you see more C # code than HTML, it means that you did something wrong.
')
I also apply this rule to javascript. I used to say why Javascript should not be in presentation, therefore, this should not be a shock for you. Store javascipt in separate files.
This is true for all views, where you must transfer data from the Controller to the View. Make a View Model for the View, and transfer data through the Model. This opens up a number of possibilities for you, such as typed HtmlHelper. As a result, it is very rare when I use the View Model between Views or even Controller Actions. I make separate models for GET, POST and DELETE. The more the merrier.
Yes, this is not the best way to implement views, at first glance. If you make the View Model too general, in the end, you will have to implement a lot of logic in the Data View. The key point is that the data in the model serves as a representation, so all the work on getting the data in the correct format must be done when transferring data to the model. I always keep it in service, especially when the Model has to define CSS classes for html elements. How, in Representations, I have much more than the data from the database.
To the note: when the use of the View Model becomes popular, with the data honed under the View, AutoMapper will become very popular.
Creating your own Html Helper-ditch is very simple, and as soon as you learn to do this, you will understand that they are beautiful. This is an easy way to encapsulate a bit of logic and remove it from the View. Use them to encapsulate the code that you use in different parts of the project.
Another small “trick” that I sometimes use is to create Models specifically for Html Helper. I have several places in the project where I have to change the markup depending on the browser used, for this I create the Html Helper, which defines the browser.
The meaning of this rule is to understand what markup standard HTML Helperes issue. For all the utility of HTML Helper, they have some drawbacks (any modifications of the attributes “name” or “value” are very unpleasant). Sometimes it is much easier to replace them with standard HTML (especially input) in order to get a more predictable result. As a bonus, this will allow a new employee to more easily understand your code. At the moment, I'm using 50/50 HTML Helper and HTML.
Using standard HTML or Helper HTML elements is pretty routine. You have to enter the same code over and over again. I recommend to pay attention to Zen-Coding. You can do the same with the ReSharper Templates or Visual Studio Snippets, just by installing the appropriate plugins. In addition, the art of customizing Visual Studio is what you need to learn.
You have a web application in which you navigate through the pages, call web services, links to javascript and CSS. Typical project. All of these links should be wrapped in Url.Content or Url.Action helper-s. This solves a number of typical problems when testing or deploying an application. For example, you are testing an application on localhost: 898989 /, and you need to deploy it to myserver / myapp /, with a significant portion of the links no longer functioning. Using Url.Content and Url.Action solve this problem, so I always use them.
Partial Views are Views that do not have a master page and html and body tags. They can be used both in other views on the server and in Javascript on the client. In jQuery, there is an excellent $ .load method that performs a request to the specified url and then inserts the resulting html markup into the page. This is very useful in some cases.
Sometimes I use a little trick - I wrap markup fragments that take a long time to load into Partial Views. Then, after loading the page, I get the data from the Partial View (using the Javascript setTimeout function to call $ .load). Thus, I get a page that loads quickly, while having all the necessary data.
This does not mean that initially something is wrong with the Master page, which is provided to you when creating the Asp.net MVC project. On the contrary, in 80% of cases, this is exactly what you need. But as soon as I find out what my main page should do, I remove all the excess from the Master page. Also, do not forget about the inheritance of the Master page.
Even if it is not. This is the main pattern that I adhere to. I imagine a designer who, taking pure html and css, will be able to make my site much more attractive. This means that I use pure html wherever possible, I write Javascript button click handlers so that they work with buttons and links (recommendation: always return false, and as this I have not written for this jQuery plugin) .
This is actually the topic of my next post, but still, let's touch briefly on the topic of versioning css and Javascript. In fact, this is not MVC specific, it is worth using in all web projects. The goal is to resolve issues with the browser cache. You know that the first thing you ask about someone who asks you for help is whether he cleared the browser cache. In my opinion, it is worthwhile to install an automatic update of the version of the assembly, then append the version number to the end of each Javascript file. It should look like this: "myapp / ... / file.css? Version = 1.0.0.256". Also, I use the addition of the timestamp in the same way.
Article published at the request of a friend. Unfortunately, I can’t throw in an invite himself, so those who are interested can give him an invite to dimaumen [at] ukr [dot] net mail.
First, let's think about the tasks of the View (View), its main function is the insertion of data into HTML. This rule excludes discrepancies - not to receive data, not to transfer data, but simply to insert data into HTML. And frankly, it is quite difficult. The approach that I always try to follow is to create a page markup (aspx) as similar as possible to the resulting HTML. The main reason for this approach is to bring the original markup closer to the resultant, thus eliminating double work. I want to see the “div” in the original markup, and be sure that the “div” will also be located in the resulting HTML.
1. Use as little code as possible in views
Do not take this rule literally, the code should still be in the View. For example, a simple “for” loop for creating a table, or “if” for displaying administrator functionality, but you don’t have to specify the date format time or parse rows - this is what the Model should do for the View. Make an approximate calculation - if you see more C # code than HTML, it means that you did something wrong.
')
I also apply this rule to javascript. I used to say why Javascript should not be in presentation, therefore, this should not be a shock for you. Store javascipt in separate files.
2. Use Typed Views
This is true for all views, where you must transfer data from the Controller to the View. Make a View Model for the View, and transfer data through the Model. This opens up a number of possibilities for you, such as typed HtmlHelper. As a result, it is very rare when I use the View Model between Views or even Controller Actions. I make separate models for GET, POST and DELETE. The more the merrier.
3. Create Presentation Models for specific submissions.
Yes, this is not the best way to implement views, at first glance. If you make the View Model too general, in the end, you will have to implement a lot of logic in the Data View. The key point is that the data in the model serves as a representation, so all the work on getting the data in the correct format must be done when transferring data to the model. I always keep it in service, especially when the Model has to define CSS classes for html elements. How, in Representations, I have much more than the data from the database.
To the note: when the use of the View Model becomes popular, with the data honed under the View, AutoMapper will become very popular.
4. Own Html Helper - beautiful thing
Creating your own Html Helper-ditch is very simple, and as soon as you learn to do this, you will understand that they are beautiful. This is an easy way to encapsulate a bit of logic and remove it from the View. Use them to encapsulate the code that you use in different parts of the project.
Another small “trick” that I sometimes use is to create Models specifically for Html Helper. I have several places in the project where I have to change the markup depending on the browser used, for this I create the Html Helper, which defines the browser.
5. Standard HTML Helper - this is great, but do not forget about HTML
The meaning of this rule is to understand what markup standard HTML Helperes issue. For all the utility of HTML Helper, they have some drawbacks (any modifications of the attributes “name” or “value” are very unpleasant). Sometimes it is much easier to replace them with standard HTML (especially input) in order to get a more predictable result. As a bonus, this will allow a new employee to more easily understand your code. At the moment, I'm using 50/50 HTML Helper and HTML.
Using standard HTML or Helper HTML elements is pretty routine. You have to enter the same code over and over again. I recommend to pay attention to Zen-Coding. You can do the same with the ReSharper Templates or Visual Studio Snippets, just by installing the appropriate plugins. In addition, the art of customizing Visual Studio is what you need to learn.
6. Wrap all links in Url.Content or Url.Action
You have a web application in which you navigate through the pages, call web services, links to javascript and CSS. Typical project. All of these links should be wrapped in Url.Content or Url.Action helper-s. This solves a number of typical problems when testing or deploying an application. For example, you are testing an application on localhost: 898989 /, and you need to deploy it to myserver / myapp /, with a significant portion of the links no longer functioning. Using Url.Content and Url.Action solve this problem, so I always use them.
7. Adopt Partial Views in conjunction with Ajax requests.
Partial Views are Views that do not have a master page and html and body tags. They can be used both in other views on the server and in Javascript on the client. In jQuery, there is an excellent $ .load method that performs a request to the specified url and then inserts the resulting html markup into the page. This is very useful in some cases.
Sometimes I use a little trick - I wrap markup fragments that take a long time to load into Partial Views. Then, after loading the page, I get the data from the Partial View (using the Javascript setTimeout function to call $ .load). Thus, I get a page that loads quickly, while having all the necessary data.
8. Make the Master page work for you.
This does not mean that initially something is wrong with the Master page, which is provided to you when creating the Asp.net MVC project. On the contrary, in 80% of cases, this is exactly what you need. But as soon as I find out what my main page should do, I remove all the excess from the Master page. Also, do not forget about the inheritance of the Master page.
9. Think about what the designer needs.
Even if it is not. This is the main pattern that I adhere to. I imagine a designer who, taking pure html and css, will be able to make my site much more attractive. This means that I use pure html wherever possible, I write Javascript button click handlers so that they work with buttons and links (recommendation: always return false, and as this I have not written for this jQuery plugin) .
10. Versioning css and Javascript
This is actually the topic of my next post, but still, let's touch briefly on the topic of versioning css and Javascript. In fact, this is not MVC specific, it is worth using in all web projects. The goal is to resolve issues with the browser cache. You know that the first thing you ask about someone who asks you for help is whether he cleared the browser cache. In my opinion, it is worthwhile to install an automatic update of the version of the assembly, then append the version number to the end of each Javascript file. It should look like this: "myapp / ... / file.css? Version = 1.0.0.256". Also, I use the addition of the timestamp in the same way.
Article published at the request of a friend. Unfortunately, I can’t throw in an invite himself, so those who are interested can give him an invite to dimaumen [at] ukr [dot] net mail.
Source: https://habr.com/ru/post/99589/
All Articles