使用AJAX加载局部视图后按钮不起作用

时间:2014-03-21 14:36:36

标签: html ajax asp.net-mvc asp.net-mvc-4 partial-views

我的页面有两个按钮Next和Previos。此按钮可在PartialView中加载表格。 我的问题是,当我第二次按下按钮时,它不起作用。

这是代码

观点:

<div id="Centros">
                <div class="divPantalla2">
                    <table cellspacing="0" class="table table-hover table-responsive table-bordered">
                        <tr>
                            <th class="thTablas">
                                Nombre
                            </th>
                            <th class="thTablas">
                                Nro- Establecimiento
                            </th>
                            <th class="thTablas">
                                Departamento
                            </th>
                            <th class="thTablas">
                                Localidad
                            </th>
                            <th class="thTablas">
                            </th>
                        </tr>
                        @if (ViewBag.OnePageOfCEProyecto != null)
                        {



                            foreach (ANEP.Models.CentroEducativoModel item in ViewBag.OnePageOfCEProyecto)
                            {

                            <tr>
                                <td>
                                    @item.Nombre
                                </td>
                                <td>
                                    @item.NroEstablecimiento
                                </td>
                                <td>
                                    @if (item.dDepartamento != null)
                                    {
                                        @item.dDepartamento.Descripcion;
                                    }
                                </td>
                                <td>
                                    @if (item.dLocalidad != null)
                                    {
                                        @item.dLocalidad.NomLocalidad;
                                    }
                                </td>
                                <td>
                                    <button  type="submit" value="Eliminar+@item.CEID"  name="Command" class="btn_eliminar">
                                    </button>
                                </td>
                            </tr>         
                            }

                        }
                    </table>
                </div>
                <div id="botones">
                    @if (ViewBag.OnePageOfCEProyecto != null)
                    {
                        <div align="center">
                            <div align="center">
                                @if (Session["PROYECTO_PAGINA_ACTUAL"] != null && int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString()) > 1)
                                {

                                    <button type="button" id="Primera" value="Primera1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8"><<</font></button>

                                    <button type="button" id="Anterior" value="Anterior1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8"><</font></button>
                                }
                                <font color="#0C58A8">@int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString())</font>
                                @if (ViewBag.OnePageOfCEProyecto.Count == 8)
                                {

                                    <button type="button" id="Siguiente" value="Siguiente1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8">></font></button>

                                    <button type="button" id="Ultima" value="Ultima1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8">>></font></button>
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>

PartialView:

                <div class="divPantalla2">
                    <table cellspacing="0" class="table table-hover table-responsive     table-bordered">
                        <tr>
                            <th class="thTablas">
                                Nombre
                            </th>
                            <th class="thTablas">
                                Nro- Establecimiento
                            </th>
                            <th class="thTablas">
                                Departamento
                            </th>
                            <th class="thTablas">
                                Localidad
                            </th>
                            <th class="thTablas">
                            </th>
                        </tr>
                        @if (ViewBag.OnePageOfCEProyecto != null)
                        {



                            foreach (ANEP.Models.CentroEducativoModel item in ViewBag.OnePageOfCEProyecto)
                            {

                            <tr>
                                <td>
                                    @item.Nombre
                                </td>
                                <td>
                                    @item.NroEstablecimiento
                                </td>
                                <td>
                                    @if (item.dDepartamento != null)
                                    {
                                        @item.dDepartamento.Descripcion;
                                    }
                                </td>
                                <td>
                                    @if (item.dLocalidad != null)
                                    {
                                        @item.dLocalidad.NomLocalidad;
                                    }
                                </td>
                                <td>
                                    <button  type="submit" value="Eliminar+@item.CEID"  name="Command" class="btn_eliminar">
                                    </button>
                                </td>
                            </tr>         
                            }

                        }
                    </table>
                </div>
                <div id="botones">
                    @if (ViewBag.OnePageOfCEProyecto != null)
                    {
                        <div align="center">
                            <div align="center">
                                @if (Session["PROYECTO_PAGINA_ACTUAL"] != null && int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString()) > 1)
                                {

                                    <button type="button" id="Primera" value="Primera1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8"><<</font></button>

                                    <button type="button" id="Anterior" value="Anterior1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8"><</font></button>
                                }
                                <font color="#0C58A8">@int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString())</font>
                                @if (ViewBag.OnePageOfCEProyecto.Count == 8)
                                {

                                    <button type="button" id="Siguiente" value="Siguiente1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8">></font></button>

                                    <button type="button" id="Ultima" value="Ultima1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8">>></font></button>
                                }
                            </div>
                        </div>
                    }
                </div>

AJAX功能(仅适用于下一个按钮):

$(document).ready(function () {
        $("#Siguiente").on("click", function () {
            var accion = $('#Siguiente').val();
            $.ajax({
                url: "/Proyecto/TablaCentros",
                type: "GET",
                cache: false,
                data: { command: accion }
            })
        .done(function (partialViewResult) {
            $("#Centros").html(partialViewResult);
        });
        });
    });

控制器:

public ActionResult TablaCentros(string command, Proyecto p)
    {
        if (command != null)
        {
            if (command.Contains("Siguiente1"))
            {
                if (Session["REGISTRO_PROYECTO"] != null)
            {
                Proyecto model = p;
                int page = (int)Session["PROYECTO_PAGINA_ACTUAL"];
                page++;
                Session["PROYECTO_PAGINA_ACTUAL"] = page;
                List<CentroEducativoModel> lista =   (List<CentroEducativoModel>)Session["PROYECTO_CENTRO_EDUCATIVOS"];
                var onePageOfCEProyecto = lista.ToPagedList(page, 8); // will only contain 15 products max because of the pageSize
                ViewBag.OnePageOfCEProyecto = onePageOfCEProyecto;
                cargarEstadoProyecto();
                cargarCentroEducativos();
                cargarClaseProyecto();
                cargarTipoProyecto();
                return PartialView("_TablaCentros", model);
            }
            }
        }
        return PartialView("_TablaCentros");
    }

抱歉我的英文,

感谢!!!

2 个答案:

答案 0 :(得分:0)

我希望你的回答会对你有所帮助。我在控制器的Action签名中注意到它应该接收两个参数commandProyecto但是在你的ajax函数中你只是传递command:accion所以你的Action没有收到对象Proyecto

答案 1 :(得分:0)

看起来您的按钮是部分视图的一部分。当您最初加载视图(没有ajax)时,您的按钮将绑定到您的单击处理程序,一切都很顺利。当您单击该按钮时,您的处理程序将触发,发出请求,然后使用响应替换#Centros内容 - 但是您的绑定按钮是替换内容的一部分,而您的“新”按钮不受约束。

在ajax请求完成并且您已加载结果后,您需要将处理程序重新绑定到按钮。您有几个选项 - 您可以将脚本移动到部分视图,以便在加载后触发,您可以在done()处理程序中调用绑定代码,或者可以将现有代码的选择器更改为{{ 3}}

我会使用与此类似的委托:

$("#Centros").on("click", "#Siguiente", function() { ... })

这实质上意味着,只要#Centros中的点击事件发生在ID为#Siguiente的元素上,就会处理该事件。