webform 转 MVC 飞一般的感觉

Posted 2020-08-02 提伯斯

前言:

　　浅谈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)[email protected]_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里填充数据,返回分部页即可,主页可以很好的调用它