Jquery 带有部分视图的ajax表单,动态生成的列表更新另一个部分视图上的值
我是MVC和Razor的新手(是的,我感到羞耻), 我有一个包含两个部分视图的页面和一个ajax表单,其中一个部分视图包含一个动态生成的列表,该列表将值更新(并且失败)到另一个部分视图,通过设计,它显示了列表的第一条消息 问题是,当我按下列表中某个项目上的按钮(“Ver”在“_ListaMensajes”)时,它不会在页面底部显示消息的详细信息(_detalleMensaje),而是什么也不做(不在控制器上调用或做任何事情) 我遵循了一些教程和工作项目来做这件事,这让我感到困惑,我不知道这段代码是否有意义,请给我一点帮助 谢谢 PD:我正在使用MVC5.1(根据nuget控制台) 和引用:jquery.unobtrusive-ajax.min.js 控制器: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),而是什么也不做(不在控制器上调用或做任何事情) 我遵循了一些教程和工作项目来做这件事,这让我感到困惑,我不知道这段代码
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> </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" })