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?

Related posts

Recent Viewed