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

我不是女神ヾ 2022-03-29 07:28 171阅读 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 条评论，171人围观）

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

相关阅读

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

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

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

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

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

相关 jquery ajax使用

// get $.ajax({ type:'get', contentType: "application/json",

￡神魔★判官ぃ/ 2023年03月13日 13:18/ 0 赞/ 38 阅读

相关 Vue中使用JQuery加载js

mounted: function() { let _this = this; // 加载技术文件 $.get

水深无声/ 2022年12月13日 01:47/ 0 赞/ 177 阅读

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

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

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

相关使用jQuery加载js脚本

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

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

相关 jquery 使用 ajax

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

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

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

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

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

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

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

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

相关 Jquery使用ajax

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

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