如何用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(2000);
               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请求的；界面友好；

 

本例相关文件下载