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

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

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

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

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

 /// <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);

         }

在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>

 <!--用来显示数据列表-->

 <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请求的；界面友好；

本例相关文件下载

巴特西

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

最新文章

热门文章