快捷導(dǎo)航

Asp.Net MVC4通過id更新表單內(nèi)容的思路詳解

更新時(shí)間：2017年07月17日 16:14:19 作者：chenyangsocool

一個(gè)表單一旦創(chuàng)建完，其中大部分的字段便不可再編輯。只能編輯其中部分字段。下面通過本文給大家分享Asp.Net MVC4通過id更新表單內(nèi)容的思路詳解，需要的朋友參考下吧

用戶需求是：一個(gè)表單一旦創(chuàng)建完，其中大部分的字段便不可再編輯。只能編輯其中部分字段。

而不可編輯是通過對(duì)input輸入框設(shè)置disabled屬性實(shí)現(xiàn)的，那么這時(shí)候直接向數(shù)據(jù)庫(kù)中submit表單中的內(nèi)容就會(huì)報(bào)錯(cuò)，因?yàn)橛行┎荒転閚ull的字段由于disabled屬性根本無(wú)法在前端被獲取而后更新至數(shù)據(jù)庫(kù)。

有下面兩種思路：

1.通過創(chuàng)建隱藏表單，為每一個(gè)disabled控件分別創(chuàng)建一個(gè)隱藏控件，但是這樣的問題是工作量太大（如果表單有一千個(gè)屬性，你懂的）

2.通過獲取該表單在數(shù)據(jù)庫(kù)中的id，把該id和可以編輯的字段傳遞到后臺(tái)。首先通過id將對(duì)象及其屬性數(shù)據(jù)從數(shù)據(jù)庫(kù)中搜索出來(lái)，然后將可以編輯的字段賦值給該對(duì)象。處理完畢后，再將該對(duì)象的數(shù)據(jù)更新至數(shù)據(jù)庫(kù)。

綜上所述，用第二種思路能顯得更加睿智。

下面是具體的操作步驟：（具體步驟就不用細(xì)看了，這是我從項(xiàng)目中抽出來(lái)的，只適合我自己回顧）

1.在OutsourcingModule.cs中創(chuàng)建路由，以此創(chuàng)建一個(gè)訪問路徑：

routes.MapRoute(
  "OutSourcingWorkSheet",//路由名
  "outsourcing/saveWorkSheet",//url路徑
  new {controller = "Outsourcing", action = "SaveWorkSheet"}//映射的控制器以及對(duì)應(yīng)的Action方法名
);

2.

/// <summary>
/// 保存工作票
/// ModelBinder會(huì)將前端傳遞過來(lái)的id在數(shù)據(jù)庫(kù)中搜索出字段并且轉(zhuǎn)換為outsourcing對(duì)象
/// 此時(shí)的outsourcing對(duì)象中的workSheets屬性不是前端傳遞過來(lái)的值，而是數(shù)據(jù)庫(kù)中的
/// 
/// 方法中有兩個(gè)參數(shù)，outsourcing上面已經(jīng)解釋，workSheets是前端傳遞過來(lái)的第二個(gè)參數(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)部項(xiàng)目

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("提交失敗，請(qǐng)稍后再試");
        }
      }
    });
  }
});

其實(shí)思路很簡(jiǎn)單，但是我特么做了大半天- -；其中還遇到了一個(gè)大坑：

在第二段代碼的參數(shù)列表中，我一開始把string workSheets寫成了WorkSheets。這時(shí)文字下出現(xiàn)了藍(lán)色的波浪線，Alt+Enter后系統(tǒng)提示Rename to workSheets，我便直接回車確定了。然后，WorkSheets字段便再也無(wú)法保存，也不能從數(shù)據(jù)庫(kù)中讀取。在同事幫忙找了N久之后發(fā)現(xiàn)，原來(lái)是當(dāng)時(shí)大寫改小寫的過程中同時(shí)將dbml文件中的字段也改成了小寫導(dǎo)致了無(wú)法和數(shù)據(jù)庫(kù)匹配。

做這個(gè)功能的時(shí)候順便學(xué)到的一點(diǎn)知識(shí)：

如果一個(gè)input的id為apple，那么可以這么獲取，這是我本來(lái)就知道的：

var apple = $("#apple").val();

如果一個(gè)input的name為apple，那么可以這么獲取，這是我剛知道的：

var apple = $("input[name=apple]").val();

還有一個(gè)剛知道的，如果從很多input中去除某個(gè)name：

$("#fruit").find("input:not(input[name=apple]),textarea,select").attr("disabled", true);
//從id為fruit的父元素里面尋找所有的input、textarea和select控件以及其值，但是除去name為apple的控件

另外總結(jié)下ajax的方式，很久不用都快忘了：

$.ajax({
  type:"post",//可以選擇post或者method
  url:"",//url接口
  data:{
    //參數(shù)列表
  },
  success:function(data){
    //如果訪問url成功，data就是該url接口自動(dòng)返回的數(shù)據(jù)
  }
})

總結(jié)

以上所述是小編給大家介紹的Asp.Net MVC4通過id更新表單內(nèi)容的思路詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: