查看組件和Ajax服務器端驗證

Question

我的應用需要能夠發送多個視圖的電子郵件。我試圖使用一個視圖組件，所以我可以重用我的邏輯多個地方。當用戶單擊發送按鈕時，我不想刷新整個視圖...我想驗證表單並顯示任何模型錯誤，否則發送電子郵件。

下面的設置工作正常，客戶端驗證，但我不知道如何帶回模型錯誤服務器端並顯示它們在視圖中。任何幫助表示讚賞。

Default.cshtml（View組件 - 使用jQuery的Ajax的不顯眼）

@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 
} 

EmailController

[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"); 
    } 
}