Getting objects with JQuery and sending via Ajax to MVC C #

2

I'm trying to understand how to get HTML objects to an MVC C # controller. I know the code below works if the controller has string[] teste .

<input type="hidden" name="teste">
<input type="hidden" name="teste" value="testes">
<input type="hidden" name="teste" value="testes1">

But I have seen some codes, mainly for data grids, which creates generic filter, where field values, filter type and value, properties receive nomePropriedade_1 .

How do I handle this in JQuery, and how should I handle this in the MVC C # controller?

Examples:

link

link

link

    
asked by anonymous 25.08.2014 / 20:21

1 answer

3

Understanding ASP.NET MVC% With%

Basically what ModelBinder does is try to reconcile the names and values of the fields of a form (in the case of POST) or a request (in the case of GET). Consider your example first:

<input type="hidden" name="teste">
<input type="hidden" name="teste" value="testes">
<input type="hidden" name="teste" value="testes1">

In this case, if the form is sent to a% signed method% as follows:

public ActionResult MinhaAction(string[] teste) { ... }

ModelBinder would identify a variable of name Controller with 3 values: empty, ModelBinder and teste , and would correctly create a list for them as mentioned in question.

Logic extends to any list, with the difference that enough information is expressed on the form so that "testes" can match.

Suppose now that I want my method to receive a complex object now. Assume the following testes1 :

public class MeuViewModel {
    public String NomeProduto { get; set; }
    public String NomeComprador { get; set; }
    public int Quantidade { get; set; }
}

I can have a form like this:

<input type="hidden" name="meuViewModel.NomeProduto" value="Coca Cola">
<input type="hidden" name="meuViewModel.NomeComprador" value="Cigano">
<input type="hidden" name="meuViewModel.Quantidade" value="1">

Or simply:

<input type="hidden" name="NomeProduto" value="Coca Cola">
<input type="hidden" name="NomeComprador" value="Cigano">
<input type="hidden" name="Quantidade" value="1">

And a ModelBinder signed with the following argument:

public ActionResult MinhaSegundaAction(MeuViewModel meuViewModel) { ... }

ViewModel will fill in the information correctly.

Now, in the case of complex object lists, you need to index. This can be done in two ways:

Basically, I can do the following:

<input type="hidden" name="meuViewModel[0].NomeProduto" value="Coca Cola">
<input type="hidden" name="meuViewModel[0].NomeComprador" value="Cigano">
<input type="hidden" name="meuViewModel[0].Quantidade" value="1">

<input type="hidden" name="meuViewModel[1].NomeProduto" value="Guaraná">
<input type="hidden" name="meuViewModel[1].NomeComprador" value="Marlon">
<input type="hidden" name="meuViewModel[1].Quantidade" value="2">

<input type="hidden" name="meuViewModel[2].NomeProduto" value="Água Tônica">
<input type="hidden" name="meuViewModel[2].NomeComprador" value="Fulano">
<input type="hidden" name="meuViewModel[2].Quantidade" value="3">

ModelBinder is able to understand that this should become a list if the method is signed:

public ActionResult MaisUmaAction(List<MeuViewModel> meuViewModel) { ... }

But in the case of JSON?

Well, since MVC3, Guid is already able to receive JSON because the ModelBinder class, which feeds Action , is already registered by default. That is, I can send the same form via Ajax as follows:

$.ajax({
        url: '/MeuController/MaisUmaAction',
        type: 'POST',
        dataType: 'json',
        data: [
        {
            "NomeProduto": "Coca Cola",
            "NomeComprador": "Cigano",
            "Quantidade": 1
        },
        {
            "NomeProduto": "Coca Cola",
            "Nome": "Marlon",
            "Quantidade": 2
        },
        {
            "NomeProduto": "Água Mineral",
            "Nome": "Fulano",
            "Quantidade": 3
        }
        ],
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            var message = data.Message;
            $("#flash").html("Sucesso! " + message);
        }
});
    
25.08.2014 / 21:15