WebForm turn MVC to fly general feeling

Objective:

Talking about WebForm and MVC, let the development become more simple, here mainly through the comparison of WebForm and MVC Development Way, the following all belong to personal opinion, imperfect place can add message.

Body:

Don't say much, just say the places you use in your work

1. Create a page

WebForm by creating an. aspx file to write the front-end,. aspx.cs to write the server-side code, MVC creates the view to write the front-end, the controller's function to implement the server ( Note: A controller has multiple function , you can control multiple view)

　　Comparison: MVC directly into the front-end engineer's code into view can, WebForm need to remove HTML, only paste into the contents of the form, if the file changes the path, it is more troublesome, both front and rear needs to be modified, MVC only need to move the corresponding function to different controllers, View moves to the corresponding views folder

2. Submitting the form

WebForm according to the action to select the path of the submission (the default current page), MVC through Ajax.beginform ( there are many methods of submission, such as: $.post, note to refer to Jquery.unobtrusive-ajax.js, This is a novice easy to ignore the place to submit, generally I like to use AJAX submissions, and then according to the results of the return page jump and other operations

　　

@using (Ajax.beginform ("login"newnew"Post"  "Tips (data)" "validatelog"  })) {}

The corresponding login callback

1     //Pre-logon JS authentication2 function Validatelog ()3     {4 openloading ();5     }6 7     //Login callback Function8 function Tips (data) {9 closeloading ();Ten         if(Data = ="1") { OneWindow.location.href ="/user/index"; A}Else -         { - alert (data); the Clickcode (); -         } -}

　　Comparison: WebForm submit a form, the background will walk a series of events ( such as: The user wants to submit the information is still saved, can be automatic memory of the form ), or Ajax submissions, and MVC directly submitted to the specified function, more convenient and concise ( Can be in the way from the inside to set the corresponding parameters, the default/id, if not set can also be? id=1&name= "11"

Personal view: TheMVC controller, more like a public interface, can return to view, partial view, can also return a variety of specified data types, use more simple, no webform of various events, more clear

3.Razor syntax and embedded syntax

WebForm through <%%> <%:%> <%=%> can be embedded in the front page of the background logic code, easy to use, but this is very unfriendly, if the page is complex, late maintenance is very laborious, especially the page structure, style sheet modification, MVC can be saved in the view call controller by @ @{}, Razor has better support for HTML, it can be mixed with HTML, the code is more clear

　　

1 <DivID= "Examination"class= "TEST_BG">2     @{3 var list_exam = Viewbag.list_exam;4 string s = viewbag.str;5 string [] t = s.split (new char[]{', '});6 for (int i = List_exam. Count-1; I >= 0; i--)7         {8 string[] str = viewdata["E_s_" + list_exam[i]. ID] as string[];9             <ulID= "Exam @list_exam [i]. Id "class= "Test_wrap border_bottom">Ten                 <Divclass= "title">@ (List_exam. count-i), @list_exam [i]. Title</Div> One  A                 <Li> -                     <inputname= "DAO"type= "checkbox"value= "a" /> -                     <span>A: @str [0]</span> the                 </Li> -                 <Li> -                     <inputname= "DAO"type= "checkbox"value= "B" /> -                     <span>B: @str [1]</span> +                 </Li> -                 <Li> +                     <inputname= "DAO"type= "checkbox"value= "C" /> A                     <span>C: @str [2]</span> at                 </Li> -                 <Li> -                     <inputname= "DAO"type= "checkbox"value= "D" /> -                     <span>D: @str [3]</span> -                 </Li> -                 <Li> in                     <spanstyle= "Color:blue">Correct answer: @list_exam [i]. Reply</span>   -                 </Li> to             </ul> +         } -     } the  * </Div>

Personal opinion: try not to write logic in view (If,switch), only fill the data in view

4. Template page, user control, partial page

For the template page, the user control in the WebForm is already very familiar with, generally we like to make the Common Place template page (head, bottom), some common menu made user control, and in MVC only partial page, do not underestimate the Division page, it can do a lot of things, here is an advantage of MVC, I'll focus on the following.

It can do the following things

4.1. Template page function

This feature is very simple, create a partial page, put the HTML code into the can, where the need to call, you can directly call

　　

1  @RenderPage ("~/views/control/_header.cshtml")

　　Comparison: more clarity and simplicity

4.2.ajax Local Refresh

1 $ (' #list_note '). Load ('/control/note/@m_lession. Id ');

1 @{2     <Divclass= "Top_text">3         <textarearows= "1"ID= "Txt_note"name= "message"placeholder= "Enter your notes"></textarea>4         <Divclass= "Btn_bottom">5             <inputclass= "R"type= "button"value= "Cancel"onclick= "$ (' #txt_note '). Val (')" />6             <inputclass= "L"type= "button"value= "Save"onclick= "Addnote ()" />7         </Div>8         <Divstyle= "Clear:both;"></Div>9     </Div>Ten var list_note = viewbag.list_note; One for (int i = List_note. Count-1; I >= 0; i--) A     { -         <Divclass= "Item_note"> -             <P>@ (List_note. count-i) [email protected]_note[i]. Notetxt</P> the             <Divclass= "Info_bottom"> -                 <span>Recording time: @list_note [i]. Createtime</span> -  -                 <Divclass= "BTN"> +                     <inputtype= "button"value= "Delete"onclick= "Delnote (' @list_note [i]. Id ') " /> -                     <inputclass= "Btn_play"type= "button"value= "Play"onclick= "Viewnote (' @list_note [i]. Videoframe ') " /> +                 </Div> A             </Div> at         </Div> -     } -}

Comparison: MVC by requesting a partial page of the controller, you can reload the partial page, to achieve partial refresh, WebForm usually manually stitching HTML, and then use JS Append, so waste time wasted force, if the HTML changes, will be very troublesome

4.3. Lazy Loading of hidden pages

This root 4.2 is the same, such as Tablepage, in the WebForm usually the page content is loaded, and then use CSS to hide the other, and then through the JS to control its display hidden, MVC can be implemented by loading the partial page, when clicked on a sub-page, First through the JS to determine whether there is loading content, if not loaded, and then load the partial page through load, especially useful for complex pages, page opening speed significantly improved

4.4. Division and collaboration

Here said the division of cooperation, not layered that kind, just a simple view division

Personal view:View more like a picture, the Division page in the equivalent of each layer, complex pages, can be split into multiple partial pages, and then assigned to the development, MVC can be very optimized to support it, we only need to branch page controller to define the required parameters, in view to fill the data, Return to the partial page, and the home page can call it nicely

WebForm turn MVC to fly general feeling