Asp. Net MVC4 updates the form by id, asp. netmvc4

Asp. Net MVC4 updates the form by id, asp. netmvc4

The user requirement is that after a form is created, most of the fields cannot be edited. Only some of the fields can be edited.

The uneditable mode is implemented by setting the disabled attribute on the input box. In this case, an error is reported directly to the content of the submit form in the database, because some fields cannot be null, the disabled attribute cannot be obtained at the front end and then updated to the database.

There are two ideas:

1. Create a hidden Control for each disabled control by creating a hidden form, but the problem is that the workload is too large (if the form has one thousand attributes, you know)

2. Obtain the id of the form in the database and 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, update the data of the object to the database.

 

In conclusion, the second approach can be more intelligent.

The following are the specific operation steps: (the specific steps do not need to be detailed. This is what I have drawn out from the project and is only suitable for me to 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"} // ing controller and corresponding Action method name );

 

2.

/// <Summary> /// Save the Work Ticket // ModelBinder searches the database for the id passed by the front end and converts it to the outsourcing object // The outsourcing object at this time the workSheets attribute in is not the value passed by the front end, instead, the ///// method in the database contains two parameters, which have been explained above in outsourcing, workSheets is the second parameter passed by the front end. /// </summary> /// <param name = "outsourcing"> </param> /// <param name = "workSheets "> </param> /// <returns> </returns> [HttpPost] [ActionName (" SaveWorkSheet ")] [AccessRestriction ("SaveWorkSheet")] public JsonResult SaveWorkSh Eet (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 blank");} 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, will be refreshed soon"); setTimeout (function () {location. reload ();}, 1000);} else {bootbox. alert ("failed to submit, please try again later ");}}});}});

 

In fact, the train of thought is very simple, but I did things for a long time---; I also encountered a big pitfall:

In the parameter list of the second code, I first wrote string workSheets as WorkSheets. At this time, there is a blue wavy line under the text. After Alt + Enter, the system prompts Rename to workSheets, And I will press Enter to confirm. Then, the WorkSheets field can no longer be saved or read from the database. After finding N for a long time, my colleague found that the field in the dbml file was also changed to lowercase during the case-filling process, resulting in no match with the database.

 

One thing I learned when doing this function:

If the input id is apple, you can get it as follows. I knew it:

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

If the name of an input is apple, you can obtain it as follows. This is what I just learned:

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

There is also a new one, if a name is removed from many inputs:

$ ("# Fruit "). find ("input: not (input [name = apple]), textarea, select "). attr ("disabled", true); // search for all input, textarea, and select controls and their values from the parent element whose id is fruit, except for controls whose name is apple

 

In addition, to summarize the ajax method, you don't have to forget it for a long time:

$. Ajax ({type: "post", // You can select post or method url: "", // url interface data: {// parameter list}, success: function (data) {// If the url is successfully accessed, data is the data automatically returned by the url interface }})