我有局部视图,我在显示网格,具体取决于从页面中选择的值.
对于下拉我用过
@Html.DropDownListFor(
x => x.ItemId,new SelectList(Model.Items,"Value","Text"),new {
id = "myddl",data_url = Url.Action("Foo","SomeController")
}
)
对于下拉项目选择我使用过
$(function() {
$('#myddl').change(function() {
var url = $(this).data('url');
var value = $(this).val();
$('#result').load(url,{ value: value })
});
});
以下是我的行动
public ActionResult Foo(string value)
{
SomeModel model = ...
return PartialView(model);
}
一切都很好,但是当我尝试在我的部分视图上的webgrid上进行分页或排序时,我正在显示一个带有网格的新窗口.
请帮忙
解决方法
以下示例适用于我.
模型：
public class Myviewmodel { public string Bar { get; set; } }
控制器：
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Foo(string value)
{
var model = Enumerable.Range(1,45).Select(x => new Myviewmodel
{
Bar = "bar " + value + " " + x
});
return PartialView(model);
}
}
Index.cshtml视图：
<script type="text/javascript">
$(function () {
$('#myddl').change(function () {
var url = $(this).data('url');
var value = $(this).val();
$.ajax({
url: url,type: 'GET',cache: false,data: { value: value },success: function (result) {
$('#result').html(result);
}
});
});
});
</script>
@Html.DropDownList(
"id",new[] {
new SelectListItem { Value = "val1",Text = "value 1" },new SelectListItem { Value = "val2",Text = "value 2" },new SelectListItem { Value = "val3",Text = "value 3" },},new {
id = "myddl","Home")
}
)
<div id="result">
@Html.Action("Foo")
</div>
Foo.cshtml部分：
@model IEnumerable<Myviewmodel> @{ var grid = new WebGrid( canPage: true,rowsPerPage: 10,canSort: true,ajaxUpdateContainerId: "grid" ); grid.Bind(Model,rowCount: Model.Count()); grid.Pager(WebGridPagerModes.All); } @grid.GetHtml( htmlAttributes: new { id = "grid" },columns: grid.Columns( grid.Column("Bar") ) )
请注意,我已使用GET请求刷新网格而不是POST,因为这样保留了下拉列表中选择的值查询字符串参数,以便将来进行排序和分页.
