用戶需求是:一個表單一旦創(chuàng)建完,其中大部分的字段便不可再編輯。只能編輯其中部分字段。
而不可編輯是通過對input輸入框設置disabled屬性實現(xiàn)的,那么這時候直接向數(shù)據(jù)庫中submit表單中的內(nèi)容就會報錯,因為有些不能為null的字段由于disabled屬性根本無法在前端被獲取而后更新至數(shù)據(jù)庫。
有下面兩種思路:
1.通過創(chuàng)建隱藏表單,為每一個disabled控件分別創(chuàng)建一個隱藏控件,但是這樣的問題是工作量太大(如果表單有一千個屬性,你懂的)
2.通過獲取該表單在數(shù)據(jù)庫中的id,把該id和可以編輯的字段傳遞到后臺。首先通過id將對象及其屬性數(shù)據(jù)從數(shù)據(jù)庫中搜索出來,然后將可以編輯的字段賦值給該對象。處理完畢后,再將該對象的數(shù)據(jù)更新至數(shù)據(jù)庫。
綜上所述,用第二種思路能顯得更加睿智。
下面是具體的操作步驟:(具體步驟就不用細看了,這是我從項目中抽出來的,只適合我自己回顧)
1.在OutsourcingModule.cs中創(chuàng)建路由,以此創(chuàng)建一個訪問路徑:
routes.MapRoute( "OutSourcingWorkSheet",//路由名 "outsourcing/saveWorkSheet",//url路徑 new {controller = "Outsourcing", action = "SaveWorkSheet"}//映射的控制器以及對應的Action方法名); 2.
/// <summary>/// 保存工作票/// ModelBinder會將前端傳遞過來的id在數(shù)據(jù)庫中搜索出字段并且轉換為outsourcing對象/// 此時的outsourcing對象中的workSheets屬性不是前端傳遞過來的值,而是數(shù)據(jù)庫中的/// /// 方法中有兩個參數(shù),outsourcing上面已經(jīng)解釋,workSheets是前端傳遞過來的第二個參數(shù)/// </summary>/// <param name="outsourcing"></param>/// <param name="workSheets"></param>/// <returns></returns>[HttpPost][ActionName("SaveWorkSheet")][AccessRestriction("SaveWorkSheet")]public JsonResult SaveWorkSheet(Outsourcing outsourcing,string workSheets){ if (outsourcing!=null) { outsourcing.WorkSheets = workSheets; _outsourcingService.Save(outsourcing); return Json(new ABResponse(HttpStatusCode.OK)); } return Json(new ABResponse(HttpStatusCode.BadRequest));}//AB為內(nèi)部項目3.前端js腳本代碼
$('#btn_saveWorkSheet').on('click', function () { if ($("input[name=workSheets]").val() == "") { bootbox.alert("不能為空"); } else { $.ajax({ type: "post", url: "/outsourcing/saveWorkSheet", data: { ID: $("#outsourcing_id").val(), WorkSheets: $("input[name=workSheets]").val() }, dataType: "json", success: function (data) { if (data.Code == 200) { bootbox.alert("修改成功,即將刷新"); setTimeout(function () { location.reload(); }, 1000); } else { bootbox.alert("提交失敗,請稍后再試"); } } }); }});
新聞熱點
疑難解答
圖片精選