加載或刷新僅使用Ajax的局部視圖

Question

我有一個視圖，我加載其中的局部視圖，我想刷新視圖上的一個div而不加載整個視圖。我的代碼：

<div id="newrealeaseform"> <div id="newrealeaseformplayer">
@* @Html.Action("MusicPlayer", "NewRelease")*@ </div>

 `@Html.Partial("_MusicPlayer")` 


`@using (Ajax.BeginForm("Index", new AjaxOptions { ` 
         `hereHttpMethod="GET",`            
        `            InsertionMode = InsertionMode.Replace, 
                    UpdateTargetId = "albumlist" 
                   })) 
{ 
    <div id="newrealeaseformcontent"> 
      <h2>New Releases(@Model.Genre)</h2> 
       <div id="daterangesearchcntrl"> 
        @Html.HiddenFor(m => m.Genre) 
        @Html.Label("choose release date") 
        @Html.TextBoxFor(m => m.DateRange, new { @readonly = "readonly", @id = "daterange" }) 
        <input class="sb_search" type="submit" value=""/> 
       </div> 
       <br /> 
       <br /> 
       <br /> 
      <div id="albumlist"> 
       <ul id="newreleasealbum-list"> 
        @foreach (var album in Model.Albums) 
        { 
         <li style="margin-left:0px;padding-left:0px"> 
          <a href="@Url.Action("AlbumPopup", new { id = album.AlbumId })" class="openPlayer"> 
           <img alt="@album.Title" width="75" height="74" src="@album.AlbumPhoto.ThumbnailPath" /> 
           <div class="clear"></div> 
          </a> 
         </li> 
        } 
       </ul> 
      <div class="clear"></div> 
      </div> 
    </div> 
} 
</div> ` 

我要刷新 「albumlist」 分區，而不對這一觀點重裝Html.Partial（ 「_ MusicPlayer」）。請幫忙。提前

感謝

Answer 1

下面的代碼是不準確的解決方案只是一個想法

這裏像

public class MusicModel 
{ 
    private IList<Album> _albums; 
    public MusicModel() 
    { 
     _albums = new List<Album>(); 
    } 
    public int Id { get; set; } 
    public string Genre { get; set; } 
    public string DateRange { get; set; } 
    public IList<Album> Albums { get { return _albums; } set { _albums = value; } } 


} 
public class Album 
{ 
    public int AlbumId { get; set; } 
    public string Title { get; set; } 
    public string AlbumPath { get; set; } 
} 

這是你的控制器

public ActionResult musicTest() 
    { 
     var model = new MusicModel(); 
     return View(model); 
    } 

    public JsonResult RefreshMusicList(int id) 
    { 
     var musicList = GetMovieListById(id); 
     return Json(musicList); 
    } 

這裏模型您的看法

@*Here is your model*@ 
@model ST.Web.Models.MusicModel 
@Html.Partial("_MusicPlayer") 
<div id="newrealeaseformcontent"> 
    <h2> 
     New Releases(@Model.Genre)</h2> 
    <div id="daterangesearchcntrl"> 
     @Html.HiddenFor(m => m.Genre) 
     @Html.Label("choose release date") 
     @Html.TextBoxFor(m => m.DateRange, new { @readonly = "readonly", @id = "daterange" }) 
     <input class="sb_search" type="submit" value="" /> 
    </div> 
    <br /> 
    <br /> 
    <br /> 
    <div id="albumlist"> 
     <a href="JavaScript:UpdateAlbumList('@(Model.Id)')">Update List</a> 
     <ul id="newreleasealbum-list"> 

      @foreach (var album in Model.Albums) 
      { 
       <li style="margin-left: 0px; padding-left: 0px"> 
        <a href="@Url.Action("AlbumPopup", new { id = album.AlbumId })" class="openPlayer"> 
         <img alt="@album.Title" width="75" height="74" src="@album.AlbumPath @*@album.AlbumPhoto.ThumbnailPath*@" />       
        </a> 
       </li> 
      } 
     </ul> 
     <div class="clear"> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
function UpdateAlbumList(id) 
{ 
    var action = "@(Url.Action("RefreshMusicList", "Sample"))"; 
    var postData = "id="+id; 
    $.ajax({ 
     cache: false, 
     type: "POST", 
     dataType: 'JSON', 
     url: action, 
     data: postData, 
     beforeSend: function() {    
      //showAjaxLoading(); //show the ajax loading panel 
     }, 
     success: function (data) { 
      //console.log(data); 
      //here you can bind your movie list 
     }, 
     complete: function() { 
      //hideAjaxLoading(); //hide ajax loading panel 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      //showError("Failed to update !!"); 
      alert(thrownError); 
     } 
    }); 
} 
</script> 

在這裏我使用jquery ajax從服務器獲取最新的電影列表。希望它會有所幫助。