我刚开始使用
Html.RenderPartial(usercontrol,model)来呈现我的用户控件.在部分视图加载时是否可以更改此功能以显示Ajax加载图像？
编辑：试过这个,但一直无法让它工作.我有这样的局部视图(_FixtureList.cshmtl)：
@model List<Areas.Gameplan.Models.Fixture>
@foreach (var item in this.Model)
{
<tr>
<td class="teamgrid">@Html.Encode(item.Week)</td>
<td><img src='@Html.Encode(item.logo)' alt="logo" /></td>
<td class="teamgrid">@Html.Encode(item.Opponent)</td>
<td class="teamgrid">@Html.Encode(item.Result)</td>
</tr>
目前这是我呈现页面的方式：
public ActionResult Cincinnati()
{
//renderpartial
List<Fixture> lstFixtures = _Base.DataRepository.GetFixtureList("2017","Cincinnati");
return View(lstFixtures);
}
}
这是我观点的相关部分(Cincinnati.cshtml)：
@model List<Areas.Gameplan.Models.Fixture>
@{
ViewBag.Title = "Cincinnati Bengals";
Layout = "~/Areas/Gameplan/Views/Shared/_Layout.cshtml";
}
<div id="bigborder">
<p>
<br />
<div class="sidebarleftteam">
<div id="divFixtures">
<table id='tblFixtures' align='center'><tr><th><img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /></th><th><img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /></th><th/><th><img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /></th></tr>
@{ Html.RenderPartial("_FixtureList",this.Model); }
</table>
我如何将您的示例应用于此代码？
编辑：
想出来,这就是我做到的：
public ActionResult MyPartial()
{
List<Fixture> lstFixtures = _Base.DataRepository.GetFixtureList("2016","Cincinnati");
return PartialView("_FixtureList",lstFixtures);
}
在视图中：
$.ajax(
{
type: 'POST',async: true,contentType: 'application/json; charset=utf-8',dataType: 'html',url: 'MyPartial',beforeSend: function (xhr) {
$('#mydiv').addClass('ajaxRefreshing');
xhr.setRequestHeader('X-Client','jQuery');
},success: function (result) {
$('#mydiv').html("<table id='tblFixtures' align='center'><tr><th><img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /></th><th><img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /></th><th/><th><img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /></th></tr>" + result + "</table>");
},error: function (error) {
alert(error);
},complete: function () {
$('#mydiv').removeClass('ajaxRefreshing');
}
});
解决方法
Is it possible to change this functionality to show an Ajax loading image while the partial view loads?
不,Html.RenderPartial不使用任何AJAX,内容直接包含在服务器上.
如果你想使用AJAX而不是Html.RenderPartial在你的视图中放置一个div：
<div id="mydiv" data-url="@Url.Action("MyPartial","Home")"></div>
然后写一个控制器动作,它将返回你的部分：
public class HomeController: Controller
{
// that's the action that serves the main view
public ActionResult Index()
{
return View();
}
// that's the action that will be invoked using AJAX and which
// will return the partial view
public ActionResult MyPartial()
{
var model = ...
return PartialView(model);
}
}
那么你将得到相应的部分(〜/ Views / Home / Myartial.cshtml)：
@model Myviewmodel ...
最后一步是编写将触发AJAX调用的javascript：
$(function() {
var myDiv = $('#mydiv');
$.ajax({
url: myDiv.data('url'),type: 'GET',cache: false,context: myDiv,success: function(result) {
this.html(result);
}
});
});
最后一部分是显示加载动画.这可以通过多种方式完成.一种方法是使用global ajax event handlers：
$(document).ajaxSend(function() {
// Todo: show your animation
}).ajaxComplete(function() {
// Todo: hide your animation
});
另一种可能性是最初只在你的div中放入一些文字或图像：
<div id="mydiv" data-url="@Url.Action("MyPartial","Home")">
Loading ...
</div>
并且由于此div的内容将在ajax调用的成功回调中替换为partial的内容,因此加载文本将消失.请注意这一点,因为如果有错误,成功回调将不会触发,div将保留其初始文本.因此,在这种情况下,首选完整的处理程序来隐藏动画.