webform 转 MVC 飞一般的感觉
前言:
浅谈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里填充数据,返回分部页即可,主页可以很好的调用它
