使用Ajax加载图像在MVC 3中呈现局部视图

Question

使用Ajax加载图像在MVC 3中呈现局部视图

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

- user517406

你能详细说明一下你想要实现什么吗？ - VJAI

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darin Dimitrov · Accepted Answer

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

最后一步是编写JavaScript代码，用于触发AJAX调用：

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