Asp. Net MVC4 Detailed explanation of the idea of updating form content through id

The user requirement is that once a form is created, most of its fields can no longer be edited. Only some of these fields can be edited.

Non-editable is realized by setting disabled attribute to input input box, so an error will be reported directly to the contents of submit form in the database, because some fields that cannot be null cannot be obtained at the front end and then updated to the database due to disabled attribute.

There are two ideas:

1. Create one hidden control for every disabled control by creating a hidden form, but this problem is too much work (if the form has 1,000 properties, you know)

2. Pass the id and editable fields to the background by getting the id of the form in the database. First, the object and its attribute data are searched from the database through id, and then editable fields are assigned to the object. After processing, update the data of the object to the database.

To sum up, it is wiser to use the second way of thinking.

Here are the specific steps: (I don't need to look closely at the specific steps, which I took out from the project and is only suitable for my own review)

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

routes.MapRoute(
  "OutSourcingWorkSheet",// Route name 
  "outsourcing/saveWorkSheet",//url Path 
  new {controller = "Outsourcing", action = "SaveWorkSheet"}// Mapped controller and the corresponding Action Method name 
); 

2.

/// <summary>
///  Save working ticket 
/// ModelBinder The front end will be passed over id Searches for fields in the database and converts them to outsourcing Object 
///  At this time outsourcing Object in the workSheets Property is not a value passed from the front end, but a value in the database 
/// 
///  There are two parameters in the method, outsourcing As explained above, workSheets It is the first passed from the front end 2 Parameters 
/// </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 For internal projects 

3. Front-end js script code

$('#btn_saveWorkSheet').on('click', function () {
  if ($("input[name=workSheets]").val() == "") {
    bootbox.alert(" Cannot be empty ");
  } 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(" Modified successfully and will be refreshed soon ");
          setTimeout(function () {
            location.reload();
          }, 1000);
        } else {
          bootbox.alert(" Submission failed. Please try again later ");
        }
      }
    });
  }
});

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

In the parameter list of the code in paragraph 2, I started writing string workSheets as WorkSheets. At this time, a blue wavy line appears under the text. After Alt+Enter, the system prompts Rename to workSheets, and I will directly enter the car to confirm. Then, the WorkSheets field can no longer be saved or read from the database. After my colleagues helped me find N for a long time, I found that the fields in dbml file were changed to lowercase during the process of changing uppercase to lowercase, which led to the inability to match the database.

One thing I learned by the way when doing this function:

If the id of an input is apple, it can be obtained as follows, which is what I already know:

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

If an name of an input is an apple, it can be obtained as follows, which is what I just learned:

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

One more thing I just know, if you remove an name from many input:

$("#fruit").find("input:not(input[name=apple]),textarea,select").attr("disabled", true);
// From id For fruit Find all the parent elements in the parent element of input , textarea And select Control and its value, but remove the name For apple Control of  

In addition, summing up the way of ajax, I almost forgot when I didn't use it for a long time:

$.ajax({
  type:"post",// You can choose post Or method
  url:"",//url Interface 
  data:{
    // Parameter list 
  },
  success:function(data){
    // If access url Success, data Is the right thing to do url Data automatically returned by the interface 
  }
})

Summarize