使用jquery加载部分视图02-使用$.ajax()
2023-09-11 14:16:52 时间
本篇体验使用$.ajax()加载部分视图。与加载部分视图相关的包括:
RenderPartial和RenderAction区别
使用jquery加载部分视图01-使用$.get()
□ HomeController
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetTeams()
{
List<Team> teams = new List<Team>
{
new Team(){ID = 1,Name = "广州恒大",Rank = 1},
new Team(){ID = 2, Name = "山东鲁能", Rank = 2},
new Team(){ID=3, Name = "北京国安", Rank = 3}
};
return PartialView("_ShowTeams", teams);
}
}
□ View Model
public class Team
{
public int ID { get; set; }
public string Name { get; set; }
public int Rank { get; set; }
}
□ 部分视图_ShowTeams.cshtml
@model IEnumerable<_02.Models.Team>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Rank)
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Rank)
</td>
</tr>
}
</table>
□ 主视图Index.cshtml
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div id="tm"></div>
@section scripts
{
<script type="text/javascript">
$(function() {
$.ajax({
url: '@Url.Action("GetTeams","Home")',
contentType: 'application/html;charset=utf-8',
type: 'GET',
dataType: 'html',
success: function(result) {
$('#tm').html(result);
},
error: function(xhr, status) {
alert(status);
}
});
});
</script>
}
效果:
相关文章
- 从零开始学习jQuery (六) AJAX快餐
- jQuery Ajax calls and the Html.AntiForgeryToken()
- jquery on
- jquery验证后ajax提交,返回消息怎样统一显示的问题
- javascript使用jQuery加载CSV文件+ajax关闭异步
- 《jQuery Cookbook中文版》——1.16 获取和设置文本内容
- 《扩展 jQuery》——2.2 一个简单的插件
- 《jQuery Mobile快速入门》—— 第1章 jQuery Mobile简介
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
- Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求
- csharp:Learn how to post JSON string to generic Handler using jQuery in ASP.Net C
- jQuery的on绑定事件在mobile safari(iphone / ipad / ipod)上无法使用的解决方案
- JQuery的Ajax跨域请求的解决方案
- Ajax之Jquery封装使用举例
- ajax jquery校验用户是否已经注册
- MVC client validation after PartialView loaded via Ajax MVC3中 弹出 Dialog时候 提交的时候 使用 Jquery 不验证 form表单 的解决办法
- jquery经典实例之可拖拽的弹出层
- 九jQuery源码解析之.each()
- layui jquery ajax,url,type,async,dataType,data