Grid.mvc 在局部视图中的使用答案

【问题标题】：Grid.mvc use in partial viewGrid.mvc 在局部视图中的使用
【发布时间】：2017-04-20 23:26:59
【问题描述】：

我在局部视图中使用 Grid.mvc 时遇到问题。当我在视图中使用 grid.mvc 时，它可以正常工作，但是当我在部分视图中使用时，grid.mvc 无法分页，过滤......你知道吗？非常感谢你！这是我的代码：



<!-- Index.html -->
    @{
        ViewBag.Title = "ABC";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
   <div class="row">          
        <div class="col-xs-9 col-lg-10">
            <div class="box box-primary">
                <div class="box-header with-border"></div>
                <div class="box box-body">
                    <div class="row">
                        <div class="col-xs-12 col-lg-12">
                            <div id="products"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


<script>
    $(function() {
        $.ajax({
            url: '@Url.Action("GetProducts", "Equipment")',
            dataType: "html",
            type: "GET",
            cache: false,
            contentType: 'application/html; charset=utf-8',
            success: function (data) {
                $("#products").html(data);
            },
            error: function (xhr) {
                alert(xhr);
            }
        });
    });
</script>


<!--Partial view-->

@using GridMvc.Html

<script src="@Url.Content("~/Content/Scripts/gridmvc.min.js")"></script>
<script src="@Url.Content("~/Content/Scripts/jquery-1.10.2.min.js")"></script>
@Html.Grid((IEnumerable<Model.ViewModels.EquipmentModel>)ViewBag.ListEquipment).Named("ast").Columns(columns =>
                       {
                           columns.Add(c => c.Serial_No).Titled("Số serial").Filterable(true).SetWidth(100).Sortable(true);
                           columns.Add(c => c.Name).Titled("Tên thiết bị").Filterable(true).SetWidth(250).Sortable(true);
                       }).WithPaging(10).Sortable(true)
<script src="~/Content/Scripts/gridmvc.js"></script>

<!-- Controller -->

  public class EquipmentController : BaseController
    {
        string strError = "";

        // GET: Equipment
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetProducts(string ID)
        {       
            var model = getEquipmentByID(Convert.ToInt16(ID));  //Get data
            ViewBag.ListEquipment = model;
            return PartialView("GetProducts", model);
        }
}

【问题讨论】：

标签： partial-views grid.mvc

【解决方案1】：

所以您只需要在调用网格后重新实例化网格，在 ajax 中使用“成功”方法中的 $(".grid-mvc").gridmvc();

【讨论】：

【解决方案2】：

我在部分视图中将 ajax 与我的网格一起使用。对于分页，我在主视图中创建了一个函数并编辑了部分视图 _GridPager.cshtml 以在单击时调用我的函数。该函数再次调用 Ajax 函数，该函数将加载正确的页面。

$.ajax({
                    type: "POST",
                    url: "http://ABC?grid-page=" + myPage,
                    data: mydata,
                    success: successFunc,
                    error: errorFunc
});

顺便说一下，上面的 Grid 实例化解决了我的分页 CSS 问题。

【讨论】：