Ho una semplice azione ASP.NET MVC come questa:
public ActionResult Edit(EditPostViewModel data)
{
}
I EditPostViewModel
hanno attributi di convalida come questo:
[Display(Name = "...", Description = "...")]
[StringLength(100, MinimumLength = 3, ErrorMessage = "...")]
[Required()]
public string Title { get; set; }
Nella vista sto usando i seguenti aiutanti:
@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title,
new { @class = "tb1", @Style = "width:400px;" })
Se eseguo un invio su un modulo, questa casella di testo viene inserita in una convalida verrà eseguita prima sul client e poi sul servizio(ModelState.IsValid
).
Ora ho un paio di domande:
Può essere usato invece con jQuery ajax submit? Quello che sto facendo è semplicemente rimuovere il modulo e facendo clic sul pulsante di invio un javascript raccoglierà i dati e quindi eseguirà $.ajax
.
Il lato server ModelState.IsValid
funzionerà?
Come posso inoltrare il problema di convalida al client e presentarlo come se stessi utilizzando la convalida int build(@Html.ValidationSummary(true)
)?
Esempio di chiamata 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');
}
});
}
Modifica 1:
Incluso nella pagina:
<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>
- Ivy
L'uso della libreria jQuery.validate
dovrebbe essere abbastanza semplice da configurare.
Specifica le seguenti impostazioni nel tuo file Web.config
:
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
Quando crei la tua vista, definiresti cose come questa:
@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)
NOTA: Questi devono essere definiti all'interno di un elemento del modulo
Quindi dovresti includere le seguenti librerie:
<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>
Questo dovrebbe essere in grado di configurarti per la convalida lato client
NOTA: serve solo per una convalida aggiuntiva lato server oltre alla libreria jQuery.validation
Forse qualcosa del genere potrebbe aiutare:
[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
//Save data
return Json(new { Success = true } );
}
Dove ValidateAjax
è un attributo definito come:
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;
}
}
}
Quello che fa è restituire un oggetto JSON che specifica tutti gli errori del modello.
Sarebbe una risposta di esempio
[{
"key":"Name",
"errors":["The Name field is required."]
},
{
"key":"Description",
"errors":["The Description field is required."]
}]
Questo verrebbe restituito al tuo errore di gestione della richiamata della chiamata $.ajax
Puoi scorrere i dati restituiti per impostare i messaggi di errore secondo necessità in base alle chiavi restituite (penso che qualcosa come $('input[name="' + err.key + '"]')
troverebbe il tuo elemento di input