Api方法只在视图呈现时被调用一次

Question

我在一个view.each上有两个网格，其中一个调用相同的WebApi方法

每当我的视图renders.it只调用一次webapi method.Thus绑定时，只有我的第一个Grid.not绑定。

下面是我的密码。

@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代码只使1ajax调用文档为API-方法做好准备，然后用指定的Id将数据绑定到网格。由于您有两个Id相同的元素，所以只有第一个元素将被填充数据。

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

问候

菅直人