分享Asp.Net MVC4如何?通過id更新表單內容的執行個體分析

一個表單一旦建立完，其中大部分的欄位便不可再編輯。只能編輯其中部分欄位。下面通過本文給大家分享Asp.Net MVC4通過id更新表單內容的思路詳解，需要的朋友參考下吧

使用者需求是：一個表單一旦建立完，其中大部分的欄位便不可再編輯。只能編輯其中部分欄位。

而不可編輯是通過對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介面自動返回的資料  }})

總結