Ajax.BeginForm不发送和AjaxRequest

Question

I want to use the Ajax.BeginForm to update a table without reload the full page, when i submit the form the request is not an ajax one , or in the controller method when i ask if the request is ajax it never enter inside the if sentence. So i have this in my files:

On the Partial View

@model IEnumerable<Fighting.DTO.N_pais.OutN_pais>

<table class="table table-advance" id="table_paises">
    <thead>
        <tr>
            <th style="width: 18px">
                <input type="checkbox" /></th>
            <th>Nombre</th>
            <th>Editar</th>
            <th>Eliminar</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr class="table-flag-blue">
                <td>
                    <input type="checkbox" value="@item.ID_PAIS" /></td>
                <td>@item.NOMBRE</td>
                <td><a class="btn btn-circle" data-toggle="modal" href="#modal-2" onclick="Edit(@item.ID_PAIS)"><i class="fa fa-edit"></i></a></td>
                <td><a class="btn btn-circle" data-toggle="modal" href="#modal-3" onclick="Delete(@item.ID_PAIS, @item.NOMBRE)"><i class="fa fa-trash-o"></i></a></td>
            </tr>
        }
    </tbody>
</table>

In the view

<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-content">
                <div class="btn-toolbar pull-right clearfix">
                    <div class="btn-group">
                        <a class="btn btn-circle show-tooltip" title="Adicionar Pa&iacute;s" href="#modal-1" data-toggle="modal"><i class="fa fa-plus"></i></a>
                        <a class="btn btn-circle show-tooltip" title="Edit selected" href="#modal-2" data-toggle="modal"><i class="fa fa-edit"></i></a>
                        <a class="btn btn-circle show-tooltip" title="Delete selected" href="#modal-3" data-toggle="modal"><i class="fa fa-trash-o"></i></a>
                    </div>
                    <div id="form-reload" class="btn-group">
                        @using (Ajax.BeginForm("Obtener", "NPais", new AjaxOptions
                        {
                            HttpMethod = "get",
                            InsertionMode = InsertionMode.Replace,
                            UpdateTargetId = "table_paises"
                        }))
                        {
                            <button class="btn btn-circle show-tooltip" title="Recargar" type="submit"><i class="fa fa-repeat"></i></button>                            
                        }
                    </div>
                </div>
                <br />
                <br />
                <div class="clearfix"></div>
                <div class="table-responsive" style="border: 0">
                    @Html.Partial("_TablePais", Model)
                </div>
            </div>
        </div>
    </div>
</div>

On the Controller

public object Obtener()
    {
        var pais = _n_pais.GetAll().ProjectedAsCollection<OutN_pais>().ToList();

        var paises = from r in pais select r;

        return paises;
    }

    public override ActionResult Obtener(InUi input)
    {
        if (Request.IsAjaxRequest())
        {
            return PartialView("_TablePais", Obtener());
        }

        return View(Obtener());
    }

The javascripts

@Scripts.Render("~/Content/Flaty/assets/jquery/jquery-2.0.3.min.js")
@Scripts.Render("~/Content/Flaty/assets/bootstrap/js/bootstrap.min.js")
@Scripts.Render("~/Content/Flaty/assets/jquery-slimscroll/jquery.slimscroll.min.js")
@Scripts.Render("~/Content/Flaty/assets/jquery-cookie/jquery.cookie.js")
@Scripts.Render("~/Content/Flaty/assets/jquery-unobtrusive-ajax/jquery.unobtrusive-ajax.js")

What am I missing?

Answer 1

You'll get this behavior if the unobtrusive ajax script runs into an error while executing and bails, leaving the browser to handle the submit itself. In my experience, this most often happens when there is a name mismatch. Perhaps your partial view is not returning an object whose ID is "table_paises", and the script is therefore unable to find a target object?

Either way, debugging your code in the browser (F12) should surface your error.

Answer 2

In my case I was forgetting to load the jquery.unobtrusive-ajax.min.js file.

I solved it by adding the following line of code

@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")