用戶需求是:一個表單一旦創建完,其中大部分的欄位便不可再編輯。只能編輯其中部分欄位。 而不可編輯是通過對input輸入框設置disabled屬性實現的,那麼這時候直接向資料庫中submit表單中的內容就會報錯,因為有些不能為null的欄位由於disabled屬性根本無法在前端被獲取而後更新至資料庫。 ...
用戶需求是:一個表單一旦創建完,其中大部分的欄位便不可再編輯。只能編輯其中部分欄位。
而不可編輯是通過對input輸入框設置disabled屬性實現的,那麼這時候直接向資料庫中submit表單中的內容就會報錯,因為有些不能為null的欄位由於disabled屬性根本無法在前端被獲取而後更新至資料庫。
有下麵兩種思路:
1.通過創建隱藏表單,為每一個disabled控制項分別創建一個隱藏控制項,但是這樣的問題是工作量太大(如果表單有一千個屬性,你懂的)
2.通過獲取該表單在資料庫中的id,把該id和可以編輯的欄位傳遞到後臺。首先通過id將對象及其屬性數據從資料庫中搜索出來,然後將可以編輯的欄位賦值給該對象。處理完畢後,再將該對象的數據更新至資料庫。
綜上所述,用第二種思路能顯得更加睿智。
下麵是具體的操作步驟:(具體步驟就不用細看了,這是我從項目中抽出來的,只適合我自己回顧)
1.在OutsourcingModule.cs中創建路由,以此創建一個訪問路徑:
routes.MapRoute( "OutSourcingWorkSheet",//路由名 "outsourcing/saveWorkSheet",//url路徑 new {controller = "Outsourcing", action = "SaveWorkSheet"}//映射的控制器以及對應的Action方法名 );
2.
/// <summary> /// 保存工作票 /// ModelBinder會將前端傳遞過來的id在資料庫中搜索出欄位並且轉換為outsourcing對象 /// 此時的outsourcing對象中的workSheets屬性不是前端傳遞過來的值,而是資料庫中的 /// /// 方法中有兩個參數,outsourcing上面已經解釋,workSheets是前端傳遞過來的第二個參數 /// </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為內部項目
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("提交失敗,請稍後再試"); } } }); } });
其實思路很簡單,但是我特麽做了大半天- -;其中還遇到了一個大坑:
在第二段代碼的參數列表中,我一開始把string workSheets寫成了WorkSheets。這時文字下出現了藍色的波浪線,Alt+Enter後系統提示Rename to workSheets,我便直接回車確定了。然後,WorkSheets欄位便再也無法保存,也不能從資料庫中讀取。在同事幫忙找了N久之後發現,原來是當時大寫改小寫的過程中同時將dbml文件中的欄位也改成了小寫導致了無法和資料庫匹配。
做這個功能的時候順便學到的一點知識:
如果一個input的id為apple,那麼可以這麼獲取,這是我本來就知道的:
var apple = $("#apple").val();
如果一個input的name為apple,那麼可以這麼獲取,這是我剛知道的:
var apple = $("input[name=apple]").val();
還有一個剛知道的,如果從很多input中去除某個name:
$("#fruit").find("input:not(input[name=apple]),textarea,select").attr("disabled", true); //從id為fruit的父元素裡面尋找所有的input、textarea和select控制項以及其值,但是除去name為apple的控制項
另外總結下ajax的方式,很久不用都快忘了:
$.ajax({ type:"post",//可以選擇post或者method url:"",//url介面 data:{ //參數列表 }, success:function(data){ //如果訪問url成功,data就是該url介面自動返回的數據 } })