Comment Montrer Échec de la Validation du Message dans une fenêtre contextuelle dans MVC

Voici un moyen simple de le faire:

if (ModelState.IsValid)
{
return RedirectToAction("HomeScreen", "HomeScreen");
}
StringBuilder sb = new StringBuilder();
sb.Append("You have a bunch of errors:");
foreach (ModelState modelState in ModelState.Values) {
foreach (ModelError error in modelState.Errors) {
sb.Append(error + "\n");
}
}
ViewData["Error"] = sb.ToString();
return View("LoginScreen");

Et de votre point de vue:

 @if(!String.IsNullOrEmpty(ViewBag["Errors"])){
@:<script type="text/javascript">alert('@ViewBag["Errors"]')</script>
}

Ce n'est pas testée, mais devrait vous donner l'idée.

De mettre en œuvre un tel mécanisme d'affichage vous pouvez

1. Scinder la vue de la page en deux, comme la page d'affichage et vue partielle sur la page. Déplacer les balises HTML à l'intérieur du HTML.BeginForm dans la vue partielle. Ajaxify la vue partielle de la page.
2. Définir une div dans la page d'affichage pour afficher les messages comme popup. Définir les méthodes jQuery pour ouvrir la fenêtre contextuelle.
3. Ajouter une méthode d'extension pour HTMLHelper classe pour afficher le message. Cette méthode va prendre soin de la construction d'un message d'erreur du modèle de l'état et de son affichage.

Exemple de code ci-joint. Jetez un coup d'oeil au code. Note: je n'ai pas encore testé.

Affichage de Page(Page de login.cshtml)

@model Project.LoginScreen
@{
ViewBag.Title = "LoginScreen";
}
<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.growl.js")"></script>
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$(document).ajaxError(function (request, status, error) {
$.growl.error({ title: "Server Error", message: status.responseText });
});
//create the loading window and set autoOpen to false
$("#loadingScreen").dialog({
autoOpen: false,    
dialogClass: "loadingScreenWindow",
closeOnEscape: false,
draggable: false,
width: 460,
minHeight: 100,
modal: true,
buttons: {},
resizable: false,
open: function () {
$('body').css('overflow', 'hidden');
},
close: function () {
$('body').css('overflow', 'auto');
}
}); //end of dialog
});
function waitingDialog(waiting) { 
$("#loadingScreen").html(waiting.message && '' != waiting.message ? waiting.message : 'Please wait...');
$("#loadingScreen").dialog('option', 'title', waiting.title && '' != waiting.title ? waiting.title : 'Updating');
$("#loadingScreen").dialog('open');
}
function closeWaitingDialog() {
$("#loadingScreen").dialog('close');
}
</script>
<h2>LoginScreen</h2>
<div id="frmContent">
@Html.Partial("loginPartial", Model)
</div>
<div id="loadingScreen"></div>

Vue Partielle (loginPartial.cshtml)

@model Project.LoginScreen
@using (Ajax.BeginForm("login", "loginscreen", new AjaxOptions { OnBegin = "waitingDialog({})", OnComplete = "closeWaitingDialog()", HttpMethod = "POST", UpdateTargetId = "frmContent" }))
{
<div style="color: red; text-align: center">
<fieldset>
<legend>Validation Summary</legend>
@Html.ValidationMessageFor(m => m.EmpID)
<br />
@Html.ValidationMessageFor(m => m.Password)
</fieldset>
</div>
<br />
<br />
<div>
<table border="1" style="background-color: activeborder">
<tr>
<td>
@Html.LabelFor(@m => @m.EmpID)
</td>
<td>
@Html.TextBoxFor(@m => @m.EmpID)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(@m => @m.Password)
</td>
<td>
@Html.PasswordFor(@m => @m.Password)
</td>
</tr>
</table>
<input type="submit" value="login" />
</div>
}
@(Html.AjaxPopupWindow(Html.ViewData.ModelState))

méthode d'Extension pour afficher le message

using System.Text;
using System.Web;
using System.Web.Mvc;
namespace Web.Helper
{
public static class ValidationHelper
{
public static MvcHtmlString AjaxPopupWindow(this HtmlHelper html, ModelStateDictionary states)
{
StringBuilder sb = new StringBuilder();
if (HttpContext.Current.Request.HttpMethod == "POST")
{
sb.Append("<script type=\"text/javascript\">");
if (!states.IsValid)
{
var ul_tag = new TagBuilder("ul");
foreach (var state in states.Values)
{
foreach (var e in state.Errors)
{
var li_tag = new TagBuilder("li");
li_tag.SetInnerText(e.ErrorMessage);
ul_tag.InnerHtml += li_tag.ToString();
}
}
sb.AppendFormat("$.growl.error({{ title: \"{0}\", message: \"{1}\" }});", "Save Error", ul_tag);
}
else
{
sb.AppendFormat("$.growl.notice({{ title: \"{0}\", message: \"{1}\" }});", "Save Changes", "Update Complete");
}
sb.Append(" </script>");
}
return MvcHtmlString.Create(sb.ToString());
}
}
}

Espérant que cela puisse aider. Merci.