Share ASP. How to implement an instance analysis of updating form content by ID MVC4

Source: Internet
Author: User
Once a form is created, most of the fields are no longer editable. Only some of these fields can be edited. The following through this article to share the idea of ASP. NET MVC4 to update the form content through the ID, need to refer to the friend

User requirements are: Once a form is created, most of the fields are no longer editable. Only some of these fields can be edited.

While non-editable is achieved by setting the Disabled property on input box, the content in the submit form directly to the database will be an error, because some fields that cannot be null are updated to the database because the disabled attribute simply cannot be fetched at the front end.

There are two ways of thinking:

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

2. Pass the ID and the field that can be edited to the background by obtaining the form's ID in the database. First, the object and its property data are searched from the database by ID, and then the fields that can be edited are assigned to the object. After processing is complete, the data for the object is updated to the database.

In summary, the second way of thinking can be more intelligent.

Here are the specific steps: (The specific steps do not have to look at, this is what I pulled from the project, only 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 "}//the mapped controller and the corresponding action method name);

2.


<summary>///Save Work Ticket///Modelbinder the ID passed in the front end searches the database for fields and converts to outsourcing objects// The Worksheets property in the outsourcing object at this time is not the value passed by the front end, but the/////////method in the database has two parameters, outsourcing explained above, worksheets is the second parameter passed by the front// </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 = =) {          Bootbox.alert ("modified successfully, will be refreshed");          SetTimeout (function () {            location.reload ()          }, +),        } else {          Bootbox.alert ("Commit failed, please try again later");        }      }    });  }});

In fact, the idea is very simple, but I did most of the day--;

In the argument list for the second paragraph of the Code, I started by writing string worksheets as worksheets. Then the text appears under the blue wavy line, alt+enter after the system prompted rename to worksheets, I will directly enter to determine. The Worksheets field is then no longer saved and cannot be read from the database. After a colleague to help find n long after found that the original is the capitalization of the process in the lower case of the dbml file also changed to lowercase results in the database can not match.

A little bit of knowledge when doing this function:

If the ID of an input is Apple, then you can get it this way, as I would have known:


var Apple = $ ("#apple"). Val ();

If an input name is Apple, you can get it this way, as I just learned:


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

There is another one just known, if you remove a name from a lot of input:


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

In addition to summarize the way of Ajax, for a long time do not have to quickly forget:


$.ajax ({  type: "POST",//can select Post or method  URL: "",//url interface  data:{    //Parameter list  },  success: function (data) {    //If the access URL is successful, data is the one that the URL interface automatically returns  }})

Summarize

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.