用戶需求是：一個表單一旦創(chuàng)建完，其中大部分的字段便不可再編輯。只能編輯其中部分字段。
而不可編輯是通過對input輸入框設(shè)置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)建一個訪問路徑：
|
1
2
3
4
5
|
routes.MapRoute( "OutSourcingWorkSheet",//路由名 "outsourcing/saveWorkSheet",//url路徑 new {controller = "Outsourcing", action = "SaveWorkSheet"}//映射的控制器以及對應(yīng)的Action方法名); |
2.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/// <summary>/// 保存工作票/// ModelBinder會將前端傳遞過來的id在數(shù)據(jù)庫中搜索出字段并且轉(zhuǎn)換為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腳本代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
$('#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("提交失敗，請稍后再試"); } } }); }}); |
其實思路很簡單，但是我特么做了大半天- -；其中還遇到了一個大坑：
在第二段代碼的參數(shù)列表中，我一開始把string workSheets寫成了WorkSheets。這時文字下出現(xiàn)了藍色的波浪線，Alt+Enter后系統(tǒng)提示Rename to workSheets，我便直接回車確定了。然后，WorkSheets字段便再也無法保存，也不能從數(shù)據(jù)庫中讀取。在同事幫忙找了N久之后發(fā)現(xiàn)，原來是當時大寫改小寫的過程中同時將dbml文件中的字段也改成了小寫導致了無法和數(shù)據(jù)庫匹配。
做這個功能的時候順便學到的一點知識：
如果一個input的id為apple，那么可以這么獲取，這是我本來就知道的：
|
1
|
var apple = $("#apple").val(); |
如果一個input的name為apple，那么可以這么獲取，這是我剛知道的：
|
1
|
var apple = $("input[name=apple]").val(); |
還有一個剛知道的，如果從很多input中去除某個name：
|
1
2
|
$("#fruit").find("input:not(input[name=apple]),textarea,select").attr("disabled", true);//從id為fruit的父元素里面尋找所有的input、textarea和select控件以及其值，但是除去name為apple的控件 |
另外總結(jié)下ajax的方式，很久不用都快忘了：
|
1
2
3
4
5
6
7
8
9
10
|
$.ajax({ type:"post",//可以選擇post或者method url:"",//url接口 data:{ //參數(shù)列表 }, success:function(data){ //如果訪問url成功，data就是該url接口自動返回的數(shù)據(jù) }}) |
總結(jié)
以上所述是小編給大家介紹的Asp.Net MVC4通過id更新表單內(nèi)容的思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務(wù)器之家網(wǎng)站的支持！
