Home > Developer > Web Develop
Calling the action method with ASP. NET MVC is straightforward.
One, no parameter method.
1, first, the introduction of Jquery-1.5.1.min.js script, according to the version of different people choose their own.
<script src= "@Url. Content (" ~/scripts/jquery-1.5.1.min.js ")" Type= "Text/javascript" ></script>
2. Write the action that the foreground Ajax needs to invoke in controllers, such as:
Public ActionResult test1 () {return Content ("returns a string"); }This action returns a string. Notice the return here, not the return View ();
3. We go back to the foreground, assuming my function is to invoke the background action and return 1 strings when the page has 1 buttons clicked.
<input type= "text" id= "txt1" name= "txt1"/><input type= "button" id= "btnsub" name= "Btnsub" value= " Call the action "/>
As above, I put 1 text boxes and a button in my interface. Let's do that. When a button is clicked, the background method is called to return a character and assign a value to the text box.
<script type= "Text/javascript" language= "JavaScript" > $ (document). Ready (function () { $ ("#btnSub"). Click (function () { $.ajax ({ type: "POST", URL: "/home/test1", Data: "", success:function ( Sesponsetest) { $ ("#txt1"). Val (sesponsetest);}}); } ); </script>Very simple, the following are about the various properties and methods used.
$ (document). Ready (function () {}; -------similar to what we originally wrote <body onload= "Loat ();" > Page Loading method. However, there are also differences, please refer to the official note for details.
$ ("#btnSub"). Click (function () {}; -------the button's Click event. This is modified in accordance with the respective needs. For example ($ ("#btnSub"). focus (function () {} ...) And so on
$.ajax ({}); -------Ajax methods.
Type:-------types, here is "POST" and "GET" type.
URL: Action writing format for-------call/controller/action
Data:-------parameter, because there is no, so we are ""
Success:function (sesponsetest) {}-------callback function, which is the method that executes when my action is finished. Sesponsetest the content returned by the action.
$ ("#txt1"). Val (sesponsetest); -------assigns the returned string to the text box.
4. Here's what we'll achieve: When we click the button, we call the 1 action in the background via Ajax and return a string to the text box to assign value.
Two, with the parameter method.
Our actual project may often encounter situations in which the interface needs to pass 1 or more parameters to the action and eventually return the result to the interface. Then let's take a look at the calling method with parameters.
1, on the basis of the original action we make a slight change.
Public ActionResult test1 (string id) {return Content (ID + "returns a string"); }This action requires a parameter ID, and finally returns a character draw.
2, the interface we add 1 more text boxes.
<input type= "text" id= "txt1" name= "txt1"/><br/><input type= "text" id= "txt2" name= "Txt2"/><br/ ><input type= "button" id= "btnsub" name= "Btnsub" value= "Invoke action"/>
Here are 2 text boxes, I will implement: When the button is clicked, the contents of text box 1 are passed to the action for processing, and finally the returned results are displayed in the text box 2.
<script type= "Text/javascript" language= "JavaScript" > $ (document). Ready (function () { $ ("#btnSub"). Click (function () { var tvalue=$ ("#txt1"). Val (); $.ajax ({ type: "POST", URL: "/home/test1", data: "id=" + TValue, success:function (sesponsetest) { $ ("#txt2"). Val (sesponsetest); } ) ; }); </script>Careful people may find that, and the above is no parameter is a bit more changes.
Here's data: "Id=" ... 1 parameters are taken. ID is the name ID of the parameter of my action. Then pass the value of the text box 1 as an argument to the action.
Multiple parameters, each parameter of data should be separated with &&, such as (data: "Id=12345&&str=test",) ...
Note that the parameter name here is the same as the parameter name of the action.
4, we look at the final effect. We enter the content in the text box 1 and then click the button to assign a value to the text box 2.
ASP. NET MVC uses AJAX to call the action return data "go"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
