How to solve the matching problem of parameters submitted by mvc using ajax in asp.net

Source: Internet
Author: User

In asp.net mvc, if ajax is used to pass parameters to the server, if the parameter is a class or an array (or List set) and more complex objects, the server always fails to get the value. Of course, there are also many examples on the Internet, but they are all trying to solve the problem on the server (for example, converting json to a string, and deserialize it into an object on the server). Why can't we fix this problem on the client.

In fact, the problem is not that complicated because "[]" is always added after the name when jquery submits the Array data. The problem lies here. In addition, the server needs to parse arrays and embedded js objects in a format like this. For example, an array (or List set) needs to be in the server like this {'xxx [0] ': 'aaa', 'xxx [1] ': 'bbb'} format, and the embedded object needs to be like this {'xxx. a': 'ddd ', 'xxx. B ': 'hhh'}. Find the cause of the problem and solve it. If we can convert the json format to a format that can be recognized by the server, can we solve the problem.

Simply do what you want and directly add the code
Copy codeThe Code is as follows:
// Used to adapt MVC parameters to JavaScript closure Functions
/*
The usage is as follows:
$. Ajax ({
Url: "@ Url. Action (" AjaxTest ")",
Data: mvcParamMatch ("", sendData), // converts the json format here for submitting mvc parameters.
DataType: "json ",
Type: "post ",
Success: function (result ){
Alert (result. Message );
}
});
*/
Var mvcParamMatch = (function (){
Var MvcParameterAdaptive = {};
// Verify whether it is an array
MvcParameterAdaptive. isArray = Function. isArray | function (o ){
Return typeof o = "object "&&
Object. prototype. toString. call (o) = "[object Array]";
};
// Convert an array to an object
MvcParameterAdaptive. convertArrayToObject = function (/* array name */arrName,/* array to be converted */array,/* object stored after conversion, no input */saveOjb ){
Var obj = saveOjb || {};
Function func (name, arr ){
For (var I in arr ){
If (! MvcParameterAdaptive. isArray (arr [I]) & typeof arr [I] = "object "){
For (var j in arr [I]) {
If (MvcParameterAdaptive. isArray (arr [I] [j]) {
Func (name + "[" + I + "]." + j, arr [I] [j]);
} Else if (typeof arr [I] [j] = "object "){
MvcParameterAdaptive. convertObject (name + "[" + I + "]." + j + ".", arr [I] [j], obj );
} Else {
Obj [name + "[" + I + "]." + j] = arr [I] [j];
}
}
} Else {
Obj [name + "[" + I + "]"] = arr [I];
}
}
}
Func (arrName, array );
Return obj;
};
// Conversion object
MvcParameterAdaptive. convertObject = function (/* object name */objName,/* object to be converted */turnObj,/* object stored after conversion, no input */saveOjb ){
Var obj = saveOjb || {};
Function func (name, tobj ){
For (var I in tobj ){
If (MvcParameterAdaptive. isArray (tobj [I]) {
MvcParameterAdaptive. convertArrayToObject (I, tobj [I], obj );
} Else if (typeof tobj [I] = "object "){
Func (name + I + ".", tobj [I]);
} Else {
Obj [name + I] = tobj [I];
}
}
}
Func (objName, turnObj );
Return obj;
};
Return function (json, arrName ){
ArrName = arrName | "";
If (typeof json! = "Object") throw new Error ("Please input a json object ");
If (MvcParameterAdaptive. isArray (json )&&! ArrName) throw new Error ("Please specify the array name, corresponding to the array parameter name in Action! ");
If (MvcParameterAdaptive. isArray (json )){
Return MvcParameterAdaptive. convertArrayToObject (arrName, json );
}
Return MvcParameterAdaptive. convertObject ("", json );
};
})();

The usage is very simple. See the following example:
First, the client code
Copy codeThe Code is as follows:
Var sendData = {
"Comment": "qqq ",
"Ajax1": {"Name": "sq", "Age": 55, "Ajax3S": {"Ajax3Num": 234 }},
"Ajax2S": [{"Note": "aaa", "Num": 12, "Ajax1S": [{"Name": "sq1", "Age": 22, "Ajax3S": {"Ajax3Num": 456 }}, {"Name": "sq2", "Age": 33, "Ajax3S": {"Ajax3Num ": 789}]},
{"Note": "bbb", "Num": 34, "Ajax1S": [{"Name": "sq3", "Age": 44, "Ajax3S ": {"Ajax3Num": 654 }}, {"Name": "sq4", "Age": 987}]
};


$. Ajax ({
Url: "@ Url. Action (" AjaxTest ")",
/*
Use the closure function to convert a json object. If your json object itself is an Array,
You need to specify a name, which corresponds to the name of the array parameter in Action.
Data: mvcParamMatch (sendData, "parameter name in Action ")
*/
Data: mvcParamMatch (sendData ),
DataType: "json ",
Type: "post ",
Success: function (result ){
Alert (result. Message );
},
Error: function (a, B, c ){
}
});

Then there is the entity class of the json client corresponding to the server.
Copy codeThe Code is as follows:
Public class AjaxParamModels
{
Public string Comment {set; get ;}
Public Ajax1 Ajax1 {set; get ;}
Public List <Ajax2> Ajax2S {set; get ;}
}
Public class Ajax1
{
Public string Name {set; get ;}
Public int Age {set; get ;}
Public Ajax3 Ajax3S {set; get ;}
}
Public class Ajax2
{
Public string Note {set; get ;}
Public int Num {set; get ;}
Public List <Ajax1> Ajax1S {set; get ;}
}
Public class Ajax3
{
Public int Ajax3Num {set; get ;}
}

Then the action code in the controller
Copy codeThe Code is as follows:
Public class TestController: Controller
{
//
// GET:/Test/
Public ActionResult Index ()
{
Return View ();
}
Public ActionResult AjaxTest (Models. AjaxParamModels model)
{
// You can access the model here
Return Json (new {Message = "qqqqq "});
}
}

This is OK. No matter how complicated your json object is, it will be automatically converted to the format required by the server, and the server will no longer have to worry about it.

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.