Introduction to asynchronous data submission of Ajax. beginform

 

 

HTML. beginform and Ajax. beginform is a form Element in the MVC Architecture. They can be seen literally, namely, HTML. beginform is a normal form submission, while Ajax. beginform supports asynchronous form submission, which is a good news for our developers. We don't have to use JQ code on our own and directly use MVC self-generated Ajax. beginform can easily complete an asynchronous form submission action.

Prototype explanation of HTML. beginform:

 

1 @ using (HTML. beginform () {} // submit to the current page 2 3 @ using (HTML. beginform (New {}) {} // submit to the current page and pass the parameter 4 5 @ using (HTML. beginform ("action", "controller") {} // submit to action under the specified controller 6 7 @ using (HTML. beginform ("action", "controller", forw.hod. post) {} // submit to the action under the specified controller, and specify the submission method 8 9 foreach hod enumeration as follows: 10 11 // Abstract: 12 // enumerate the HTTP request type of the form. 13 public Enum forcanchod14 {15 // Summary: 16 // specify the GET request. 17 get = 0, 18 // 19 // Summary: 20 // specify the POST request. 21 Post = 1,22}

 

 

Ajax. beginform asynchronous form prototype Interpretation

 

1 @ using (Ajax. beginform (2 new ajaxoptions 3 {4 updatetargetid = "userlogoncontainer", 5 httpmethod = "Post", 6 onsuccess = "", 7}) {}// submit to the current page, the submission method is post, and the asynchronous update module ID is userlogoncontainer 8 9 @ using (Ajax. beginform ("action", "controller", null, 10 new ajaxoptions11 {12 updatetargetid = "userlogoncontainer", 13 httpmethod = "Post", 14 onsuccess = "", 15 })) 16 {}// submit the action to the specified controller. The submission method is post, and the ID of the asynchronous update module is userlogoncontainer.

 

 

The following is an example of Ajax. beginform, a User Login Demo.

View code:

 

1 @ model tsingda. Ask. Models. userlogonmodel 2 @ {layout = "";} 3 <SCRIPT src = "@ URL. Content ("~ /Scripts/jquery. Validate. Min. js ")" type = "text/JavaScript"> </SCRIPT> 4 <SCRIPT src = "@ URL. Content ("~ /Scripts/jquery. Validate. unobtrusive. Min. js ")" type = "text/JavaScript"> </SCRIPT> 5 <SCRIPT src = "@ URL. Content ("~ /Scripts/jquery. unobtrusive-ajax.min.js ")" type = "text/JavaScript"> </SCRIPT> 6 <Div id = "userlogoncontainer"> 7 @ using (Ajax. beginform ("userlogon", "home", null, 8 new ajaxoptions 9 {10 updatetargetid = "userlogoncontainer", 11 httpmethod = "Post", 12 onsuccess = "", 13}) 14 {15 @ HTML. validationsummary (true) 16 <Div class = "editor-field"> 17 @ HTML. textboxfor (M => M. email) 18 @ HTML. validationmessagefor (M => M. email) 19 </div> 20 <Div class = "editor-field"> 21 @ HTML. textboxfor (M => M. password) 22 @ HTML. validationmessagefor (M => M. password) 23 </div> 24 <input type = "Submit" id = "logonbtn" value = "login"/> 25} 26 </div>

 

The Controller Layer Code is as follows:

 

1 /// <summary> 2 /// User Logon 3 /// </Summary> 4 /// <returns> </returns> 5 Public actionresult userlogon () 6 {7 return view (New userlogonmodel ("Mailbox", "password"); 8} 9 [httppost] 10 public actionresult userlogon (userlogonmodel entity) 11 {12 if (modelstate. isvalid) 13 {14 Vm = user_infomanager.userlogon (New user_info {email = entity. email, password = entity. password}); 15 if (VM. iscomplete) 16 {17 return redirecttoaction ("Index", "home"); 18} 19 else20 {21 VM. tolist (). foreach (I => modelstate. addmodelerror ("", I); 22} 23} 24 25 return view (); 26}

 

After the form is submitted, the page effect is as follows:

Note that the buttons in the form are also of the submit type in the asynchronous form. If it is an asynchronous form, the introduced JS file needs jquery. unobtrusive-ajax.min.js, which already exists in the scripts directory for this purpose.

 

 

 

 

 

 

 

Ajax. beginform can be used to submit forms asynchronously.

＠using （Ajax.BeginForm（"AjaxFormPost"， "Home"，
    new { ID="11"， ClassName="FirstClass"}，
    new AjaxOptions
    {
        HttpMethod = "POST"，
        OnBegin="OnBeginPost（）"，
        OnComplete="OnEndPost（）"，
        OnSuccess="OnSuccessPost"，
        InsertionMode = InsertionMode.Replace
    }））

Ajaxformpost is action, home is the controller, new {id = "11", classname = "firstclass"} is the route parameter, that is, the URL parameter.

Ajaxoptions

1. httpmethod.

2. Client JS operations before onbegin form submission.

3. After the onsuccess form is submitted, the client can return the operation

4. operations after oncomplete form is submitted

5. insertionmode

// Select:
// Enumerates the Ajax script ion modes.
Public Enum insertionmode
{
// Select:
// Replace the element.
Replace = 0,
//
// Select:
// Insert before the element.
Insertbefore = 1,
//
// Select:
// Insert after the element.
Insertafter = 2,
}

 

<Div id = "content">
<Table>
<Tr>
<TD>
@ Html. Label ("lblname", "name ")
</TD>
<TD>
@ Html. Textbox ("txtname ")
</TD>
</Tr>
<Tr>
<TD>
@ Html. Label ("lblage", "Spring and Autumn ")
</TD>
<TD>
@ Html. Textbox ("txtage ")
</TD>
</Tr>
</Table>
<Input type = "Submit" value = "Submit"/>
</Div>

This is a simple form control, a name, an age, and a submit button.

Next, let's take a look at the action in the home controller. Here we only perform the test, so we only perform the form data.

Public String ajaxformpost (string ID)
{
String classname = request. querystring ["classname"];
String name = request. Form ["txtname"];
String age = request. Form ["txtage"];
Return "name" + name + "Spring and Autumn" + age;
}

ID is the parameter of the routing mechanism. Txtname and txtage are obtained through the form process. The preceding format is set to post. Therefore, you must use the request. Form format to obtain the response value.

Then return a string. If you want to return this string on the client, you can

<SCRIPT type = "text/JavaScript"> function onsuccesspost (e) {alert (E + "submitted successfully! ") ;}</SCRIPT>

 

Of course, to call client JavaScript, you also need to reference a javascript library.

 

<SCRIPT src = "@ URL. Content ("~ /Scripts/jquery. unobtrusive-ajax.js ")" type = "text/JavaScript"> </SCRIPT>

In this way, the call test can be performed.