ASP. net mvc-custom htmlhelper Method

The htmlhelper method is a very powerful feature in ASP. net mvc. With this feature, we can customize our own pages as we like.

There are usually three custom htmlhelper methods, such:

1. Razor syntax

The razor method is very intuitive, such:

@ Model ienumerable <musicshop. Models. album> @ {Viewbag. Title = "  Index  "  ;} @ Helper truncate (  String Input, Int  Length ){  If (Input. Length <=Length) {@ input ;}  Else  {@ Input. substring (  0 , Length) <text>... </text> ;}} <H2> index </H2> <p> @ Html. actionlink (  "  Create new  " , "  Create  "  ) </P> <Table> <tr> <TH>Genre </Th> <TH> Artist </Th> <TH> Title </Th> <TH> Price </Th> <TH> Albumarturl </Th> <TH> </Th> </tr> @ Foreach (  VaR Item In  Model ){ <Tr> <TD>@ Html. displayfor (modelitem => Item. Genre. Name) </TD> <TD> @ Truncate (item. Artist. Name,  25  ); </TD> <TD> @ Truncate (item. title,  25  ); </TD> <TD> @ Html. displayfor (modelitem => Item. Price) </TD> <TD>@ Html. displayfor (modelitem => Item. albumarturl) </TD> <TD> @ Html. actionlink (  "  Edit  " , "  Edit  " , New {Id = item. albumid}) | @ Html. actionlink (  "  Details  " , "  Details  " , New {Id = item. albumid}) | @ Html. actionlink (  "  Delete  " , "  Delete  " , New {Id = Item. albumid }) </TD> </tr> } </Table>

@ Helper prompts the compiler. This is an auxiliary method. We can use the @ + methodname method.
Of course, in Web programming, inline is a bad way, because they will slow down page loading, especially repeated page loading. A more common method is to define an auxiliary method in a namespace, and then introduce the auxiliary method in the page, so that the page does not have to bear the load burden of the method source code.

Ii. Extension methods

In this way, we usually need to create a folder to store our custom auxiliary methods (in many cases, we may have many custom auxiliary methods, but such as controller, A folder such as models is not suitable for storing these methods. In fact, it is dedicated to creating a new namespace for the auxiliary methods.

Like this:

 Using  System;  Using  System. Collections. Generic;  Using  System. LINQ;  Using System. Web. MVC;  Namespace  Musicshop. helpers {  Public   Static   Class  Htmlhelpers {  Public   Static   String Truncate ( This Htmlhelper helper, String Input, Int  Length ){ If (Input. Length <= Length ){  Return  Input ;}  Else  {  Return Input. substring ( 0 , Length) + "  ...  "  ;}}}} 

Then add the followingCode:

@ Model ienumerable <musicshop. Models. album> @ {Viewbag. Title = "  Index  "  ;} @ Using musicshop. helpers <H2> index </H2> <p> @ Html. actionlink (  "  Create new  " , "  Create  "  ) </P> <Table> <tr> <TH>Genre </Th> <TH> Artist </Th> <TH> Title </Th> <TH> Price </Th> <TH> Albumarturl </Th> <TH> </Th> </tr> @ Foreach (  VaR Item In  Model ){ <Tr> <TD>@ Html. displayfor (modelitem => Item. Genre. Name) </TD> <TD> @ Html. truncate (item. Artist. Name,  25  ); </TD> <TD> @ Html. truncate (item. title,  25  ); </TD> <TD> @ Html. displayfor (modelitem => Item. Price) </TD> <TD>@ Html. displayfor (modelitem => Item. albumarturl) </TD> <TD> @ Html. actionlink (  "  Edit  " , "  Edit  " , New {Id = item. albumid}) | @ Html. actionlink (  "  Details  " , "  Details  " , New {Id = item. albumid}) | @ Html. actionlink (  "  Delete  " , "  Delete  " , New {Id = Item. albumid }) </TD> </tr> } </Table>

@ Using is required to introduce the namespace of the auxiliary method. We can see from the processing of the auxiliary method that we use as the extension method of htmlhelper. The use of extension methods makes the originally complex MVC design readable and highly flexible and reusable. When I first learned C #, I was not very familiar with the extension method, because it is easy to "pollute" The namespace of the extension type, this makes it annoying to search for methods of this type. However, when using MVC, especially the htmlhelper method, the extension method was a big shock to me: without the extension method, the entire code's readability would be terrible! Now I think of C #'s design philosophy: Reading and writing code. Yes, with the extension method, our code can be read by others like a complete sentence without getting stuck in a difficult place.

Of course, misuse of syntactic sugar is a dangerous behavior. After all, there are still some problems with the extension method I just mentioned, especially when considering the future development of software, we will be shocked by the cold sweat: if you add a method of the same type as my extension method in the future, my code will go wrong.

Therefore, we need a safer method.

3. Razor View

We can create a new cshtml, as shown below:

@ Helper truncatestring (StringInput,IntLength ){If(Input. Length <=Length) {@ input}Else{@ Input. substring (0, Length) <text>... </text>}}
 

Then there is our page:

@ Model ienumerable <musicshop. Models. album> @ {Viewbag. Title = "  Index  "  ;} <H2> index </H2> <p> @ Html. actionlink (  "  Create new  " , "  Create  "  ) </P> <Table> <tr> <TH> Genre </Th> <TH> Artist </Th> <TH> Title </Th> <TH>Price </Th> <TH> Albumarturl </Th> <TH> </Th> </tr> @ Foreach (  VaR Item In  Model ){ <Tr> <TD> @ Html. displayfor (modelitem => Item. Genre. Name) </TD> <TD> @ Helpers. truncate (item. Artist. Name,  25 ); </TD> <TD> @ Helpers. truncate (item. title,  25  ); </TD> <TD> @ Html. displayfor (modelitem => Item. Price) </TD> <TD> @ Html. displayfor (modelitem => Item. albumarturl) </TD> <TD> @ Html. actionlink (  "  Edit " , "  Edit  " , New {Id = item. albumid}) | @ Html. actionlink (  "  Details  " , "  Details  " , New {Id = item. albumid}) | @ Html. actionlink (  " Delete  " , "  Delete  " , New {Id = Item. albumid }) </TD> </tr> } </Table>

If you use this method, there will be no line in the razor syntax, and there will be no worries about expansion methods. We can also add new custom methods freely. However, please note that helpers. cshtml must be placed in app_code.