我有一个视图,我在其中加载了局部视图,我想在视图上刷新一个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”div而不在此视图上重新加载Html.Partial(“_ MusicPlayer”)。请帮忙。
提前致谢
答案 0 :(得分: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从服务器获取最新的电影列表。希望它会有所帮助。