使用 Ajax 仅加载或刷新部分视图

Question

我有一个视图，我在其中加载了部分视图，我想刷新视图上的一个 div，而不加载整个视图。我的代码：

@* @Html.Action("MusicPlayer", "NewRelease")*@

      `@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”div，而不在此视图上重新加载 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从服务器获取最新的电影列表。希望它会有所帮助。