前言:
浅谈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" }))
{
}
对应的登录回调
//登录前js验证
function ValidateLog()
{
openLoading();
} //登录回调函数
function tips(data) {
closeLoading();
if (data == "") {
window.location.href = "/user/index";
} else
{
alert(data);
ClickCode();
}
}
比较:webform提交表单,后台会走一系列事件(比如:用户希望提交的信息依旧保存,可以表单的自动记忆),或者是ajax提交,而mvc直接提交到指定的function即可,更加的方便简洁(可以去路由里面设置对应参数,默认/id,如果不设置也可以?id=1&name="11"的方式进行传参)
个人看法:mvc的控制器,更像一个公共的接口,可以返回view,分部视图,也可以返回各种指定的数据类型,使用起来更加的简单,没有webform各种事件的困扰,更加的清晰
3.Razor语法与嵌入式语法
webform通过<%%> <%:%> <%=%> 可以在前端页面嵌入后台逻辑代码,用起来方便,但是这是极不友好的,如果页面复杂了,后期维护起来非常吃力,特别是页面结构,样式表修改,mvc通过@ @{}可以在view调用控制器里保存的值,Razor对html有更好的支持,它可以跟html进行混写,代码更加的清晰
<div id="examination" class="test_bg">
@{
var list_exam = ViewBag.list_exam;
string s = ViewBag.str;
string [] t = s.Split(new char[]{','});
for (int i = list_exam.Count - 1; i >= 0; i--)
{
string[] str = ViewData["e_s_" + list_exam[i].Id] as string[];
<ul id="exam @list_exam[i].Id" class="test_wrap border_bottom">
<div class="title">@(list_exam.Count - i)、@list_exam[i].Title</div> <li>
<input name="dao" type="checkbox" value="a" />
<span>A:@str[0]</span>
</li>
<li>
<input name="dao" type="checkbox" value="b" />
<span>B:@str[1]</span>
</li>
<li>
<input name="dao" type="checkbox" value="c" />
<span>C:@str[2]</span>
</li>
<li>
<input name="dao" type="checkbox" value="d" />
<span>D:@str[3]</span>
</li>
<li>
<span style="color:blue">正确答案:@list_exam[i].Reply</span>
</li>
</ul>
}
} </div>
个人看法:尽量不要在view写逻辑(if,switch),view里面只填充数据
4.模板页,用户控件,分部页
对于模板页,用户控件在webform里面已经非常熟悉了,一般我们喜欢把通用的地方做成模板页(头部,底部),一些常用菜单做成用户控件,而在mvc里面只有分部页,可别小看了分部页,它可以做很多事情,这里也是mvc的一个优势,下面我将重点去说明
它可以做下面这些事
4.1.模板页功能
此功能非常简单,创建一个分部页,将html代码贴入进去就可以了,在需要调用的地方,可以直接调用
@RenderPage("~/Views/control/_header.cshtml")
比较:更加的清晰简单
4.2.ajax局部刷新
$('#list_note').load('/control/note/@m_lession.Id');
@{
<div class="top_text ">
<textarea rows="1" id="txt_note" name="message" placeholder="输入你的笔记"></textarea>
<div class="btn_bottom">
<input class="r" type="button" value="取消" onclick="$('#txt_note').val('')" />
<input class="l" type="button" value="保存" onclick="addnote()" />
</div>
<div style="clear: both;"></div>
</div>
var list_note = ViewBag.list_note;
for (int i = list_note.Count - 1; i >= 0; i--)
{
<div class="item_note">
<p>@(list_note.Count - i).@list_note[i].NoteTxt</p>
<div class="info_bottom">
<span>记录时间:@list_note[i].CreateTime</span>
<div class="btn">
<input type="button" value="删除" onclick="delnote('@list_note[i].Id')" />
<input class="btn_play" type="button" value="播放" onclick="viewnote('@list_note[i].VideoFrame')" />
</div>
</div>
</div>
}
}
比较:mvc通过请求分部页的控制器,可以重新加载分部页,实现局部刷新,webform通常会手动拼接html,再用js追加,这样废时废力,如果html变动,将会非常麻烦
4.3.隐藏页的懒加载
这个根4.2是一样的,比如tablepage,在webform中通常会把子页内容全部加载出来,然后使用css将其它隐藏,然后通过js来控制它的显示隐藏,mvc可以通过加载分部页来实现,在点击某个子页的时候,先通过js判断是否有加载内容,如果没有加载,再通过load加载分部页,对于复杂页面特别有用,页面打开速度明显提升
4.4.分工协作
这里说的分工协作,并不是分层那种,只是单纯的view分工
个人看法:view更像一张图片,里面的分部页相当于每个图层,复杂页面,可以先拆分成多个分部页,然后分配给开发,mvc可以非常优化的支持它,我们只需要再分部页的控制器里定义好需要的参数,在view里填充数据,返回分部页即可,主页可以很好的调用它