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

，那麼你將有相應的部分（~/Views/Home/Myartial.cshtml）：

@model MyViewModel 
... 

and last步驟是寫JavaScript將觸發AJAX調用：

$(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調用與部分內容的回調，加載文本將消失。請注意這一點，因爲如果出現錯誤，成功回調將不會觸發，div將保留其初始文本。所以在這種情況下，完整的處理程序是首選隱藏動畫。