Share an example analysis of how Asp.Net MVC4 implements updating form content through id

Once a form is created, most of its fields cannot be edited. Only some of these fields can be edited. This article will share with you a detailed explanation of the idea of ​​updating form content through id in Asp.Net MVC4. Friends who need it can refer to it

The user demand is: once a form is created, most of the fields cannot be edited. . Only some of these fields can be edited.

The non-editability is achieved by setting the disabled attribute on the input input box. Then at this time, an error will be reported directly to the content in the submit form in the database, because some fields that cannot be null cannot be used at all due to the disabled attribute. The frontend is fetched and then updated to the database.

There are two ideas:

1. By creating a hidden form, create a hidden control for each disabled control, but this way The problem is that the workload is too large (if the form has a thousand attributes, you will understand)

2. By getting the id of the form in the database, pass the id and editable fields to the background. First, the object and its attribute data are searched from the database by id, and then the editable fields are assigned to the object. After processing is completed, the object's data is updated to the database.

To sum up, using the second way of thinking can appear wiser.

The following are the specific steps: (You don’t need to read the specific steps in detail, they are extracted from the project and are only suitable for my own review)

1. In OutsourcingModule.cs Create a route in to create an access path:

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. Front-end js script code

$('#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("提交失败，请稍后再试");
        }
      }
    });
  }
});

In fact, the idea is very simple, but I worked on it for most of the day - -; I also encountered a big pit:

In the parameter list of the second code, I initially wrote the string workSheets as WorkSheets. At this time, a blue wavy line appeared under the text. After Alt+Enter, the system prompted Rename to workSheets, so I just pressed Enter to confirm. Then the WorkSheets field can no longer be saved or read from the database. After a long search with the help of a colleague, I discovered that it turned out that during the process of changing uppercase to lowercase, the fields in the dbml file were also changed to lowercase, which resulted in the inability to match the database.

Some knowledge I learned while doing this function:

If the id of an input is apple, it can be obtained like this. This is what I already knew:

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

If the name of an input is apple, then it can be obtained like this. This is what I just learned:

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

There is another one I just learned that if you remove a certain name from many inputs:

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

In addition, I will summarize the ajax method. I have almost forgotten it after not using it for a long time:

$.ajax({
  type:"post",//可以选择post或者method
  url:"",//url接口
  data:{
    //参数列表
  },
  success:function(data){
    //如果访问url成功，data就是该url接口自动返回的数据
  }
})

Summary

The above is the detailed content of Share an example analysis of how Asp.Net MVC4 implements updating form content through id. For more information, please follow other related articles on the PHP Chinese website!