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

然后您将拥有相应的部分（~/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将保留其初始文本。因此，在这种情况下首选完整的处理程序来隐藏动画。

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

1 个答案: