Jquery 带有部分视图的ajax表单,动态生成的列表更新另一个部分视图上的值

Jquery 带有部分视图的ajax表单,动态生成的列表更新另一个部分视图上的值,jquery,ajax,asp.net-mvc,model-view-controller,ajax.beginform,Jquery,Ajax,Asp.net Mvc,Model View Controller,Ajax.beginform,我是MVC和Razor的新手(是的,我感到羞耻), 我有一个包含两个部分视图的页面和一个ajax表单,其中一个部分视图包含一个动态生成的列表,该列表将值更新(并且失败)到另一个部分视图,通过设计,它显示了列表的第一条消息 问题是,当我按下列表中某个项目上的按钮(“Ver”在“_ListaMensajes”)时,它不会在页面底部显示消息的详细信息(_detalleMensaje),而是什么也不做(不在控制器上调用或做任何事情) 我遵循了一些教程和工作项目来做这件事,这让我感到困惑,我不知道这段代码

我是MVC和Razor的新手(是的,我感到羞耻), 我有一个包含两个部分视图的页面和一个ajax表单,其中一个部分视图包含一个动态生成的列表,该列表将值更新(并且失败)到另一个部分视图,通过设计,它显示了列表的第一条消息

问题是,当我按下列表中某个项目上的按钮(“Ver”在“_ListaMensajes”)时,它不会在页面底部显示消息的详细信息(_detalleMensaje),而是什么也不做(不在控制器上调用或做任何事情)

我遵循了一些教程和工作项目来做这件事,这让我感到困惑,我不知道这段代码是否有意义,请给我一点帮助

谢谢

PD:我正在使用MVC5.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);
    }
第页:


环境清单
艾文托
@DisplayFor(x=>x.description)
费查环境
@DisplayFor(x=>x.Fecha\u Envio\u Short)
@使用(Ajax.BeginForm(“DetalleMensaje”,“Envios”,new{@id=“FormCabecera”}),
新的AjaxOptions()
{
HttpMethod=“GET”,
InsertionMode=InsertionMode.Replace,
UpdateTargetId=“SeccionMensaje”
}))
{
环境清单
@Html.Partial(“\u ListaMensajes”,@Model.lV\u Sedd\u Mensaje”)
}
@Html.Partial(“_DetalleMensaje”,Model.oV_Sedd_Mensaje)
_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>
@使用aseDGRAIC.Helpers
@模型列表
奥登
蒂波
阿松托
阿琼托
费查/霍拉
疫苗
@如果(型号!=null)
{
var cuenta=1;
foreach(模型中的var x)
{
@昆塔
@x、 蒂波
@x、 阿松托
@如果(x.Existen_Adjuntos!=0){
}否则{
}
@x、 费查
}
}
和_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>
@model beDGRAIC.V_Sedd_Mensaje
Asunto:
@如果(Model.Id_Mensaje!=0)
{
@TextBoxFor(x=>x.Asunto,新的{@class=“form control input sm”,@disabled=“disabled”})
}
其他的
{
@TextBoxFor(x=>x.Asunto,新的{@class=“form control input sm”})
}
门萨耶:
@如果(Model.Id_Mensaje!=0) { @Html.TextBoxFor(x=>x.Mensaje,新的{@class=“form control input sm”,@disabled=“disabled”}) } 其他的 { @TextBoxFor(x=>x.Mensaje,新的{@class=“form control input sm”}) } @如果(Model.Id_Mensaje==0){ 羡慕 }

编辑:根据下面的注释对代码进行了一些更改,但其行为与之相同

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

@Ajax.ActionLink("Ver", "DetalleMensaje", new { Id_Mensaje = x.Id_Mensaje }, new AjaxOptions { UpdateTargetId = "SeccionMensaje" })
我很难找到这方面的任何参考资料,这就是我拖延的原因


感谢Stephen指出这一点。

我的布局中的错误是否会影响jquery?在:
$(窗口)。在('load',function(){$('.selectpicker').selectpicker();尝试使用不同的布局,没有错误,行为方式相同…您有一个ajax表单,但没有提交按钮。您的部分内容位于表单内部(
\u ListaMensajes
)不呈现任何控件,因此无论如何都不会提交任何内容。并且循环正在生成无效的html(重复的
id
属性
)。然后,您的第二部分
\u detalleMensaje`确实有一些控件,但它不在表单中,因此不清楚您在这里实际要做什么。感谢您的观察,我将在_ListaMensajes上解释我试图做什么,它仅用于选择要显示的消息(当按钮“Ver”时)在_detallemensajepartialview上被按下-我猜它必须变成submit-)。在第二个部分中,我估计控件将通过从控制器方法传递模型来填充,该方法在Ajax表单上引用
@Ajax.ActionLink("Ver", "DetalleMensaje", new { Id_Mensaje = x.Id_Mensaje }, new AjaxOptions { UpdateTargetId = "SeccionMensaje" })