前言:

　　淺談webform與mvc,讓開發變得更加簡單,這里主要通過比較webform與mvc的開發方式,以下全屬個人看法,不完善的地方可以留言補充.

正文:

　　廢話不多說,直接說工作中經常用到的地方

　　1.創建頁面

　　webform通過創建.aspx文件來編寫前端,.aspx.cs來編寫服務端代碼,mvc通過創建view來編寫前端,Controller里的function來實現服務端(注意:一個控制器里面有多個function,可以控制多個view)

　　比較:mvc直接貼入前端工程師的代碼到view里面即可,webform需要去掉html,只貼入form里面的內容,如果文件變更路徑,則比較麻煩,前后端都需要修改,mvc只需把對應的function移動到不同控制器,view移動到對應視圖文件夾下即可

　　2.提交表單

　　webform根據指action選擇提交的路徑(默認當前頁面),mvc通過Ajax.BeginForm(有多種提交方法,比如:$.post,注意要引用jquery.unobtrusive-ajax.js,這個是新手容易忽略的地方)提交,一般我喜歡使用ajax提交,再根據返回的結果進行頁面跳轉等操作

　　

@using (Ajax.BeginForm("login", new { }, new AjaxOptions() { HttpMethod = "Post", OnSuccess = "tips(data)", OnBegin = "ValidateLog" })) {}

　對應的登錄回調

1 //登錄前js驗證 2 function ValidateLog() 3 { 4 openLoading(); 5 } 6 7 //登錄回調函數 8 function tips(data) { 9 closeLoading(); 10 if (data == "1") { 11 window.location.href = "/user/index"; 12 } else 13 { 14 alert(data); 15 ClickCode(); 16 } 17 }

　　比較:webform提交表單,后臺會走一系列事件(比如:用戶希望提交的信息依舊保存,可以表單的自動記憶),或者是ajax提交,而mvc直接提交到指定的function即可,更加的方便簡潔(可以去路由里面設置對應參數,默認/id,如果不設置也可以?id=1&name="11"的方式進行傳參)

　　個人看法:mvc的控制器,更像一個公共的接口,可以返回view,分部視圖,也可以返回各種指定的數據類型,使用起來更加的簡單,沒有webform各種事件的困擾,更加的清晰

　　3.Razor語法與嵌入式語法

　　webform通過<%%> <%:%> <%=%> 可以在前端頁面嵌入后臺邏輯代碼,用起來方便,但是這是極不友好的,如果頁面復雜了,后期維護起來非常吃力,特別是頁面結構,樣式表修改,mvc通過@ @{}可以在view調用控制器里保存的值,Razor對html有更好的支持,它可以跟html進行混寫,代碼更加的清晰

　　

1 <div id="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 <ul id="exam @list_exam[i].Id" class="test_wrap border_bottom"> 10 <div class="title">@(list_exam.Count - i)、@list_exam[i].Title</div> 11 12 <li> 13 <input name="dao" type="checkbox" value="a" /> 14 <span>A:@str[0]</span> 15 </li> 16 <li> 17 <input name="dao" type="checkbox" value="b" /> 18 <span>B:@str[1]</span> 19 </li> 20 <li> 21 <input name="dao" type="checkbox" value="c" /> 22 <span>C:@str[2]</span> 23 </li> 24 <li> 25 <input name="dao" type="checkbox" value="d" /> 26 <span>D:@str[3]</span> 27 </li> 28 <li> 29 <span style="color:blue">正確答案:@list_exam[i].Reply</span> 30 </li> 31 </ul> 32 } 33 } 34 35 </div>

　　個人看法:盡量不要在view寫邏輯(if,switch),view里面只填充數據

　　4.模板頁,用戶控件,分部頁

　　對于模板頁,用戶控件在webform里面已經非常熟悉了,一般我們喜歡把通用的地方做成模板頁(頭部,底部),一些常用菜單做成用戶控件,而在mvc里面只有分部頁,可別小看了分部頁,它可以做很多事情,這里也是mvc的一個優勢,下面我將重點去說明

　　它可以做下面這些事

　　4.1.模板頁功能

　　此功能非常簡單,創建一個分部頁,將html代碼貼入進去就可以了,在需要調用的地方,可以直接調用

　　

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

　　比較:更加的清晰簡單

　　4.2.ajax局部刷新

1 $('#list_note').load('/control/note/@m_lession.Id'); 1 @{ 2 <div class="top_text "> 3 <textarea rows="1" id="txt_note" name="message" placeholder="輸入你的筆記"></textarea> 4 <div class="btn_bottom"> 5 <input class="r" type="button" value="取消" onclick="$('#txt_note').val('')" /> 6 <input class="l" type="button" value="保存" onclick="addnote()" /> 7 </div> 8 <div style="clear: both;"></div> 9 </div> 10 var list_note = ViewBag.list_note; 11 for (int i = list_note.Count - 1; i >= 0; i--) 12 { 13 <div class="item_note"> 14 <p>@(list_note.Count - i).@list_note[i].NoteTxt</p> 15 <div class="info_bottom"> 16 <span>記錄時間:@list_note[i].CreateTime</span> 17 18 <div class="btn"> 19 <input type="button" value="刪除" onclick="delnote('@list_note[i].Id')" /> 20 <input class="btn_play" type="button" value="播放" onclick="viewnote('@list_note[i].VideoFrame')" /> 21 </div> 22 </div> 23 </div> 24 } 25 }

　　比較:mvc通過請求分部頁的控制器,可以重新加載分部頁,實現局部刷新,webform通常會手動拼接html,再用js追加,這樣廢時廢力,如果html變動,將會非常麻煩

　　4.3.隱藏頁的懶加載

　　這個根4.2是一樣的,比如tablepage,在webform中通常會把子頁內容全部加載出來,然后使用css將其它隱藏,然后通過js來控制它的顯示隱藏,mvc可以通過加載分部頁來實現,在點擊某個子頁的時候,先通過js判斷是否有加載內容,如果沒有加載,再通過load加載分部頁,對于復雜頁面特別有用,頁面打開速度明顯提升

　　4.4.分工協作

?　　這里說的分工協作,并不是分層那種,只是單純的view分工

　　個人看法:view更像一張圖片,里面的分部頁相當于每個圖層,復雜頁面,可以先拆分成多個分部頁,然后分配給開發,mvc可以非常優化的支持它,我們只需要再分部頁的控制器里定義好需要的參數,在view里填充數據,返回分部頁即可,主頁可以很好的調用它

轉載于:https://www.cnblogs.com/tibos/p/5631968.html

總結

以上是生活随笔為你收集整理的webform 转 MVC 飞一般的感觉的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。