如何用Mvc实现一个列表页面-异步加载

在接触Mvc后，开始有点觉得很累，什么都要自己做，完全没有WebForm的易用性；

大概用了一个月左右的时候，越用用顺手，就习惯了MVC的这种开发方式，灵活，简洁；

当初学习MVC，网上看资料，都是讲的基础知识，没有一个完整的Demo，我今天就来实现这样的一件事吧！

1. 创建MVC项目（本例用MVC4），选择空模版
2. 创建HomeController，放在根目录的Controllers文件夹下面
3. 添加如下代码

4.  /// <summary>
            /// 列表页面
            /// </summary>
            /// <returns></returns>
            public ActionResult Index()
            {
                return View();
            }
   
            /// <summary>
            /// 显示的列表
            /// </summary>
            /// <returns></returns>
            public ActionResult IndexResult()
            {
                List<DiaryTab> model = new List<DiaryTab>();
   
                DiaryManage server = new DiaryManage();
                model = server.GetDiaryList();
                model.Add(new DiaryTab()
                {
                    DiaryTitle = DateTime.Now.ToLongTimeString(),
                    DiaryTag = "动态时间"
   
                });
                Thread.Sleep();
                return View(model);
            }

5. 在Views-Home下创建视图，快捷创建方法 在Index()、IndexResult()方法体内右击，找到“添加视图”，就会自动在这个文件夹里建立好相应的文件件
6. 文件新建完成，开始写代码！！

这里建立了两个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>

　　

 <!--用来显示数据列表-->
 <div id="result">

 </div>
 <script>
     function Search() {
         var url = '@Url.Action("IndexResult", "Home")';
         $("#btnSearch").val("查找中…");//这里可以用于显示Loading图片
         $.post(url, {}, function (data) {
             $("#btnSearch").val("查找");
             $("#result").html(data);//JS异步请求后，绑定到 result Div里

  });

  } 

 </script>

 

IndexResult.cshtml 代码

 @using RgWan.Entity;
 @model List<DiaryTab>
 <table class="tableList">
     <tr>
         <td>文章标题</td>
         <td>文章内容</td>
     </tr>
     @foreach (RgWan.Entity.DiaryTab item in Model) //循环绑定数据，这个列表最终会显示到Index页面中
     {
         <tr>
             <td>@item.DiaryTitle</td>
             <td>@item.DiaryTag</td>
         </tr>
     }
 </table>

完成

总结一下：

这种写法，IndexResult的重用性会比较高。样式什么的，可以写在Index页面，这样样式和数据分离更加明显；

在数据加载时，页面会不会刷新，异步Post请求的；界面友好；

本例相关文件下载