學習如何使用 Fetch 請求在 Syncfusion ASP.NET MVC 數據網格中處理 CRUD 操作。本博客將介紹如何使用 Fetch 進行數據綁定和執行 CRUD 操作，以實現服務器端更新。文中包含添加、編輯和刪除記錄的示例，以及處理 Fetch 成功和失敗事件的方法，確保操作流暢執行和實時數據一致性。
Fetch 是現代 Web 開發中的一種強大方法，它允許異步向服務器發送數據以更新數據庫，或從服務器檢索數據而無需刷新整個網頁，從而提供更流暢、高效的用戶體驗。
Syncfusion ASP.NET MVC 數據網格是一個功能豐富的組件，專為處理大量數據而設計，它內置了對 CRUD（創建、讀取、更新、刪除）操作的支持。這些操作是任何涉及數據操作的應用程序的基礎。
ASP.NET MVC 試用下載
然而，考慮到用戶的多樣化需求，我們還提供了一種選項，允許用戶使用自己的 Fetch 命令在數據網格中執行這些 CRUD 操作。這意味著用戶可以按照自己的特定需求和偏好與數據庫進行交互。
此功能特別有用，因為它允許用戶在 CRUD 操作期間將服務器邏輯與 Syncfusion ASP.NET MVC 數據網格無縫集成。因此，這些操作期間所做的任何更改都可以立即、準確地反映在網格中。
讓我們看看如何在ASP.NET MVC 數據網格中使用 Fetch 請求進行數據綁定和執行 CRUD 操作。
渲染 Syncfusion ASP.NET MVC 數據網格
Syncfusion ASP.NET MVC 數據網格是一個功能豐富的控件，用于以表格形式顯示數據。其功能包括數據綁定、編輯、類似 Excel 的過濾和選擇，還支持將數據導出為 Excel、CSV 和 PDF 格式。
現在，讓我們看看如何渲染ASP.NET MVC 數據網格控件。在這里，我們啟用了分頁和編輯功能，以提供更具交互性的用戶體驗。請參考以下代碼示例。
@Html.EJS().Grid("Grid")
.EditSettings(e => { e.AllowAdding(true).AllowEditing(true).AllowDeleting(true); })
.Columns(col =>{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("130").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
col.Field("CustomerID").HeaderText("CustomerID").Width("70").Add();
col.Field("ShipCity").HeaderText("Ship City").Width("70").Add()
})
.AllowPaging(true)
.AllowSorting(true)
.ActionComplete("actionComplete")
.ActionBegin("actionBegin")
.Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })
.Render()
以前，數據源未綁定到數據網格。但現在我們將使用 Fetch 請求將數據綁定到數據網格。在服務器端，HomeController 中的 GetData 方法包含網格的數據源。當單擊按鈕時，會發送一個 Fetch 請求從服務器獲取數據，并將其綁定到數據網格控件。
public class HomeController : Controller
{
public ActionResult Getdata()
{
IEnumerable DataSource = OrdersDetails.GetAllRecords();
return Json(DataSource);
}
//Create a model class and define the properties.
public class OrdersDetails
{
public OrdersDetails()
{
}
public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
{
this.OrderID = OrderID;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.ShipCity = ShipCity;
this.Verified = Verified;
this.OrderDate = OrderDate;
this.ShipName = ShipName;
this.ShipCountry = ShipCountry;
this.ShippedDate = ShippedDate;
this.ShipAddress = ShipAddress;
}
//Render data in this method.
public static List<OrdersDetails> GetAllRecords()
{
List<OrdersDetails> order = new List<OrdersDetails>();
int code = 10000;
for (int i = 1; i < 10; i++)
{
order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
code += 5;
}
return order;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
}
通過 Fetch 請求檢索數據
我們可以利用 dataSource 屬性，通過 Fetch 請求從外部源獲取數據，并將其綁定到 ASP.NET MVC 數據網格。
在以下代碼示例中，我們演示了如何使用 Fetch 請求從服務器獲取數據。成功檢索后，將利用 Fetch 請求的 onSuccess 事件，在按鈕點擊事件中將數據綁定到 dataSource 屬性。
<script>
let button = document.getElementById('btn');
button.addEventListener("click", function (e) {
let fetch= new ej2.base.Fetch("/Home/Getdata", "POST");
fetch.send();
fetch.onSuccess = function (data) {
var grid = document.getElementById('Grid').ej2_instances[0];
grid.dataSource = JSON.parse(data);
};
});
</script>
通過 Fetch 請求執行 CRUD 操作
除了綁定數據外，您還可以利用 Fetch 請求處理 CRUD（創建、讀取、更新、刪除）操作，并在服務器端更新數據。當執行任何網格操作時，actionBegin 事件會在網格中操作發生前觸發。
通過利用 actionBegin 事件，您可以使用該事件提供的 cancel 參數取消默認的 CRUD 操作。這使您能夠使用 Fetch 動態調用服務器端方法，并通過 actionBegin 事件接收的相關數據相應地更新服務器數據。
通過 Fetch 請求添加新記錄
要使用 Fetch 請求創建新記錄，可按以下步驟操作：
1.點擊網格工具欄中的 添加 圖標。此操作將在網格內生成一個表單，允許您輸入必要的詳細信息。
2.輸入詳細信息后，點擊工具欄中的 更新 圖標提交更改。
3.在此過程中，actionBegin 事件會被激活。在該事件中，您可以從參數中獲取 requestType 為 save 、action 值為 add。
4.利用這些信息，您可以取消默認操作并發送 Fetch 請求，以在服務器端執行添加操作。
參考以下代碼示例：
//Insert the record.
public ActionResult Insert(OrdersDetails value)
{
OrdersDetails.GetAllRecords().Insert(0, value);
return Json(value);
}
現在，我們將通過 fetch 調用從 actionBegin 事件中調用 Insert 方法。
<script>
var flag = false;
function actionBegin(e) {
// Initially the flag needs to be false in order to enter this condition.
if (!flag) {
var grid = document.getElementById('Grid').ej2_instances[0];
// Add and edit operations.
if (e.requestType == 'save' && (e.action == 'add')) {
var editedData = e.data;
// The default edit operation is canceled.
e.cancel = true;
// Here, you can send the updated data to your server using a fetch call.
var fetch= new ej.base.Fetch({
url: '/Home/Insert',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ value: editedData })
});
fetch.onSuccess = (args) => {
// Flag is enabled to skip this execution when grid ends add/edit action.
flag = true;
// The added/edited data will be saved in the Grid.
grid.endEdit();
}
fetch.onFailure = (args) => {
// Add/edit failed.
// The flag is disabled if the operation fails so that it can enter the condition on the next execution.
flag = false;
}
fetch.send();
}
}
在 Fetch 成功事件中，您可以使用網格的endEdit方法（用于添加和編輯操作）和deleteRecord方法（用于刪除網格中的對應數據）。但需要注意的是，調用這些方法會再次觸發actionBegin事件，以保存數據網格中的更改。
為避免這種情況并控制執行流程，您可以使用一個標志變量，并在actionComplete事件和 Fetch 失敗事件中對其進行管理。
參考以下代碼示例：
function actionComplete(e) {
if (e.requestType === 'save' || e.requestType === 'delete') {
// The flag is disabled after the operation is successfully performed so that it can enter the condition on the next execution.
flag = false;
}
}
使用 Fetch 請求更新和保存記錄
要使用 Fetch 請求編輯并保存記錄，請按以下步驟操作：
1.通過單擊或使用工具欄中的 “編輯” 圖標，在網格中選擇所需記錄。或者，雙擊某一行以啟動對該特定記錄的編輯過程。
2.在編輯表單中，對記錄的詳細信息進行必要的修改。
3.選擇工具欄中的 “更新” 圖標以保存更改。
4.在此過程中，會觸發actionBegin事件。在該事件中，從參數中檢索requestType和action值。
5.檢查requestType是否為save且action是否為edit，以識別編輯記錄的特定場景。
6.如果條件滿足，使用數據網格庫提供的相應機制取消默認操作。這可確保繞過網格對編輯操作的默認行為。
7.最后，構造一個 Fetch 請求以調用控制器中的更新方法。
參考以下代碼示例：
//Update the record.
Public ActionResult Update(OrdersDetails value)
{
var ord = value;
OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault();
val.OrderID = ord.OrderID;
val.EmployeeID = ord.EmployeeID;
val.CustomerID = ord.CustomerID;
return Json(value);
}
現在，我們將通過 Fetch 調用從 actionBegin 事件中調用 Update 方法。
<script>
var flag = false;
function actionBegin(e) {
// Initially, the flag needs to be false in order to enter this condition.
if (e.requestType == 'save' && (e.action == 'edit')) {
var editedData = e.data;
// The default edit operation is canceled.
e.cancel = true;
// Here, you can send the updated data to your server using a Fetch call.
var fetch= new ej.base.Fetch ({
url: '/Home/Update',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ value: editedData })
});
fetch.onSuccess = (args) => {
// Flag is enabled to skip this execution when the DataGrid ends add/edit action.
flag = true;
// The added/edited data will be saved in the Grid.
grid.endEdit();
}
fetch.onFailure = (args) => {
// Add/edit failed.
// The flag is disabled if operation is failed so that it can enter the condition on next execution.
flag = false;
}
fetch.send();
}
}
使用 Fetch 請求刪除記錄
若要使用 Fetch 請求刪除記錄，請按以下步驟操作：
1.在網格中通過點擊記錄或使用工具欄中的刪除圖標，選擇您希望刪除的記錄。
2.當記錄被選中刪除時，將觸發actionBegin事件。在此事件中，從參數中檢索requestType值。
3.檢查requestType是否為delete，以識別刪除操作。
4.如果滿足條件，使用數據網格庫中可用的相應機制取消默認操作。這將阻止網格對刪除操作執行默認行為。
5.構造一個 Fetch 請求，以調用控制器中的刪除方法。
6.根據您的具體需求配置 Fetch 設置，例如 URL、數據以及成功 / 錯誤處理邏輯。
參考以下代碼示例：
//Delete the record.
public ActionResult Delete(int key)
{
OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == key).FirstOrDefault());
var data = OrdersDetails.GetAllRecords();
return Json(data);
}
現在，我們將通過 Fetch 調用從 actionBegin 事件中調用 Delete 方法。
<script>
var flag = false;
function actionBegin(e) {
if (e.requestType == 'delete') {
var editedData = e.data;
// The default delete operation is canceled.
e.cancel = true;
// Here, you can send the deleted data to your server using a Fetch call.
var fetch= new ej.base.Fetch ({
url: '/Home/Delete',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ key: editedData[0][grid.getPrimaryKeyFieldNames()[0]] })
})
fetch.onSuccess = (args) => {
// Flag is enabled to skip this execution when grid deletes a record.
flag = true;
// The deleted data will be removed from the Grid.
grid.deleteRecord();
}
fetch.onFailure = (args) => {
// Delete failed.
// The flag is disabled if the operation fails so that it can enter the condition on the next execution.
flag = false;
}
fetch.send();
}
}
請參考以下輸出圖片：
結論
感謝閱讀！在本篇博客中，我們探討了如何使用 Fetch 請求高效處理 Syncfusion ASP.NET MVC 數據網格中的 CRUD 操作。通過利用 Fetch，我們能夠動態地從服務器獲取和更新數據，而無需刷新整個頁面。
慧都科技是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。
慧都科技作為 Syncfusion 的中國區合作伙伴，Syncfusion 作為 UI 組件研發領域的領先技術提供商，提供 Essential Studio 等強大工具，助力企業實現高效的應用開發與管理。Essential Studio 包括 1900 多個組件和框架，支持 WinForms 等多個主流開發平臺，其組件功能強大，可滿足大量數據處理需求。Essential Studio 提供豐富的學習資源，包括視頻教程、文檔和知識庫，幫助開發者快速掌握使用方法。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
4次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線