Use the Jquery library for Action calling in ASP. NET MVC2.0

 

The common pattern of MVC is that the Action in the Controller corresponds to a View page, and most examples provided on the Internet are such scenarios. The Action is either List, Create, Edit, each page corresponds to an ActionResult returned from the Action, and the jump between pages is refreshed, I only know that the js library is needed in the script folder, but I don't know how to use it. However, I thought that these js libraries should be able to be called in the Controller without refreshing. So I started with this idea.

For example, a common Action (written in HomeController)

Public JsonResult GetJson () {return Json (new {Message1 = "It is worked", Message2 = "...... Again! "});}

 

Returns a Json object.

Page code:

 

ByJQuery: <br/>

 

Region1: <span id = "region1"> </span>

 

Region2: <span id = "region2"> </span>

 

<Input type = "button" onclick = "DoSomething ()" value = "OK"/> </p>

 

<Script type = "text/javascript">

 

Function DoSomething ()

 

{$. GetJSON ("Home/GetJson", null, function (data)

 

{$ ("# Region1"). text (data. Message1 );

 

$ ("# Region2"). text (data. Message2 );})}

 

</Script>

 

Put two span labels on the page to display the results. One button is used to trigger the ajax event and the getJSON method of jquery is used. The first parameter is used to specify the request address, which is the Action address here, the second parameter is an optional parameter (the Key/value parameter to be sent), and the third parameter is the callback function when loading is successful, here we need to display it on two spans (for details about the getJSON function, refer to the jquery api). Well, a simple example of calling Action using jquery will be completed.

 

Of course, a simple problem cannot be solved, because after all, the preceding action does not have a parameter. In many cases, the Action we write has a parameter. At this time, we need to retrieve the parameter from the page, send it to Action for processing:

Public ActionResult JqueryDemo (string content)

 

{

 

// Perform a series of operations on the incoming content

 

Data. Add (content); // Add the input parameter to the data of the List <string> type.

 

Return Json (data );

 

}

 

Page code segment:

ByJqueryDemo: <br/>

 

<Input type = "text" id = "input1"/>

 

<Input type = "button" value = "ByJquery" onclick = "GetByJquery ()"/>

 

<Div id = "JqueryResult"> </div>

 

<Script type = "text/javascript">

 

Function GetByJquery ()

 

{$. Ajax ({

 

Type: "POST ",

 

Url: "/Home/JqueryDemo ",

 

Data: "content =" + $ ("# input1"). val (),

 

Success: function (msg) {$ ("# JqueryResult"). text (msg );}});

 

}

 

</Script>

 

Among them, ajax functions have many options, and all options are optional. When passing parameters, we need to fill in the data option to pass the parameter over. If there are multiple parameters, add &

In this way, the parameters can be smoothly transmitted to the Action. For other usage of ajax functions, refer to the jquery api, because I am also a beginner, so I should first write it here.

From: column zhongshuling2009