ASP. Net mvc4’s idea of updating form content through ID

Time:2021-6-12

User requirements: once a form is created, most of its fields can no longer be edited. Only some of the fields can be edited.

Non editing is realized by setting the disabled attribute to the input box. At this time, an error will be reported to the content of the 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 because of the disabled attribute.

There are two ways of thinking:

1. By creating a hidden form, create a hidden control for each disabled control, but the problem is that the workload is too heavy (if the form has a thousand properties, you know)

2. By obtaining the ID of the form in the database, the ID and the fields that can be edited are passed to the background. Firstly, the object and its attribute data are searched out from the database by ID, and then the fields that can be edited are assigned to the object. After processing, the data of the object is updated to the database.

To sum up, the second way of thinking can be more intelligent.

Here are the specific operation steps: (I don’t need to look at the specific steps carefully. I extracted them from the project, which 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 corresponding action method name
);

2.

/// <summary>
///Save work order
///Modelbinder will search the field in the database with the ID passed by the front end and convert it into an outsourcing object
///At this time, the worksheets attribute in the outsourcing object is not the value passed by the front end, but the value in the database
/// 
///There are two parameters in the method. Outsourcing has been explained above, and worksheets is the second parameter passed from the front end
/// </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 is an internal project

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, about to refresh");
          setTimeout(function () {
            location.reload();
          }, 1000);
        } else {
          Bootbox.alert ("submit failed, please try again later");
        }
      }
    });
  }
});

In fact, the idea is very simple, but I have been doing it for most of the day; There is also a big pit:

In the parameter list of the second code, I wrote string worksheets as worksheets at the beginning. At this time, a blue wavy line appears under the text. After Alt + enter, the system prompts rename to worksheets, and I’ll enter directly to confirm. Then, the worksheets field can no longer be saved or read from the database. After colleagues helped to find n for a long time, they found that in the process of changing upper case to lower case at that time, they also changed the fields in the dbml file to lower case, which resulted in that they could not match the database.

What I learned by the way when doing this function:

If the ID of an input is apple, it can be obtained in this way. This is what I already know


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

If the name of an input is apple, it can be obtained in this way


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

Another thing I just learned is that if you remove a name from many inputs:

$("#fruit").find("input:not(input[name=apple]),textarea,select").attr("disabled", true);
//Find all input, textarea and select controls and their values from the parent element with ID fruit, but remove the control with name apple

In addition, I’ll summarize the ways of Ajax. I don’t need to forget it for a long time

$.ajax({
  Type: "post", // you can choose post or method
  URL: ', // url interface
  data:{
    //Parameter list
  },
  success:function(data){
    //If the URL is accessed successfully, data is the data automatically returned by the URL interface
  }
})

summary

The above is the detailed explanation of ASP. Net mvc4 update form content through ID introduced by Xiaobian. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply you in time. Thank you very much for your support to developer!