How to use Html.BeginForm with JavaScript / Ajax

Question

How to use Html.BeginForm with JavaScript / Ajax

Navigation

#1 by (2 votes)

3

I have a View to generate Report on my system and I'm using a BeginForm. The idea is when I submit the submit to my GridReport which is another View, load inside one that I have inside the ViewReport. I want to do it with Ajax, but I can not.

ViewReport

 @using (Html.BeginForm("Relatorio", "Apontamento", FormMethod.Post, new { @class = "form-horizontal", role = "form"}))
                    { 
                    <div class="form-group">
                        @Html.Label("Período")
                        <div>
                            <input class="datefield"
                                   id="DataInicio" name="DataInicio" type="date" value="1/11/1989" />
                            @Html.ValidationMessageFor(m => m.DataInicio, "", new { @class = "text-danger" })
                            <input class="datefield"
                                   id="Datatermino" name="DataTermino" type="date" value="1/11/1989" />
                            @Html.ValidationMessageFor(m => m.DataTermino, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group input-group">
                        <input class="form-control" type="text" placeholder="Nome Usuário" />
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                    }


<div id="BuscarRelatorio"></div>

javascript c# ajax asp.net-mvc-5

asked by anonymous 22.07.2015 / 13:56

1 answer

Error making multiple insert How to put a string at the end of all URLs via PHP (CodeIgniter)

score 2 · Accepted Answer

To accomplish this use the submit() event of Jquery.

$('#IdParaOSeuForm').submit(function(e){
    e.preventDefault(); //evita o evento default do submit

    $.post(
        '@Url.Action("Relatorio", "Apontamento")',
        data: $(this).serialize(),   
        success: function(data){
           $('#BuscarRelatorio').html(data);
        }
    );          
});

The line $(this).serialize() returns a concatenated string of the names of its inputs and their values.

In your Action, return a PartialView or View

Doc submit jquery: link