使用jquery ajax添加的部分視圖驗證問題

我已閱讀了很多帖子，但無法解決我的問題。使用jquery ajax添加的部分視圖驗證問題

我有一個視圖，其點擊添加按鈕我顯示部分視圖，該部分視圖有一個表單添加記錄，這是不驗證客戶端。我正在使用jquery驗證，並在主視圖中添加了部分視圖打開的js文件。

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

筆者認爲：

<div id="Div1"> 
    <a id="lnkAdd"> 
     <div>Add</div> 
    </a> 
</div> 

$("#lnkAdd").click(function() { 
     $.ajax({ 
      url: '@Url.Action("MethodName", "ControllerName")', 
     type: "POST", 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(xhr.status); 
       alert(thrownError); 
      } 
    }).done(function() { 
    }).success(function (dv) { 
     $("#Div1").html(dv); 
    }) 
    });

控制器：

[Authorize] 
    public PartialViewResult MethodName() 
    { 
     return PartialView("_PartialViewName"); 
    }

Parital查看：

<div id="UsersDiv"> 

<div class="grid-background" style="border: 1px solid #8dc2f5;"> 

    @using (Html.BeginForm("AddRecord", "ControllerName")) 
    { 
     <div class="form-bg" style="border: 0px; margin-top: 0px; width: 966px;"> 
    <div class="form-field-bg"> 
     @Html.LabelFor(m => m.FirstName) 
     @Html.TextBoxFor(m => m.FirstName, new { @class = "label-class" }) 
     @Html.ValidationMessageFor(m => m.FirstName, "", new { @class = "validation-class" }) 
    </div> 

    <input type="submit" value="Save" id="btnSaveUsers" name="AddRecord" class="signup-button" /> 
    }

來源

2013-06-20 Altaf Sami

我不知道之後添加以下代碼，如果你可以寫兩個做和成功！ –

驗證程序僅在觸發document.ready事件時才連線，對於動態內容，您必須手動觸發它們。

您的成功處理程序改成這樣：

.success(function (dv) { 
    $("#Div1").html(dv); 

    $("form").data("validator", null); 
    $.validator.unobtrusive.parse($("form")); 
})

來源

2013-06-20 08:17:27 Slicksim

它給了我錯誤Uncaught TypeError：無法讀取屬性在chrome中未定義的'unobtrusive'。 –

您可以在服務器端驗證模型，並在客戶端

public PartialViewResult _CreateSupplier() 
     { 
      return PartialView(new Supplier()); 
     } 

    [HttpPost] 
    public JsonResult _CreateSupplier(Supplier model) 
    { 
    //Validation 
    return Json(new 
        { 
         status = transactionStatus, 
         modelState = ModelState.GetModelErorrs() 
        }, JsonRequestBehavior.AllowGet); 
    }

表單POST jQuery的方法

$('#create-supplier').submit(function (e) { 
    e.preventDefault(); 
    var $form = $(this); 
    if (!ModelIsValid($form)) 
     return; 
    AjaxPost($form.serialize(), '@Url.Action("_CreateSupplier")', function (result) { 
     if (result.status == 0) { 
      $form[0].reset(); 
      //Success 
      var grid = $("#gridSupplier").data("kendoGrid"); 
      grid.dataSource.read(); 
     } else if (result.status == 1) 
      AddFormErrors($form, result); 
     else if (result.status == 2) 
      //error; 
    }); 
});

檢查追加錯誤模型方法是有效的，如果無效添加錯誤形成

function ModelIsValid(form) { 
    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) 
     return false; // exit if any error found  
    return true; 
} 

function AddFormErrors(form, errors) { 
    for (var i = 0; i < errors.modelState.length; i++) { 
     for (var j = 0; j < errors.modelState[i].errors.length; j++) { 
      var val = $(form).find("[data-valmsg-for='" + errors.modelState[i].key + "']"); 
      if (val.html().length > 0) { 
       $(form).find("[for='" + errors.modelState[i].key + "']").html(errors.modelState[i].errors[j]); 
      } else { 
       val.html('<span for="' + errors.modelState[i].key + '" generated="true" class="" style="">' + errors.modelState[i].errors[j] + '</span>'); 
      } 
     } 
    } 
}

阿賈克斯POST方法：

function AjaxPost(postData, url, callback) { 
    $.ajax({ 
     url: url, 
     type: 'POST', 
     data: postData, 
     dataType: 'json', 
     success: function (result) { 
      if (callback) callback(result); 
     } 
    }); 
}

而在去年C＃擴展方法，檢查返回模型狀態錯誤

public static IEnumerable<object> GetModelErorrs(this ModelStateDictionary modelState) 
     { 
      return modelState.Keys.Where(x => modelState[x].Errors.Count > 0) 
       .Select(x => new { 
       key = x, 
       errors = modelState[x].Errors.Select(y => y.ErrorMessage).ToArray() 
       }); 
     }

來源

2013-06-20 08:34:43

是否包含jQuery的文件？

<script src="@Url.Content("~/Scripts/jquery-2.0.0.min.js")" type="text/javascript"></script>

來源

2013-06-20 09:05:18 JochemQuery

是的，我包括這個 –

我固定渲染局部

@Scripts.Render("~/bundles/jqueryval")

來源

2015-08-03 20:13:28 mrelva

使用jquery ajax添加的部分視圖驗證問題

回答

相關問題