如何用Mvc实现一个列表页面-异步加载
在接触Mvc后,开始有点觉得很累,什么都要自己做,完全没有WebForm的易用性;
大概用了一个月左右的时候,越用用顺手,就习惯了MVC的这种开发方式,灵活,简洁;
当初学习MVC,网上看资料,都是讲的基础知识,没有一个完整的Demo,我今天就来实现这样的一件事吧!
- 创建MVC项目(本例用MVC4),选择空模版
- 创建HomeController,放在根目录的Controllers文件夹下面
- 添加如下代码
-
1 /// <summary> 2 /// 列表页面 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult Index() 6 { 7 return View(); 8 } 9 10 /// <summary> 11 /// 显示的列表 12 /// </summary> 13 /// <returns></returns> 14 public ActionResult IndexResult() 15 { 16 List<DiaryTab> model = new List<DiaryTab>(); 17 18 DiaryManage server = new DiaryManage(); 19 model = server.GetDiaryList(); 20 model.Add(new DiaryTab() 21 { 22 DiaryTitle = DateTime.Now.ToLongTimeString(), 23 DiaryTag = "动态时间" 24 25 }); 26 Thread.Sleep(2000); 27 return View(model); 28 }
- 在Views-Home下创建视图,快捷创建方法 在Index()、IndexResult()方法体内右击,找到“添加视图”,就会自动在这个文件夹里建立好相应的文件件
- 文件新建完成,开始写代码!!
这里建立了两个ActionResult,分别对应两个页面,Index.cshtml是列表页面主体,用来放置查询条件,和查询按钮;IndexResult.cshtml是列面里数据页面,只是用来显示数据,这个页面会异步加载到 Index.cshtml里面去,通过JS添加到指定DIV里
话不多说,放代码
Index.cshtml 代码
<div class="search "><!--查询条件--> <table class="tableList"> <tr> <td> <input type="text" id="txtName" name="Name" /> </td> <td> <input type="button" id="btnSearch" onclick="Search()" value="查找" /> </td> </tr> </table> </div>
1 <!--用来显示数据列表--> 2 <div id="result"> 3 4 </div> 5 <script> 6 function Search() { 7 var url = '@Url.Action("IndexResult", "Home")'; 8 $("#btnSearch").val("查找中…");//这里可以用于显示Loading图片 9 $.post(url, {}, function (data) { 10 $("#btnSearch").val("查找");
11 $("#result").html(data);//JS异步请求后,绑定到 result Div里
12 });
13 }
14 </script>
IndexResult.cshtml 代码
1 @using RgWan.Entity; 2 @model List<DiaryTab> 3 <table class="tableList"> 4 <tr> 5 <td>文章标题</td> 6 <td>文章内容</td> 7 </tr> 8 @foreach (RgWan.Entity.DiaryTab item in Model) //循环绑定数据,这个列表最终会显示到Index页面中 9 { 10 <tr> 11 <td>@item.DiaryTitle</td> 12 <td>@item.DiaryTag</td> 13 </tr> 14 } 15 </table>
完成
总结一下:
这种写法,IndexResult的重用性会比较高。样式什么的,可以写在Index页面,这样样式和数据分离更加明显;
在数据加载时,页面会不会刷新,异步Post请求的;界面友好;
本例相关文件下载