ajax 带有局部视图的表单,动态生成的列表在另一个局部视图上更新值
ajax form with partial view with a dynamically generated list updating values on another partial view
我对 MVC 和 Razor 还很陌生(是的,我真丢人),
我有一个包含 2 个局部视图和 1 个 ajax 表单的页面,其中一个局部视图具有动态生成的列表更新值(并且失败)到另一个局部视图,按设计它显示列表的第一条消息。
问题是当我在列表中的一项上按下按钮时(“_ListaMensajes”中的"Ver"),而不是在页面底部显示消息的详细信息(_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> </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>
编辑: 根据下面的评论对代码进行了一些更改,但行为相同
看来 Ajax.ActionLink 是从 Ajax.Form 提交信息的正确控件。所以我的“_ListaMensajes”部分视图提交按钮更改为:
@Ajax.ActionLink("Ver", "DetalleMensaje", new { Id_Mensaje = x.Id_Mensaje }, new AjaxOptions { UpdateTargetId = "SeccionMensaje" })
我很难找到对此的任何参考,这就是我延迟的原因。
感谢 Stephen 指出。
我对 MVC 和 Razor 还很陌生(是的,我真丢人), 我有一个包含 2 个局部视图和 1 个 ajax 表单的页面,其中一个局部视图具有动态生成的列表更新值(并且失败)到另一个局部视图,按设计它显示列表的第一条消息。
问题是当我在列表中的一项上按下按钮时(“_ListaMensajes”中的"Ver"),而不是在页面底部显示消息的详细信息(_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> </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>
编辑: 根据下面的评论对代码进行了一些更改,但行为相同
看来 Ajax.ActionLink 是从 Ajax.Form 提交信息的正确控件。所以我的“_ListaMensajes”部分视图提交按钮更改为:
@Ajax.ActionLink("Ver", "DetalleMensaje", new { Id_Mensaje = x.Id_Mensaje }, new AjaxOptions { UpdateTargetId = "SeccionMensaje" })
我很难找到对此的任何参考,这就是我延迟的原因。
感谢 Stephen 指出。