加载或刷新仅使用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从服务器获取最新的电影列表。希望它会有所帮助。