具有局部视图的ajax表单,其中动态生成的列表在另一个局部视图上更新值

时间:2015-02-12 22:50:10

标签: jquery ajax asp.net-mvc model-view-controller ajax.beginform

我对MVC和Razor很新(是的,对我很羞耻), 我有一个包含2个局部视图和1个ajax形式的页面,其中一个局部视图带有动态生成的列表,更新值(并且失败)到另一个局部视图,设计它显示列表的第一条消息。

问题是我按下列表中某个项目上的按钮(" Ver" in" _ListaMensajes"),而不是在底部显示消息的详细信息页面(_detalleMensaje),它什么都不做(控制器没有调用,或任何东西)

我遵循了几个教程和工作项目来做到这一点,这让我感到困惑,如果这段代码有意义,我也不会知道,请稍微帮助。

由于

PD:我正在使用MVC 5.1(根据nuget控制台) 和引用:jquery.unobtrusive-ajax.min.js

控制器:

 public ActionResult DetalleMensaje(int Id_Mensaje) {
        V_Sedd_Mensaje oV_Sedd_Mensaje = oI_V_Sedd_Mensaje.Recuperar_V_Sedd_Mensaje_PorCodigo(Id_Mensaje);
        return PartialView("_DetalleMensaje", oV_Sedd_Mensaje);
    }

页:

<div class="col-md-10">
    <fieldset class="dhhBorder">
        <legend class="dhhBorder">Lista de Envíos</legend>
        <div class="form-group">
            <div class="row">
                <div class="col-lg-1">Evento</div>
                <div class="col-lg-2">@Html.DisplayFor(x => x.Descripcion)</div>

                <div class="col-lg-1">Fecha Envio</div>
                <div class="col-lg-1">@Html.DisplayFor(x => x.Fecha_Envio_Short)</div>

                <div class="col-lg-1">
                    <button type="button" title="Editar" data-url="/Envios/VerCuadros?Id_Envio_Empresa=@Html.DisplayFor(x => x.Id_Envio_Empresa)" class="btn btn-default btn-xs modalMTC"><span class="glyphicon glyphicon-paperclip"></span></button>
                </div>
            </div>
            <div class="row">
            @using (Ajax.BeginForm("DetalleMensaje", "Envios", new { @id = "FormCabecera" },
                        new AjaxOptions()
                        {
                            HttpMethod = "GET",
                            InsertionMode = InsertionMode.Replace,
                            UpdateTargetId = "SeccionMensaje"
                        }))
                {
                    <div class="col-md-10">
                        <fieldset class="dhhBorder">
                            <legend class="dhhBorder">Lista de Envíos</legend>
                            <div class="row">
                                <div class="col-md-12" id="SeccionListado">
                                    @Html.Partial("_ListaMensajes", @Model.lV_Sedd_Mensaje)
                                </div>
                            </div>
                        </fieldset>
                    </div>
                }

                <div class="col-md-10" id="SeccionMensaje">
                    @Html.Partial("_DetalleMensaje", Model.oV_Sedd_Mensaje)
                </div>
            </div>
        </div>
    </fieldset>
</div>

_ListaMensajes:

@using aseDGRAIC.Helpers
@model List<beDGRAIC.V_Sedd_Mensaje>


<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-responsive">
        <thead class="small">
            <tr class="text-center">
                <th class="text-center col-lg-1" scope="col">Orden</th>
                <th class="text-center col-lg-2" scope="col">Tipo</th>
                <th class="text-center col-lg-4" scope="col">Asunto</th>
                <th class="text-center col-lg-1" scope="col">Adjunto</th>
                <th class="text-center col-lg-2" scope="col">Fecha / Hora</th>
                <th class="text-center col-lg-2" scope="col">Acciones</th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null)
            {
                var cuenta = 1;
                foreach (var x in Model)
                {
                    <tr>
                        <td class="text-center">@cuenta</td>
                        <td>@x.Tipo</td>
                        <td>@x.Asunto</td>
                        @if (x.Existen_Adjuntos != 0) { 
                            <td><button type="button" title="Editar" data-url="/Envios/VerAdjuntos?Id_Mensaje=@x.Id_Mensaje" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-paperclip"></span></button></td>
                        } else { 
                            <td>&nbsp;</td>
                        }
                        <td>@x.Fecha</td>
                        <td class="text-center">
                            <button type="submit" title="Ver" data-url="/Envios/DetalleMensaje?Id_Mensaje=@x.Id_Mensaje" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-comment"></span></button>
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

和_detalleMensaje:

@model beDGRAIC.V_Sedd_Mensaje

<div class="panel">
    <div class="row">
        <div class="col-md-12">
            <div class="row form-horizontal">
                <div class="col-sm-6 col-md-6">
                    <div class="form-group">
                        <label class="col-md-3 control-label small">Asunto:</label>
                        <div class="col-md-9">
                            @if (Model.Id_Mensaje != 0)
                            {
                                @Html.TextBoxFor(x => x.Asunto, new { @class = "form-control input-sm", @disabled = "disabled" })
                            }
                            else
                            {
                                @Html.TextBoxFor(x => x.Asunto, new { @class = "form-control input-sm" })
                            }
                        </div>
                    </div>
                </div>
            </div>
            <div class="row form-horizontal">
                <div class="col-sm-6 col-md-6">
                    <div class="form-group">
                        <label class="col-md-3 control-label small">Mensaje:</label><br />
                        <div class="col-md-9">                            
                            @if (Model.Id_Mensaje != 0)
                            {
                                @Html.TextBoxFor(x => x.Mensaje, new { @class = "form-control input-sm", @disabled = "disabled" })
                            }
                            else
                            {
                                @Html.TextBoxFor(x => x.Mensaje, new { @class = "form-control input-sm" })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel-footer">
    <div class="btn-group">
        @if (Model.Id_Mensaje == 0) { 
            <button id="btnGrabar" type="button" class="btn btn-success btn-sm">Enviar</button>
        }
    </div>
</div>

编辑:根据以下评论对代码进行了一些更改,但行为相同

1 个答案:

答案 0 :(得分:0)

似乎Ajax.ActionLink是从Ajax.Form提交信息的正确控件。所以我的“_ListaMensajes”部分视图提交按钮更改为:

@Ajax.ActionLink("Ver", "DetalleMensaje", new { Id_Mensaje = x.Id_Mensaje }, new AjaxOptions { UpdateTargetId = "SeccionMensaje" })

我很难找到任何对此的引用,这就是我延迟的原因。

感谢Stephen指出它。