Ajax.BeginForm 在模型无效时复制

Question

我正在写一个 PartialView Ajax.BeginForm。该部分由消息列表和发送新消息的字段组成，如下图所示：

部分代码如下：

Code that List the messages

@if (Model != null)
{

    <div class="chat-activity-list" id="listaMensagens">
    @foreach (Inspinia_MVC5.Models.PostComentarios comentario in Model.Where(c => c.Usuarios.UsuEmail.Contains(User.Identity.Name) || (c.Usuarios.UsuId == c.Post.UsuId && (c.UsuariosDestinatario != null && c.UsuariosDestinatario.UsuEmail.Contains(User.Identity.Name)))).ToList())
    {
        <div class="chat-element @(comentario.UsuId == comentario.Post.UsuId ? "right" : "")">
            <a class="@(comentario.UsuId == comentario.Post.UsuId ? "pull-right" : "pull-left")" href="#">
                <img src="/Servicili/Images/a2.jpg" class="img-circle" alt="image">
            </a>
            <div class="media-body @(comentario.UsuId == comentario.Post.UsuId ? "text-right" : "")">
                <small class="@(comentario.UsuId == comentario.Post.UsuId ? "pull-left" : "pull-right") text-navy">@Inspinia_MVC5.Helpers.DateHelper.getTempo(comentario.PosComDataEnvio)</small>
                <i class="fa fa-star @(comentario.UsuId == comentario.Post.UsuId ? "text-success" : "text-warning") "></i>
                <strong>@comentario.Usuarios.Clientes.CliNome</strong>
                <p class="m-b-xs">
                    @comentario.PosComComentario
                </p>
                <small class="text-muted">@comentario.PosComDataEnvio</small>
            </div>
        </div>
    }
    </div>
}
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

code of the Form to send a new message

<div class="chat-form">
    @using (Ajax.BeginForm("EnviarMensagem", "OrcamentosServicos", new AjaxOptions() { UpdateTargetId = "listaMensagens", InsertionMode = InsertionMode.InsertAfter }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()
        //@Html.HiddenFor(m => m.FirstOrDefault().Post.PostOrcamentoServico.FirstOrDefault().PosOrcSerId)
        <div class="form-group">
            @Html.TextArea("PosComComentario", new { @placeholder = "Digite uma mensagem...", @class = "form-control" })
        </div>
        <div class="text-right">
            <button type="submit" class="btn btn-sm btn-success m-t-n-xs">Enviar mensagem</button>
        </div>
    }
</div>

在我的控制器中，我有以下方法：

Return the PartialView that will render those comments (PostComentarios)

public PartialViewResult EnviarMensagem(HashSet<PostComentarios> lComentarios)
{
    return PartialView(lComentarios); 
}

对于[Post]方法，我有以下代码：

[HttpPost]
public PartialViewResult EnviarMensagem(PostComentarios comentario/)
{
   if (string.IsNullOrEmpty(comentario.PosComComentario))
     ModelState.AddModelError("PosComComeentario", "Informe um texto para enviar a mensagem.");
   if (ModelState.IsValid)
     return PartialView("ListaMensagens");
   else
     return PartialView();
}

我还有另一个局部视图，仅用于呈现名为 ListaMensagens 的新消息...

我的问题是，当我尝试使用验证时，系统正在复制主表单，如下所示：

有人能告诉我我做错了什么吗？

Answer 1

据我所知，您正在使用插入模式 InsertionMode.InsertAfter，这意味着 Action 方法的结果将插入到表单中现有数据之后。

if (ModelState.IsValid)
    return PartialView("ListaMensagens");
else
    return PartialView();

如果您的模型无效，您将返回整个局部视图，该视图插入到表单中的现有元素之后。这会导致在现有部分视图之后放置完整的额外副本，复制其中的所有内容，包括文本框和按钮。

Ajax.BeginForm 在模型无效时复制

Ajax.BeginForm is duplicating when the model is not valid

c#

asp.net-mvc

unobtrusive-javascript

ajax.beginform

asp.net-mvc-partialview