Shulou(Shulou.com)06/03 Report--

This article shows you how to solve the problem of matching parameters submitted by mvc using ajax in asp.net. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

If you use ajax to pass parameters to the server in the mvc of asp.net, if the parameter is a class or an array (or List collection) and more complex objects, the server will always fail to get the value. Of course, there are many examples of solutions on the Internet, but all of them are solved on the server side (such as converting json into a string and then deserializing it into an object on the server side) Why can't this problem be solved on the client side?

In fact, the problem is not that complicated, because when jquery submits Array data, it always adds "[]" to the name, and that's where the problem lies. In addition, when parsing arrays and embedded js objects on the server side, we need a format like this. For example, arrays (or List collections) need the format {'xxx [0]': 'aaa','xxx [1]:' bbb'} on the server side, while embedded objects need to be like this {'xxx.a':'ddd','xxx.b':'hhh'}, so we can find out the cause of the problem. If we can convert the json format into a format that can be recognized by the server, the problem will be easily solved.

Just do it and go straight to the code.

The code is as follows:

/ / used for MVC parameter adaptation JavaScript closure function

/ *

The mode of use is as follows:

$.ajax ({

Url: "@ Url.Action (" AjaxTest ")"

Data: mvcParamMatch ("", sendData), / / convert json format here for mvc parameter submission

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 arrays to objects

MvcParameterAdaptive.convertArrayToObject = function (/ * array name * / arrName, / * array to be converted * / array, / * objects stored after conversion, no need to enter * / 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

}

/ / convert object

MvcParameterAdaptive.convertObject = function (/ * object name * / objName,/* object to be converted * / turnObj, / * object stored after conversion, no need to enter * / saveOjb) {

Var obj = saveOjb | | {}

Function func (name, tobj) {

For (var i in tobj) {

If (MvcParameterAdaptive.isArray (roomj [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 pass in the 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 method is very easy to use, take a look at the following example:

The first is the client-side code.

The 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 transform the json object here, if your json object itself is an array Array

Then you need to specify a name that corresponds to the name of the array parameter in Action like this

Data:mvcParamMatch (sendData, "corresponding 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 server corresponding to the client json.

The code is as follows:

Public class AjaxParamModels

{

Public string Comment {set; get;}

Public Ajax1 Ajax1 {set; get;}

Public List 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 Ajax1S {set; get;}

}

Public class Ajax3

{

Public int Ajax3Num {set; get;}

}

And then the action code in controller.

The code is as follows:

Public class TestController: Controller

{

/ /

/ / GET: / Test/

Public ActionResult Index ()

{

Return View ()

}

Public ActionResult AjaxTest (Models.AjaxParamModels model)

{

/ / you can access model here

Return Json (new {Message = "qqqqq"})

}

}

In this way, OK, no matter how complex 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.

The above content is how to solve the matching problem of parameters submitted by mvc using ajax in asp.net. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.