次のビューとコントローラーがあります。
意見:
<div class="searchPastTransactions">
<p>
<label for="start">From:</label>
@(Html.Kendo().DatePicker()
.Name("from")
.Events(e => e.Change("startChange"))
)
<label for="end">To:</label>
@(Html.Kendo().DatePicker()
.Name("to")
.Events(e => e.Change("endChange"))
)
</p>
<button class="k-button" id="showGrid">Search</button>
</div>
<script>
function startChange() {
var endPicker = $("#to").data("kendoDatePicker"),
startDate = this.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate() + 1);
endPicker.min(startDate);
}
}
function endChange() {
var startPicker = $("#from").data("kendoDatePicker"),
endDate = this.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate() - 1);
startPicker.max(endDate);
}
}
$(function () {
$("#showGrid").click(function () {
$.ajax({
url: '@Url.Action("PastTransactionsPartial", "InventoryTransactions")',
type: 'POST',
contentType: 'application/json; charset=utf-8',
cache: false,
data: JSON.stringify({
dateFrom: $('#from').val(),
dateTo: $('#to').val(),
}),
success: function (result) {
$('#divPastTransactions').replaceWith(result);
},
error: function () { alert("Please specify from and to dates"); }
});
});
});
</script>
<div id="divPastTransactions" ></div>
部分図:
<div id="gridContent">
@{
var grid = new WebGrid(source: Model,
defaultSort: "InventoryTransactionCreatedDateTime",
rowsPerPage: 10,
canPage: true,
canSort: true,
ajaxUpdateContainerId: "gridContent"
);
grid.SortDirection = SortDirection.Descending;
}
@grid.GetHtml(
tableStyle: "gridTable",
headerStyle: "gridHead",
footerStyle:"gridFooter",
rowStyle:"gridRow",
alternatingRowStyle: "gridAltRow",
columns: grid.Columns(
grid.Column(
columnName: "InventoryTransactionID",
header: "ID",
style: "fiftyCenter"
),
grid.Column(
columnName: "InventoryTransactionType.InventoryTransactionTypeName",
header: "Transaction Type",
style: "fiftyCenter"
),
grid.Column(
columnName: "InventoryType.InventoryTypeName",
header: "Type",
style: "fiftyCenter"
),
grid.Column(
columnName:"Supplier",
header:"Supplier",
style: "eightyCenter",
format: @<text> @if (@item.Supplier !=null) { <span> @item.Supplier.SupplierName </span> } </text>
),
grid.Column(
columnName: "InventoryTransactionDate",
header: "Transaction Date",
format: (item) => string.Format("{0:dd/MM/yyyy}", item.InventoryTransactionDate),
style: "fiftyCenter"
),
grid.Column(
columnName: "InventoryTransactionReceipt",
header: "Receipt/ Invoice No.",
style: "fiftyCenter"
),
grid.Column(
columnName: "InventoryTransactionQuantity",
header: "Quantity",
style: "fiftyRight",
format: (item) => string.Format("{0:N2}", item.InventoryTransactionQuantity)
),
grid.Column(
columnName: "InventoryTransactionPrice",
header: "Price per Item",
style: "fiftyRight",
format: (item) => string.Format("{0:N2}", item.InventoryTransactionPrice)
),
grid.Column(
columnName: "InventoryTransactionBy",
header: "Transaction By",
style: "fiftyCenter"
),
grid.Column(
columnName: "InventoryTransactionRemarks",
header: "Remarks",
style: "twohundred"
),
grid.Column(
columnName: "InventoryTransactionCreatedDateTime",
header: "Created On"
),
grid.Column(
columnName: "InventoryTransactionCreatedBy",
header: "User"
),
grid.Column(
columnName: "InventoryTransactionCancelled",
header: "Cancelled"
),
grid.Column(
columnName: "InventoryTransactionCancelledSourceID",
header: "Cancelled ID"
),
grid.Column(
columnName:"InventoryTransactionID",
header: " ",
format: @<text> @if (!@item.InventoryTransactionCancelled && @item.InventoryTransactionCancelledSourceID == null && User.IsInRole("Supervisor"))
{ @Html.ActionLink("Cancel", "CancelTransaction", new { id = item.InventoryTransactionID}) } </text>
)
)
)
</div>
コントローラ:
public ActionResult PastTransactionsPartial(DateTime dateFrom, DateTime dateTo)
{
var inventorytransactions = db.InventoryTransactions.Include(i => i.InventoryTransactionType).Include(i => i.InventoryType).Include(i => i.Supplier).Where(i => i.InventoryTransactionDate >= dateFrom && i.InventoryTransactionDate <= dateTo);
return PartialView("_PastTransactionsPartial", inventorytransactions.ToList());
}
私が抱えている問題は、部分ビューを初めてロードした後、それを新しい結果に置き換えることができないことです。更新してからもう一度検索を実行する必要があります。そうしないと、グリッドに常に古い結果が表示されます。
更新: 問題の解決策が見つかりません。最後に、検索後に検索ボタンを無効にし、ユーザーは別の検索のためにページをリロードする必要があります。