我有這樣簡單的ASP.NET MVC操作：public ActionResult Edit(EditPostViewModel data){}該EditPostViewModel有這樣的驗證特性：[Display(Name = "...", Description = "...")][StringLength(100, MinimumLength = 3, ErrorMessage = "...")][Required()]public string Title { get; set; }在視圖中，我正在使用以下助手： @Html.LabelFor(Model => Model.EditPostViewModel.Title, true) @Html.TextBoxFor(Model => Model.EditPostViewModel.Title, new { @class = "tb1", @Style = "width:400px;" })如果我在將該文本框置于驗證中的表單上進行提交，則將首先在客戶端上執行，然后在service（ModelState.IsValid）上完成。現在我有幾個問題：可以將其與jQuery ajax提交一起使用嗎？我正在做的就是簡單地刪除表單，然后單擊“提交”按鈕，javascript將收集數據，然后運行$.ajax。服務器端可以ModelState.IsValid工作嗎？如何將驗證問題轉發回客戶端，并像使用生成intvalidation（@Html.ValidationSummary(true)）的方式呈現出來？Ajax調用示例：function SendPost(actionPath) { $.ajax({ url: actionPath, type: 'POST', dataType: 'json', data: { Text: $('#EditPostViewModel_Text').val(), Title: $('#EditPostViewModel_Title').val() }, success: function (data) { alert('success'); }, error: function () { alert('error'); } });}編輯1：包含在頁面上：<script src="/Scripts/jquery-1.7.1.min.js"></script><script src="/Scripts/jquery.validate.min.js"></script><script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
3 回答
縹緲止盈
TA貢獻2041條經驗 獲得超4個贊
客戶端
使用該jQuery.validate庫應該非常簡單。
在Web.config文件中指定以下設置：
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
建立視圖時，您將定義以下內容：
@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title,
new { @class = "tb1", @Style = "width:400px;" })
@Html.ValidationMessageFor(Model => Model.EditPostViewModel.Title)
注意：這些需要在表單元素中定義
然后，您需要包括以下庫：
<script src='@Url.Content("~/Scripts/jquery.validate.js")' type='text/javascript'></script>
<script src='@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")' type='text/javascript'></script>
這應該能夠使您進行客戶端驗證
資源資源
http://msdn.microsoft.com/zh-cn/vs2010trainingcourse_aspnetmvccustomvalidation_topic5.aspx
服務器端
注意：這僅用于jQuery.validation庫頂部的其他服務器端驗證
也許這樣的事情可能會有所幫助：
[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
//Save data
return Json(new { Success = true } );
}
當ValidateAjax一個屬性定義為：
public class ValidateAjaxAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
if (!filterContext.HttpContext.Request.IsAjaxRequest())
return;
var modelState = filterContext.Controller.ViewData.ModelState;
if (!modelState.IsValid)
{
var errorModel =
from x in modelState.Keys
where modelState[x].Errors.Count > 0
select new
{
key = x,
errors = modelState[x].Errors.
Select(y => y.ErrorMessage).
ToArray()
};
filterContext.Result = new JsonResult()
{
Data = errorModel
};
filterContext.HttpContext.Response.StatusCode =
(int) HttpStatusCode.BadRequest;
}
}
}
這樣做是返回一個JSON對象，該對象指定所有模型錯誤。
示例響應將是
[{
"key":"Name",
"errors":["The Name field is required."]
},
{
"key":"Description",
"errors":["The Description field is required."]
}]
這將返回到您的錯誤處理回調$.ajax調用
您可以遍歷返回的數據以根據返回的鍵根據需要設置錯誤消息（我認為類似的東西$('input[name="' + err.key + '"]')會找到您的輸入元素
蕪湖不蕪
TA貢獻1796條經驗 獲得超7個贊
這是一個相當簡單的解決方案：
在控制器中，我們返回如下錯誤：
if (!ModelState.IsValid)
{
return Json(new { success = false, errors = ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList() }, JsonRequestBehavior.AllowGet);
}
以下是一些客戶端腳本：
function displayValidationErrors(errors)
{
var $ul = $('div.validation-summary-valid.text-danger > ul');
$ul.empty();
$.each(errors, function (idx, errorMessage) {
$ul.append('<li>' + errorMessage + '</li>');
});
}
這就是我們通過ajax處理它的方式：
$.ajax({
cache: false,
async: true,
type: "POST",
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
var isSuccessful = (data['success']);
if (isSuccessful) {
$('#partial-container-steps').html(data['view']);
initializePage();
}
else {
var errors = data['errors'];
displayValidationErrors(errors);
}
}
});
另外，我通過以下方式通過ajax渲染部分視圖：
var view = this.RenderRazorViewToString(partialUrl, viewModel);
return Json(new { success = true, view }, JsonRequestBehavior.AllowGet);
RenderRazorViewToString方法：
public string RenderRazorViewToString(string viewName, object model)
{
ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,
viewName);
var viewContext = new ViewContext(ControllerContext, viewResult.View,
ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
return sw.GetStringBuilder().ToString();
}
}
- 3 回答
- 0 關注
- 982 瀏覽
添加回答
舉報
0/150
提交
取消