使用jquery加载部分视图02-使用$.ajax()

我不是女神ヾ 2022-03-29 07:28 186阅读 0赞

本篇体验使用$.ajax()加载部分视图。与加载部分视图相关的包括：

[RenderPartial和RenderAction区别][RenderPartial_RenderAction]    
[使用jquery加载部分视图01-使用$.get()][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>

}

效果：

[![1][]][1 1]

[RenderPartial_RenderAction]: http://www.cnblogs.com/darrenji/p/3570503.html
[jquery_01-_.get]: http://www.cnblogs.com/darrenji/p/3590678.html
[1]: /images/20220329/148c00d430574bdca017e60589d1ac48.png
[1 1]: https://images0.cnblogs.com/blog/417212/201403/092247072684951.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts异步使用ajax 加载数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

痛定思痛。/ 2024年04月17日 06:26/ 0 赞/ 113 阅读

相关 (Jquery 功能篇) Jquery ajax异步加载

1.前段页面效果 ![0_1321067854XbbX.gif][] 2.前段页面代码 \[html\] [ view plain][view plain] [c

- 日理万妓/ 2023年10月16日 19:01/ 0 赞/ 72 阅读

相关 Ajax与jQuery异步加载数据

本文共1096个字，预计阅读时间需要4分钟。简介一次性从服务器数据库中读取数据并传送到前端页面上是不现实的，一方面会加重服务器的压力，另一方面客户的带宽资源也会被占

亦凉/ 2023年07月13日 03:57/ 0 赞/ 27 阅读

相关 jquery 加载脚本_使用jQuery加载脚本

jquery 加载脚本 JavaScript loaders are incredibly powerful and useful utilities. I've even

今天药忘吃喽~/ 2023年02月21日 14:24/ 0 赞/ 33 阅读

相关 php ajax 加载列表,dedecms使用ajax+php实现列表无限加载

经常会在手机app上看到列表页面下来或者点击的时候可以实现无限加载更多内容的效果，今天说下在织梦网站中如何实现这个功能。这个功能需要用到PHP和ajax技术。首先找到并

快来打我*/ 2022年11月13日 02:00/ 0 赞/ 364 阅读

相关使用jQuery加载js脚本

动态加载Javascript是一项非常强大且有用的技术。这方面的主题在本站已经讨论了不少，我也经常会在一些个人项目上使用RequireJS和Dojo加

爱被打了一巴掌/ 2022年08月23日 03:48/ 0 赞/ 223 阅读

相关 jquery 使用 ajax

try{ $.ajax({ cache: false, type: "POST", url:ajaxCal

你的名字/ 2022年08月06日 06:11/ 0 赞/ 288 阅读

相关 jquery使用ajax加载并解析xml

student.xml文件如下 <?xml version="1.0" encoding="utf-8" ?> <students> <s

约定不等于承诺〃/ 2022年07月17日 00:09/ 0 赞/ 290 阅读

相关使用jquery加载部分视图02-使用$.ajax()

本篇体验使用$.ajax()加载部分视图。与加载部分视图相关的包括： [RenderPartial和RenderAction区别][RenderPartial_RenderA

我不是女神ヾ/ 2022年03月29日 07:28/ 0 赞/ 187 阅读

相关 Jquery使用ajax

发送GET请求： $.get(url, data, callback, dataType); url: 本次请求发送的URL地址字符串 data: 本次请求携带的数据

秒速五厘米/ 2021年09月02日 06:01/ 0 赞/ 592 阅读