使用Ajax加载图像在MVC 3中渲染部分视图

Question

我刚开始使用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');
     }
 });

Answer 1

在部分视图加载时是否可以更改此功能以显示Ajax加载图像？

不,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);
    }
}

那么你将得到相应的partial(~/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);
       }
    });
});

最后一部分是显示加载动画.这可以通过多种方式完成.一种方法是使用全局ajax事件处理程序:

$(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将保留其初始文本.因此,在这种情况下,首选完整的处理程序来隐藏动画.