通过ajax调用返回部分视图后，再次调用主视图
本文关键字：调用 主视图 视图 ajax 返回部 通过 | 更新日期: 2023-09-27 18:18:14
我有一个视图，该任务是显示当前存储在BD中的订单列表。
/// <summary>
/// Displays the list of all the suppliers orders filled by now.
/// </summary>
/// <returns></returns>
public ActionResult CheckoutSupplierOrders()
{
int totalCount;
List<OrderInfo> listOrders = mOrderManager.ListSupplierOrders(out totalCount);
Session[CHECKOUT_PAGE_INDEX] = General.CreatePageIndex(totalCount);
Session[CHECKOUT_PAGE_NUMBER] = 1;
return View(listOrders);
}
视图是这样呈现的:
@model List<MagicAdmin2.Models.OrderInfo>
@{
ViewBag.Title = "Supplier Orders";
}
<script type="text/javascript">
$(document).ready(function () {
$('#fetchButton').click(function () {
alert("clicked!");
var pageNumber = $('#pageNum').val();
var sortOrder = $('#sortOrder').val();
var showOrderType = $('#orderType').val();
var showOrderDesc = $('#orderDesc').val();
var showDateCreated = $('#orderCreated').val();
var showDateCreatedSymbol = $('#orderCreatedSymbol').val();
var showDateModified = $('#orderModified').val();
var showDateModifiedSymbol = $('#orderModifiedSymbol').val();
getNextPage(pageNumber, showOrderType, showOrderDesc, showDateCreated, showDateCreatedSymbol, showDateModified, showDateModifiedSymbol, sortOrder);
});
function getNextPage(pageNumber, showOrderType, showOrderDesc, showDateCreated, showDateCreatedSymbol, showDateModified, showDateModifiedSymbol, sortOrder) {
ShowProgress();
$.get("@Url.Action("GetSuppliersNextPage", "ManageOrders")", {
_pageNumber: pageNumber,
_orderType: showOrderType,
_orderDesc: showOrderDesc,
_dateCreated: showDateCreated,
_dateCreatedSymbol: showDateCreatedSymbol,
_dateModified: showDateModified,
_dateModifiedSymbol: showDateModifiedSymbol,
_sortOrder: sortOrder
}, function (data) {
$('#resultsDiv').html(data);
HideProgress();
});
}
});
</script>
<h2>
List supplier orders
</h2>
<br/>
@{
Html.RenderAction("FilterSupplierOrders", "PartialViews");
}
@{
int pageNumber = (int)Session["checkoutOrderPageNumber"];
@Html.Hidden("pageNum", pageNumber, new { @id = "pageNum" })
}
<div id="resultsDiv">
@{
Html.RenderPartial("CheckoutResultTable", Model);
}
</div>
该脚本用于捕获由@{
Html.RenderAction("FilterSupplierOrders", "PartialViews");
}行呈现的过滤器。为了避免遗漏错误，下面是过滤器的工作原理:
public ActionResult FilterSupplierOrders()
{
return PartialView("Filters/FilterSuppliersOrders", new SupplierOrdersFilter());
}
和局部视图:
@model MagicAdmin2.Utility.PageFilters.SupplierOrdersFilter
@using (Html.BeginForm())
{
<div class="blackBorder defaultBaseStyle">
<h3 style="background: #efeeef; margin-top: -20px; margin-left: 10px; padding: 0 10px; width: 50px;">Filters</h3>
Filter by Order Type: @Html.DropDownListFor(_item => _item.OrderType, Model.ListOrderTypes, "All", new { @id = "orderType"})
Description: @Html.TextBoxFor(_item => _item.Description, new { @id = "orderDesc"})
Date Created: @Html.DropDownListFor(_item => _item.DateCreatedSymbol, Model.SymbolList, String.Empty, new { @id = "orderCreatedSymbol"}) @Html.TextBoxFor(_item => _item.DateCreated, new { @class = "datePicker", @title = "Choose a date", @id = "orderCreated"})
Date Modified: @Html.DropDownListFor(_item => _item.DateModifiedSymbol, Model.SymbolList, String.Empty, new { @id = "orderModifiedSymbol"}) @Html.TextBoxFor(_item => _item.DateModified, new { @class = "datePicker", @title = "Choose a date", @id = "orderModified"})
<input type="submit" value="Fetch" id="fetchButton"/>
</div>
}
所以原因是视图的其余部分呈现在CheckoutResultTable部分视图中:
@using MagicAdmin2.Utility.Data
@model List<MagicAdmin2.Models.OrderInfo>
@if (Model.Count > 0)
{
@Html.Hidden("sortOrder", Session["checkoutOrderSort"], new { @id = "sortOrder"})
if (Session["checkoutOrderPagesIndex"] != null)
{
<div class="center">
<span>Pages:</span>
@{
List<int> pages = (List<int>)Session["checkoutOrderPagesIndex"];
int inventoryPageNumber = (int)Session["checkoutOrderPageNumber"];
if (pages.Count <= 10)
{
foreach (int page in pages)
{
if (page == inventoryPageNumber)
{
<span>@page</span>
}
else
{
<a href="javascript:void(0)" data-page="@page" class="pageLink">@page</a>
}
}
}
else
{
for (int i = 0; i < pages.Count; i++)
{
int pageToShow = pages[i];
if (pageToShow == pages[0] || pageToShow == pages[pages.Count - 1])
{
if (pageToShow == inventoryPageNumber)
{
<span>@pageToShow</span>
}
else
{
<a href="javascript:void(0)" data-page="@pageToShow" class="pageLink">@pageToShow</a>
}
}
else
{
if (pageToShow == inventoryPageNumber)
{
<span>@pageToShow</span>
}
else if (pages[i] > inventoryPageNumber - 4 && pages[i] < inventoryPageNumber + 5)
{
<a href="javascript:void(0)" data-page="@pageToShow" class="pageLink">@pageToShow</a>
}
else if ((pages[i] == 2 && inventoryPageNumber > 4) || (pages[i] == pages.Count - 1 && inventoryPageNumber < pages.Count - 2))
{
<span>...</span>
}
}
}
}
}
</div>
}
<table id="resultTable">
<tr>
<th>
ID
</th>
<th>
Date Created
</th>
<th>Description</th>
<th>Date Modified</th>
<th>
Type
</th>
<th>
State
</th>
<th>Shipping</th>
<th>Billing</th>
<th>
# Items
</th>
<th>Prices and charges</th>
<th>Actions</th>
</tr>
@for (int i = 0; i < Model.Count; i++)
{
var className = i % 2 == 0 ? "even" : "odd";
<tr class="@className order orderState-@MagicAdmin2.Utility.Helpers.General.GetEnumDescription(Model[i].mOrderState)">
<td>@Html.DisplayFor(_item => _item[i].mOrderID)</td>
<td>@Html.DisplayFor(_item => _item[i].mOrderDateCreated)</td>
<td class="align-left">@Html.DisplayFor(_item => _item[i].mOrderDescription)</td>
<td>@(Model[i].mOrderDateModified != null ? Html.DisplayFor(_item => _item[i].mOrderDateModified)
: Html.Label(ValueDomain.FIELD_UNAVAILABLE))</td>
<td>@Html.DisplayFor(_item => _item[i].mOrderType)</td>
<td>@Html.DisplayFor(_item => _item[i].mOrderState)</td>
<td class="align-left">
Name: <span class="bold">@Model[i].mShippingFirstName</span><br/>
Address: <span class="bold">@Model[i].mShippingAddress</span><br/>
City: <span class="bold">@Model[i].mShippingCity</span><br/>
Country: <span class="bold">@Model[i].mShippingCountry</span><br/>
Region: <span class="bold">@Model[i].mShippingRegion</span><br/>
Postal Code: <span class="bold">@Model[i].mShippingPostalCode</span><br/>
</td>
<td class="align-left">
Name: <span class="bold">@Model[i].mBillingLastName</span><br/>
Address: <span class="bold">@Model[i].mBillingAddress</span><br/>
City: <span class="bold">@Model[i].mBillingCity</span><br/>
Country: <span class="bold">@Model[i].mBillingCountry</span><br/>
Region: <span class="bold">@Model[i].mBillingRegion</span><br/>
Postal Code: <span class="bold">@Model[i].mBillingPostalCode</span><br/>
</td>
<td>@Model[i].mOrderItemCount</td>
<td id="priceField" class="align-left adjustedField">
Detail Amount: <span class="bold">@Html.DisplayFor(_item => _item[i].mOrderDetailAmount) $</span><br/>
Taxes: <span class="bold">@Html.DisplayFor(_item => _item[i].mOrderTaxes) $</span><br/>
Shipping Cost: <span class="bold">@Html.DisplayFor(_item => _item[i].mOrderShippingCost) $</span><br/>
Handling Cost: <span class="bold">@Html.DisplayFor(_item => _item[i].mOrderHandlingCost) $</span><br/>
@Html.ActionLink("Item Total", "DisplaySupplierOrdersToCheckout", new { @_sortOrder = ViewBag.TotalSortParm } ): <span class="bold">@Html.DisplayFor(_item => _item[i].mOrderTotal) $</span><br/>
</td>
<td>@Html.ActionLink("Confirm reception", "SelectOrder", new { _orderID = Model[i].mOrderID })</td>
</tr>
}
</table>
if (Session["checkoutOrderPagesIndex"] != null)
{
<div class="center">
<span>Pages:</span>
@{
List<int> pages = (List<int>)Session["checkoutOrderPagesIndex"];
int inventoryPageNumber = (int)Session["checkoutOrderPageNumber"];
if (pages.Count <= 10)
{
foreach (int page in pages)
{
if (page == inventoryPageNumber)
{
<span>@page</span>
}
else
{
<a href="javascript:void(0)" data-page="@page" class="pageLink">@page</a>
}
}
}
else
{
for (int i = 0; i < pages.Count; i++)
{
int pageToShow = pages[i];
if (pageToShow == pages[0] || pageToShow == pages[pages.Count - 1])
{
if (pageToShow == inventoryPageNumber)
{
<span>@pageToShow</span>
}
else
{
<a href="javascript:void(0)" data-page="@pageToShow" class="pageLink">@pageToShow</a>
}
}
else
{
if (pageToShow == inventoryPageNumber)
{
<span>@pageToShow</span>
}
else if (pages[i] > inventoryPageNumber - 4 && pages[i] < inventoryPageNumber + 5)
{
<a href="javascript:void(0)" data-page="@pageToShow" class="pageLink">@pageToShow</a>
}
else if ((pages[i] == 2 && inventoryPageNumber > 4) || (pages[i] == pages.Count - 1 && inventoryPageNumber < pages.Count - 2))
{
<span>...</span>
}
}
}
}
}
</div>
}
}
else
{
<span class="errorMessage">There are no orders to checkout.</span>
}
是因为如果用户在那一刻选择筛选获得的数据，比如按名称，他可以使用调用控制器方法的jquery方法:
public PartialViewResult GetSuppliersNextPage(int _pageNumber, string _orderType, string _orderDesc, string _dateCreated, string _dateCreatedSymbol,
string _dateModified, string _dateModifiedSymbol, string _sortOrder)
{
int totalCount;
string sortOrder;
if (Session[CHECKOUT_SORT_ORDER] == null)
{
sortOrder = _sortOrder;
Session[CHECKOUT_SORT_ORDER] = _sortOrder;
}
else
{
sortOrder = (string)Session[CHECKOUT_SORT_ORDER];
switch (_sortOrder)
{
default:
sortOrder = _sortOrder;
break;
}
}
ISupplierOrderParams filterParams = new SupplierOrderParams(_pageNumber, _orderType, _orderDesc, _dateCreated, _dateCreatedSymbol, _dateModified, _dateModifiedSymbol, sortOrder);
List<OrderInfo> listItems = mOrderManager.ListSupplierOrdersNextPage(filterParams, out totalCount);
Session[CHECKOUT_PAGE_INDEX] = General.CreatePageIndex(totalCount);
Session[CHECKOUT_PAGE_NUMBER] = _pageNumber;
return PartialView("CheckoutResultTable", listItems);
}
我的主要问题是该方法被适当地调用并进行渲染。然而，在局部视图的呈现完成后，CheckoutSupplierOrders()控制器方法被调用(为什么?!?)，从而破坏了ajax调用的目的。我不知道为什么会这样
看起来问题在于，当单击按钮时，不仅触发了部分视图的加载，而且还提交了表单。在提交表单并接收到服务器的响应(响应是相同的页面)之后，浏览器呈现此响应，并且您看到的页面与您所处的页面完全相同。
要避免这种行为，请在单击处理程序中防止它:
$('#fetchButton').click(function (e) {
e.preventDefault();