利用 MVC 的分布视图完成 ajax 加载
2018-03-06 16:30
190 查看
很多时候我们都需要使用 ajax 来加载列表页面,最普遍最耗时的无非就是在 js 中拼串,比如下面这段代码:
这样的代码不仅什么都需要手写,一大串的拼接字符串,嵌套多了你都不知道对应的标记是哪一个,特别容易不好找错误。
现在我们就利用 MVC 的特性把这个问题给简单化。
首先先建一个 Action
根据刚才的这个 Action 建一个分布视图的 _GetList.cshtml
然后把刚才的 ajax 的 js 改成这样
结果和你之前拼串一样,但是代码量和效率却成倍提升。
$.get('/api/list',function(data){ var template = ''; for(var i = 0; i < data.length; i++){ template += "<tr>"; template += "<td>" + data[i].id + "</td>"; template += "<td>" + data[i].title + "</td>"; template += "<td>" + data[i].createTime + "</td>"; template += "<td>" + data[i].status + "</td>"; //... template += "</tr>"; } $("#list").html(template); })
这样的代码不仅什么都需要手写,一大串的拼接字符串,嵌套多了你都不知道对应的标记是哪一个,特别容易不好找错误。
现在我们就利用 MVC 的特性把这个问题给简单化。
首先先建一个 Action
public ActionResult _GetList() { var list = GetAllList();//调用一个获取数据源的方法,这里只是一个例子哈 return PartialView(list);//注意,这里返回的是 Partial 分布视图 }
根据刚才的这个 Action 建一个分布视图的 _GetList.cshtml
<!--这个是 mvc 的 model 对象,由 action 返回来的--> @model IEnumerable<News> @foreach(var item in Model) { <tr> <td>@item.Id</td> <td>@item.Title</td> ... </tr> }
然后把刚才的 ajax 的 js 改成这样
$.get('@Url.Action("_GetList")', function(data){ $('#list').html(data); })
结果和你之前拼串一样,但是代码量和效率却成倍提升。
这种技能还不赶紧 Get 起来?
相关文章推荐
- asp.net mvc利用 ajax实现输入自动完成
- MVC Ajax Helper或Jquery异步加载部分视图
- ASP.NET MVC如何在页面加载完成后ajax异步刷新
- MVC Ajax Helper或Jquery异步加载部分视图
- ASP.NET MVC中通过Request.IsAjaxRequest()来判断是否要加载公共视图
- 在ASP.net MVC中利用ajax配合razor进行局部加载
- MVC Ajax Helper或jQuery异步方式加载部分视图
- MVC Ajax Helper或jQuery异步方式加载部分视图
- 利用ajax实现页面动态加载select下拉框
- 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回
- 利用js将ajax获取到的后台数据动态加载至网页中
- 在jQuery中利用AJAX加载XML数据并解析
- 利用CSS、JavaScript及Ajax实现图片预加载方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用ViewStub来延迟加载视图
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 在jQuery中利用AJAX加载XML数据并解析
- 利用插件uploadify完成ajax效果的图片上传
- 利用Razor在ASP.NET MVC中的实现,自定义视图引擎框架(2)
- MVC中对加载的视图类别优化