7

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

1 回答 1

13

是否可以更改此功能以在部分视图加载时显示 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);
       }
    });
});

最后一块是显示加载动画。这可以通过多种方式完成。一种方法是使用全局 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 调用的成功回调中替换为部分的内容，因此加载文本将消失。请注意这一点，因为如果出现错误，成功回调将不会触发，并且 div 将保留其初始文本。因此，在这种情况下，最好使用完整的处理程序来隐藏动画。

于 2012-07-19T07:20:41.683 回答