mvc ajax表單驗證在「發佈」後停止工作

我一直在爭取一段時間，我認爲我很接近。我是MVC的新手，在網頁設計的後面，所有模型處理（包括驗證）和部分視圖（不更新整個頁面）。我的當前方法（如下）'工作'，直到有一個ajax回發（我使用ajax得到部分回來）。問題是客戶端驗證在我按下「創建」按鈕並重新填充部分視圖之前有效。我通過清除「年齡」文本框並按下「創建」來測試這一點。我收到消息說該字段是必需的。然後，我在該字段中輸入一個有效值，然後再次按Create並「回傳」。現在，當我再次清除年齡框時，錯誤消息不會顯示出來，它讓我發佈無效值顯示。任何人都可以告訴我爲什麼它不會工作後，我點擊'創建'（id = yourSubmitButtonID）按鈕？mvc ajax表單驗證在「發佈」後停止工作

此外，如果有人知道更好的方式來做到這一點，請讓我知道。

PartialController.cs

using StuffTesterMVC.Models; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace StuffTesterMVC.Controllers 
{ 
    public class PartialController : Controller 
    { 
     // GET: Partial 
     public ActionResult Partials() 
     { 
      return View(); 
     } 

     public PartialViewResult GetModel01() 
     { 
      PartialViewModel01 model = new PartialViewModel01(); 
      model.Birthday = DateTime.Parse("9/10/1964"); 
      return PartialView("PartialViewModel01", model); 
     } 
    } 
}

Partials.cshtml

@{ 
    Layout = null; 
} 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/jquery.validate.min.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Partials</title> 
</head> 
<body> 
    <div id="divPartial01"> 
     @Html.Partial("PartialViewModel01", new StuffTesterMVC.Models.PartialViewModel01()) 
    </div> 
    @*<div id="divPartial02"> 
     @Html.Partial("PartialViewModel02", new StuffTesterMVC.Models.PartialViewModel02()) 
    </div>*@ 
    <!-- SCRIPTS --> 
    <script> 
     function saveSampleModel01() { 
      alert('posting'); 
      $.ajax({ 
       url: "@Url.Action("GetModel01", "Partial")", 
       type: "post", // make this "get" to get data 
       data: $("#divPartial01").serialize(), 
       success: function (result) { 
        $("#divPartial01").html(result); 
        alert('success'); 
       }, 
       error: function (result) { 
        err: alert("Failed"); 
       } 
      }); 
     } 
    </script> 
</body> 
</html>

PartialViewModel01.cshtml

@model StuffTesterMVC.Models.PartialViewModel01 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>PartialViewModel01</h4> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Birthday, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Birthday, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Birthday, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="button" id="yourSubmitButtonID" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="button" value="Save" onclick="saveSampleModel01();" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
    <script> 
     $(function() { 
      $("#yourSubmitButtonID").click(function (e) { 
       e.preventDefault(); 
       var _this = $(this); 
       var _form = _this.closest("form"); 

       alert('validating'); 

       var validator = $("form").validate(); // obtain validator 
       var anyError = false; 
       _form.find("input").each(function() { 
        if (!validator.element(this)) { // validate every input element inside this step 
         anyError = true; 
        } 
       }); 

       if (anyError) { 
        alert('found errors'); 
        return false; // exit if any error found  
       } 

       alert('no errors - do "post"'); 
       saveSampleModel01(); 
       //$.post(_form.attr("action"), _form.serialize(), function (data) { 
        //check the result and do whatever you want 
       }) 
      }); 
    </script> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div>

來源

2017-04-05 Belmiris

什麼_exactly_ 「停止工作」？而發生什麼呢？某處出現錯誤（可能在瀏覽器控制檯中）？或者一些不同的行爲？此外，您的部分對父視圖（調用saveSampleModel01（）'）的依賴關係。這種類型擊敗了部分點（即它們可以重複使用，並在多個視圖中使用）。 – ADyson

第一次加載頁面後，您可以清除年齡框，驗證會告訴您該字段是必需的。如果您填寫年齡字段並按回發（按創建按鈕），客戶端驗證將停止工作，並允許您發佈任何內容。無論如何，都會顯示警報（'沒有錯誤 - 請發佈'）。至於按鈕，我只是想弄清楚這些局部視圖應該如何工作。 – Belmiris

你需要在添加動態內容後重新解析驗證器 - 參考[這個答案]（http://stackoverflow.com/questions/31768946/required-field-validations-not-working-in-jquery-popup-mvc- 31769058分之4＃31769058）。腳本不應該侷限於 - 將其移至主視圖。 –

正如Stephen Muecke所指出的那樣，我通過添加以下行來解決此問題：

$ .validator.unobtrusive.parse（form）;

我的JavaScript在PartialViewModel01.cshtml。

我想這是一個重複的問題： Earlier question

來源

2017-04-07 18:19:24 Belmiris

mvc ajax表單驗證在「發佈」後停止工作

回答

相關問題