Api 方法仅在视图渲染中调用一次

Question

我在一个视图上有两个 Grid。每个都调用相同的我的 WebApi 方法

每当我的视图呈现时。它只调用一次 webapi 方法。因此只绑定我的第一个网格。而不是其他。

下面是我的代码。

@using MvcJqGrid
@using EPS.Common
@using EPS.WPL.Web
@using EPS.Common.Helper
@using EPS.Common.Extensions
@model  EPS.WPL.Web.ViewModels.OrderListViewModel

@{
    ViewBag.Title = "List";
    // Layout = Url.Content(WPLSettings.SiteURL + "/Views/Shared/_WPLLayout.cshtml");   
    Layout = "~/Views/Shared/_WPLLayout.cshtml";
}

<div id="MiddleDataContainer">

    <h3>NL AutoParts Order Information</h3>
    @section PageScripts {

        @Scripts.Render("~/bundles/appJs")
@*        <script type="text/javascript">
            var appUri = "/api/CommonGrid/GetOrderListWithRow";
            var appCommon = "&_search=false&nd=1406550928001&rows=10&page=1&sidx=&sord=asc";
            $(document).ready(function () {

                $.ajax({
                    url: appUri + '?WholeSalerId=1&Status=2&Quote=False' + appCommon,
                    contentType: "application/json; charset=utf-8",
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        $('#partialPartialOrderHolder').html(data);
                    },
                    error: function () {
                        alert("Error");
                    }
                });
            });
        </script>*@


        <section class="margin-top15">
            <div class="container">
                <!-- Data Grid start -->
                <h2>Pending Orders</h2>
                <div class="table-datagrid">
                    <div class="table-responsive">
                        <div id="GarageTableData_wrapper" class="dataTables_wrapper no-footer">
                            <div id="partialPendingOrderHolder">
                                 @(Html.Grid("OrderListWithRow")
                        .SetRequestType(MvcJqGrid.Enums.RequestType.Get)
                        .SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id = "OrderId", RepeatItems = false })
                        .AddColumn(new MvcJqGrid.Column("OrderId").SetSearch(false).SetTitle(false).SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
                        .AddColumn(new MvcJqGrid.Column("WholeSalerName").SetSearch(false).SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
                        .AddColumn(new MvcJqGrid.Column("GarageName").SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
                        .AddColumn(new MvcJqGrid.Column("Quantity").SetSearch(false).SetWidth(20).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
                        .AddColumn(new MvcJqGrid.Column("GrossPrice").SetSearch(false).SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Datepicker))
                        .AddColumn(new MvcJqGrid.Column("CreatedOn").SetWidth(25))
                      //.AddColumn(new Column("").SetSearch(false).SetCustomFormatter("mvcJqGrid.demo.buttonize").SetAlign(MvcJqGrid.Enums.Align.Left).SetWidth(10))
                        .SetUrl(Url.Action("GetOrderListWithRow", "api/CommonGrid/", new { GarageId = "", WholeSalerId = "1", Status = "0", Quote = false }))
                        .SetAutoWidth(true)
                        .SetRowNum(Common.GridDefaultPageSizeValue())
                        .SetRowList(Common.GridPageSizeValues())
                        .SetViewRecords(true)
                        .SetPager("pager")
                        .SetSearchToolbar(true)
                        .SetToolbar(true)
                        .SetSearchOnEnter(false)
                        .SetViewRecords(true)
                        .OnGridComplete("CustomizeJQGrid()").OnSelectRow("JQGridRowSelected()")
                        )
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

               <div class="table-datagrid">
                    <div class="table-responsive">
                        <div id="GarageTableData_wrapper" class="dataTables_wrapper no-footer">
                            <div id="partialPendingOrderHolder">
                                @(Html.Grid("OrderListWithRow")
                        .SetRequestType(MvcJqGrid.Enums.RequestType.Get)
                        .SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id = "OrderId", RepeatItems = false })
                        .AddColumn(new MvcJqGrid.Column("OrderId").SetSearch(false).SetTitle(false).SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
                        .AddColumn(new MvcJqGrid.Column("WholeSalerName").SetSearch(false).SetWidth(25).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.WholeSalerName.ToString())).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
                        .AddColumn(new MvcJqGrid.Column("GarageName").SetWidth(25).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.GarageName.ToString())).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
                        .AddColumn(new MvcJqGrid.Column("Quantity").SetSearch(false).SetWidth(20).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.Quantity.ToString())).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
                        .AddColumn(new MvcJqGrid.Column("GrossPrice").SetSearch(false).SetWidth(25).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.GrossPrice.ToString())).SetSearchType(MvcJqGrid.Enums.Searchtype.Datepicker))
                        .AddColumn(new MvcJqGrid.Column("CreatedOn").SetWidth(25).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.CreatedOn.ToString())))
                      //.AddColumn(new Column("").SetSearch(false).SetCustomFormatter("mvcJqGrid.demo.buttonize").SetAlign(MvcJqGrid.Enums.Align.Left).SetWidth(10))
                        .SetUrl(Url.Action("GetOrderListWithRow", "api/CommonGrid/", new { GarageId = "", WholeSalerId = "1", Status = "2" , Quote = false }))
                        .SetAutoWidth(true)
                        .SetRowNum(Common.GridDefaultPageSizeValue())
                        .SetRowList(Common.GridPageSizeValues())
                        .SetViewRecords(true)
                        .SetPager("pager")
                        .SetSearchToolbar(true)
                        .SetToolbar(true)
                        .SetSearchOnEnter(false)
                        .SetViewRecords(true)
                        .OnGridComplete("CustomizeJQGrid()").OnSelectRow("JQGridRowSelected()")
                        )
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

                <!-- Data Grid end // -->

            </div>
        </section>

 }
</div>

下面是我的api方法

[HttpGet]
        [ActionName("GetOrderListWithRow")]
        public JObject GetOrderListWithRow()
        {
            GridSettings gridSettings = new GridSettings();
            SetGridSetting(ref gridSettings, Request);

            string GarageId = Convert.ToString(Request.RequestUri.ParseQueryString().Get("GarageId"));

            string WholeSalerId = Convert.ToString(Request.RequestUri.ParseQueryString().Get("WholeSalerId"));

            string Status = Convert.ToString(Request.RequestUri.ParseQueryString().Get("Status"));

            bool quote = Convert.ToBoolean(Request.RequestUri.ParseQueryString().Get("Quote"));

            OrderListViewModel model = OrderResolver.List(new OrderManager(), new LocalizationManager(), GarageId, WholeSalerId, Status, quote);
            //  UserListViewModel model = UserResolver.List(new UserManager());
            var orderList = model.Orders.Data;
            int totalRecords = 0;

            IQueryable<OrderRow> sortedList;
            sortedList = orderList.AsQueryable();
            //WhereStringContainsOne

            if (FieldName.Count() > 0 && Values.Count() > 0)
            {
                if (FieldName.Contains("CreatedOn"))
                {
                    int index = FieldName.IndexOf("CreatedOn");
                    sortedList = sortedList.AsQueryable().WhereStringContains(FieldName[index], Values[0]);
                }
                //for (int fieldCount = 0; fieldCount < FieldName.Count(); fieldCount++)
                //{
                //    sortedList = sortedList.AsQueryable().WhereStringContains(FieldName[fieldCount], Values[0]);
                //}
                else
                {
                    string[] arrFieldName = new string[] { "OrderId" };
                    sortedList = sortedList.AsQueryable().WhereStringContainsSingle(arrFieldName, Values[0]);
                }
            }

            totalRecords = sortedList.Count();
            sortedList = SortIQueryable(sortedList.AsQueryable(), gridSettings.SortColumn, gridSettings.SortOrder);
            var jsonData = JObject.FromObject(new
            {
                total = Math.Ceiling((Decimal)totalRecords / (Decimal)(gridSettings.PageSize + 1)), //totalRecords / (gridSettings.PageSize + 1),
                page = gridSettings.PageIndex,
                records = totalRecords,
                rows = (
                    from g in sortedList
                    select new OrderRow
                    {
                        OrderId = g.OrderId,
                        WholeSalerName = g.WholeSalerName,
                        GarageName = g.GarageName,
                        Quantity = g.Quantity,
                        GrossPrice = g.GrossPrice,
                        CreatedOn = g.CreatedOn,
                        Status = g.Status

                    }).Skip((gridSettings.PageIndex - 1) * gridSettings.PageSize).Take(gridSettings.PageSize)
            });

            return jsonData;
        }

Answer 1

嗯，你的两个网格都有相同的 HTML id。 HTML 规范只允许每个 id 存在一个元素，否则 DOM 无法区分它们，只会使用第一个。

您的 javscript 代码仅在文档上为您的 API 方法准备 一个 ajax 调用，然后将数据绑定到具有指定 ID 的网格。由于您有两个具有相同 ID 的元素，因此只有第一个元素会填充数据。

如果您想对 API 方法进行两次单独调用，则必须进行两次 ajax 调用。如果要分别填充两个网格，则必须有不同的 ID。

问候

哈坎