首頁 > 後端開發 > C#.Net教程 > 分享Asp.Net MVC4如何實現透過id更新表單內容的實例分析

分享Asp.Net MVC4如何實現透過id更新表單內容的實例分析

黄舟
發布: 2017-07-18 10:36:37
原創
1328 人瀏覽過

一個表單一旦建立完,其中大部分的欄位就不可再編輯。只能編輯其中部分欄位。以下透過本文給大家分享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腳本代碼



$(&#39;#btn_saveWorkSheet&#39;).on(&#39;click&#39;, 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接口自动返回的数据
  }
})
登入後複製

總結#

以上是分享Asp.Net MVC4如何實現透過id更新表單內容的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板