查看组件和 Ajax 服务器端验证

Question

我的应用需要能够在多个视图上发送电子邮件。我正在尝试使用视图组件，以便可以在多个地方重用我的逻辑。当用户单击“发送”按钮时，我不想刷新整个视图...我想验证表单并显示任何模型错误，否则发送电子邮件。

下面的设置适用于客户端验证，但我不确定如何恢复服务器端的模型错误并将它们显示在视图中。任何帮助表示赞赏。

Default.cshtml（查看组件 - 使用 jquery-ajax-unobtrusive）

@model EmailViewModel   
<div id="Email">
    <div class="row section-buffer">
        <div class="col-sm-12">
            <span class="section-header">Email</span>
        </div>
    </div>
    <hr />
    <form id="EmailForm"
          method="post"
          class="form-horizontal"
          asp-controller="Email"
          asp-action="Send"
          data-ajax="true"
          data-ajax-method="POST"
          data-ajax-success="sendEmailSuccess"
          data-ajax-failure="sendEmailFailure(xhr, status, error)"
          data-ajax-update="Email">

        <div class="form-group form-group-sm">
            <label class="description-label col-sm-3" asp-for="From"></label>
            <div class="col-sm-9">
                <input class="form-control" asp-for="From" />
                <span asp-validation-for="From" class="text-danger"></span>
            </div>
        </div>
        <!-- remaining fields omitted -->
        <div class="form-group form-group-sm">
            <div class="col-sm-9 col-sm-offset-3">
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </div>
    </form>
</div>

EmailViewModel

public class EmailViewModel
{
    [Required]
    public string From{ get; set; }
    //remaining properties omitted
}

电子邮件控制器

[HttpPost]
[Route("/email/send")]
public ActionResult Send(EmailViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        //how do return my model errors back to my View Component?
    }
    else
    {
        //do send logic here
        return Content("Success");
    }
}

Answer 1

在 ViewBag 中保留错误

@model EmailViewModel   
<div id="Email">
    <div class="row section-buffer">
        <div class="col-sm-12">
            <span class="section-header">Email</span>
        </div>
    </div>
 <div>@ViewBag.Error</div>
    <hr />
    <form id="EmailForm"
          method="post"
          class="form-horizontal"
          asp-controller="Email"
          asp-action="Send"
          data-ajax="true"
          data-ajax-method="POST"
          data-ajax-success="sendEmailSuccess"
          data-ajax-failure="sendEmailFailure(xhr, status, error)"
          data-ajax-update="Email">

        <div class="form-group form-group-sm">
            <label class="description-label col-sm-3" asp-for="From"></label>
            <div class="col-sm-9">
                <input class="form-control" asp-for="From" />
                <span asp-validation-for="From" class="text-danger"></span>
            </div>
        </div>
        <!-- remaining fields omitted -->
        <div class="form-group form-group-sm">
            <div class="col-sm-9 col-sm-offset-3">
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </div>
    </form>
</div>

返回错误的视图

[HttpPost]
[Route("/email/send")]
public ActionResult Send(EmailViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        //how do return my model errors back to my View Component?
         return Content(string.Join("; ", ModelState.Values
                                    .SelectMany(x => x.Errors)
                                    .Select(x => x.ErrorMessage)));
       //in send email success javascript method handle this message and show.

    }
    else
    {
        //do send logic here
        return Content("Success");
    }
}