我有局部视图,我在显示网格,具体取决于从页面中选择的值.
对于下拉我用过
@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,因为这样保留了下拉列表中选择的值查询字符串参数,以便将来进行排序和分页.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。