前言
再前一篇我們已經完成利用Ajax來讀取後端資料顯示於Grid，而此篇就會將新增、修改、刪除功能接續完成
CRUD的 Create - 新增
Controller
利用原本樣板產生的程式做一些修改，原本程式如下
將上面程式修改為以下，透過MVC的Model Bindder可以接收前端傳來的Customers物件，並依情況回傳是否新增成功
View
將dataSrc新增一個Create function，指向後端的CreateCustomer，並在完成後alert處理結果
Schema部分新增model定義，讓KendoUI知道你的模組結構，並且可設定一些欄位驗證
接著在屬性部分新增toolbar及editable，editable模式可分為inline(直接在Gird新增一個)或者是popup(彈跳視窗)方式，此例我們希望新增時是跳出一個燈箱視窗
結果圖
這樣就完成，在以往我們可能自己要實做View的頁面，現在KendoUI都幫你做好好的，且表單也排得很整理 lol
CRUD的Update-編輯
Controller
基本上跟新增大同小異，我們在Controller新增EditCustomer的JsonResult
View
新增一個Update function
在columns多一個command成員，並設定edit按鈕(這邊也可以自訂義Button標籤)
這樣就完成編輯燈箱視窗了!!
CRUD的Delete-刪除
Contoller (這邊就不解釋了)
View
後記
以上是一種實做CRUD的方式，但其實做法有很多種，譬如你也可自訂新增、編輯的View去實做，或者你也可以自訂一些查詢欄位POST到後端去，關於版面，如果要修改中文的顯示其實也可以做到，之後也會分享一些實做心得PO上來。而下一篇，預計完將後端改成用WebAPI + OData的方式實做 =V=
完成程式碼
Contoller
public class GridAjaxController : Controller
{
private NorthwindEntities db = new NorthwindEntities();
// GET: /GridAjax/
public ActionResult Index()
{
return View();
}
public JsonResult GetCustomer(KendoGridRequest request)
{
try
{
var result = db.Customers.ToList();
return Json(new KendoGrid<Customers>(request, result), JsonRequestBehavior.AllowGet);
}
catch (Exception)
{
Dictionary<string, object> error = new Dictionary<string, object>();
error.Add("ErrorCode", -1);
error.Add("ErrorMessage", "讀取資料失敗!");
return Json(error);
}
}
// GET: /GridAjax/Details/5
public ActionResult Details(string id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Customers customers = db.Customers.Find(id);
if (customers == null)
{
return HttpNotFound();
}
return View(customers);
}
// GET: /GridAjax/Create
public ActionResult Create()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult CreateCustomer(Customers customers)
{
if (ModelState.IsValid)
{
if (TryUpdateModel(customers))
{
db.Customers.Add(customers);
db.SaveChanges();
return Json("新增成功!!");
}
}
return Json("新增失敗!!");
}
public JsonResult EditCustomer(Customers customers)
{
if (ModelState.IsValid)
{
db.Entry(customers).State = EntityState.Modified;
if (TryUpdateModel(customers))
{
db.SaveChanges();
return Json("更新成功!!");
}
}
return Json("更新失敗!!");
}
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult DeleteCustomer(string CustomerID)
{
Customers customers = db.Customers.Find(CustomerID);
db.Customers.Remove(customers);
if (TryUpdateModel(customers))
{
db.SaveChanges();
return Json("刪除成功!!");
}
return Json("刪除失敗!!");
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
View
@model IEnumerable<KendoUI.Model.Customers>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/BaseLayoutPage.cshtml";
}
@section scripts
{
<script type="text/javascript">
$(function () {
//資料來源物件改用Ajax
var dataSrc = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
url: "/GridAjax/GetCustomer",
dataType: "json",
complete: function (response, status) {
if (response.responseJSON.ErrorCode == -1) {
alert(response.responseJSON.ErrorMessage);
}
}
},
update: {
url: "/GridAjax/EditCustomer",
dataType: "json",
type: "POST",
complete: function (response, status) {
alert(response.responseJSON);
}
},
create: {
url: "/GridAjax/CreateCustomer",
dataType: "json",
type: "POST",
complete: function (response, status) {
alert(response.responseJSON);
}
},
destroy: {
url: "/GridAjax/DeleteCustomer",
dataType: "json",
type: "POST",
complete: function (response, status) {
alert(response.responseJSON);
}
},
},
schema: {
data: function (d) {
return d.data;
},
total: function (d) { return d.total; },
model: {
id: "CustomerID",
fields: {
product: { editable: false, nullable: false },
CompanyName: { validation: { required: true } },
ContactName: { validation: { required: true } },
City: { validation: { required: true } }
}
}
},
pageSize: 5,
serverPaging: true,
serverSorting: true
});
$("#gridData").kendoGrid({
dataSource: dataSrc,
columns: [
{ field: "CustomerID", title: "CustomerID" },
{ field: "CompanyName", title: "CompanyName" },
{ field: "ContactName", title: "ContactName" },
{ field: "City", title: "City" },
{ command: ["edit","destroy"], title: " ", width: "160px" }
], //columns的field對應到customer資料表的欄位
sortable: true,
pageable: true,
filterable: true,
width: 800,
toolbar: ["create"],
editable: {
mode: "popup", //使用Popup的模式編輯資料
update: true, // 若設定為True,當按下Update才server資料
}
});
});
</script>
}
<div id="gridData"></div>
延伸閱讀
透過泛型處理常式執行Kendo UI Grid Widget的CRUD (WebForm)
沒有留言:
張貼留言