Send form parameter to controller via ajax

Asked

Viewed 589 times

0

I have an Index with a form, I need to fill this form and when clicking the Filter button, call the controller using ajax.

Index.cshtml

 @using (Html.BeginForm("ResultadoPesquisa", "RelatorioDesempenhoData", FormMethod.Post))
 {
     @Html.DisplayName("Item de Contrato")
     @Html.DropDownList("ItemContratoId", String.Empty)
     @Html.DisplayName("Mes")
     @Html.DropDownList("MesId", String.Empty)
     @Html.DisplayName("Ano")
     @Html.DropDownList("AnoId", String.Empty)
     @Html.DisplayName("Ativo")
     @Html.DropDownList("Ativo", new SelectList(new List<string> { "Ativo", "Inativo" }, String.Empty), String.Empty)

     <input type="submit" value="Filtrar" onclick="exibeBarChart(ItemContratoId, IndicadorId, MesId, AnoId, Ativo)"/>
 }

Controller.Cs

public string ResultadoPesquisa(int? ItemContratoId, int? IndicadorId, int? MesId, int? AnoId, string Ativo, string Limpar)
{
    var avaliacaoDesempenho = ad.BuscaFiltrada(ItemContratoId, IndicadorId, MesId, AnoId, Ativo).ToList());

    //...

    var json = JsonConvert.SerializeObject(obj);

    return json;
}

Javascript.js

var json;
function exibeBarChart(ItemContratoId, IndicadorId, MesId, AnoId, Ativo) {

    $.ajax({
        url: '/RelatorioDesempenhoData/ResultadoPesquisa',
        type: 'POST',
        data: { ItemContratoId: ItemContratoId, IndicadorId: IndicadorId, MesId: MesId, AnoId: AnoId, Ativo: Ativo },

        success: function (data) {
            json = data;
            var dado = JSON.parse(json);
            //...
        },
        error: function (data) {
            json = "error";
        }
    });
}

It turns out that the controller is being called, but not by Ajax. And at the end of running the controller, I am redirected to a json page

Any suggestions or possible solution?

Grateful

1 answer

1


Hello, start by changing the type of input that triggers the event, try this:

First create the following javascript function:

function onClickBotaoFiltrar() {
   var ItemContratoId = $("select[id$='ItemContratoId'] option:selected").val();
   // não encontrei um correspondente do indicador id então vou simplesmente informar 0
   var IndicadorId = 0;
   var MesId = $("select[id$='MesId '] option:selected").val();
   var AnoId = $("select[id$='AnoId'] option:selected").val();
   var Ativo = $("select[id$='Ativo'] option:selected").val();

   exibeBarChart(ItemContratoId, IndicadorId, MesId, AnoId, Ativo)
}

After that change the button to

<input type="button" value="Filtrar" onclick="onClickBotaoFiltrar()"/>

I hope this can help you.

  • Thanks for the quick reply Edney, however I had already made the replacement of Submit to button. And when I do, even the controller is not called.

  • What error presented in the browser console when you use the tag as button?

  • For some reason he is saying that Indicadorid is not defined: Uncaught Referenceerror: Indicadorid is not defined at Htmlinputelement.onclick

  • @Evandrosilva I understand, the problem in this case is that you are passing variables that were not created, I will edit the post to make the correction more efficient.

  • @Evandrosilva mes Id will not provide a value, replace with $("select[id$='Mesid'] option:Selected"). val();, 'cause there’s room left on the dial.

  • I made the correction for Mesid, it was really what I needed, thank you very much for the help. It worked perfectly!

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.