How to use Html.Beginform with Javascript/Ajax

Question

I have a View to generate Report on my system and I am using a Beginform. The idea is when I give the Ubmit to my Gridrelatorium, which is another View, press inside one that I have inside in the Viewrelatorium. I want to do it with Ajax, but I’m not getting it.

Viewrelatorio

 @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>

Answer 1

To achieve this use the event submit() 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: https://api.jquery.com/submit/