我在一个视图上有两个Grid。其中一个调用相同的WebApi方法
每当我的视图渲染时，它只调用一次webapi方法。因此只绑定我的第一个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;
}
答案 0 :(得分：0)
嗯，你的两个网格都有相同的HTML ID。 HTML规范只允许每个id存在一个元素，否则DOM不能区分它们，只会使用第一个元素。
您的javscript代码仅对文档准备好您的API方法进行一次 ajax调用，然后使用指定的Id将数据绑定到网格。由于您有两个具有相同Id的元素，因此只有第一个元素将填充数据。
如果您想要对API方法进行两次单独调用，则必须进行两次ajax调用。如果你想分别填写两个网格，你必须有不同的ID。
此致
哈坎