2016-06-22 10 views
0

Ich muss custom validation in AJAXpopup in MVC durchführen. Ich habe eine CustomValidator erstellt und überschreibe die IsValid() Methode. Problem ist, dass das Popup die benutzerdefinierten Validierungen nicht richtig darstellt.Benutzerdefinierte Validierung in AJAX-Popup in mVC

Mein Code:

_Layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    @Styles.Render("~/Content/css") 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> 
    @Scripts.Render("~/bundles/jquery") 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script src="~/Scripts/jquery.validate.min.js"></script> 
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script> 
    @Scripts.Render("~/bundles/modernizr") 
    <script> 
     $(function() { 
      $("#modalDialog").dialog({ 
       autoOpen:false, 
       width: 600, 
       height: 300, 
       modal: true 
      }); 
      $("#opener").click(function() { 
       $("#modalDialog").dialog("open"); 
      }); 
     }); 

     function OnSuccess(response) 
     { 
      $("#modalDialog").text(response); 
     } 
    </script> 
</head> 

Index.cshtml:

@model MvcPopup.Controllers.HomeController.SomeModel 
@{ViewBag.Title = "Home Page";} 
<p>This is page content !!!</p> 
<button id="opener">Open Dialog</button> 
<div id="modalDialog" title="Basic Modal Dialog"> 
    <p>This is a basic modal dialog</p> 
    @using (Ajax.BeginForm("Index", new AjaxOptions { UpdateTargetId = "ID", OnSuccess = "OnSuccess" })) 
    { 
    <div> 
     <fieldset> 
      <legend>Info</legend> 
      @Html.LabelFor(m => m.EmailAddress) 
      @Html.TextBoxFor(m => m.EmailAddress) 
      @Html.ValidationMessageFor(m => m.EmailAddress) 
      <input type="submit" value="Submit" /> 
     </fieldset> 
    </div> 
    } 
</div> 

HomeController.cs:

public class HomeController : Controller 
    { 
     public class SomeModel 
     { 
      [CustomValidator] 
      [Display(Name = "Email address")] 
      public string EmailAddress { get; set; } 
     } 
     public ActionResult Index() 
     { 
      var model = new SomeModel(); 
      return View(); 
     } 
     [HttpPost] 
     public ActionResult Index(SomeModel model) 
     { 
      if (ModelState.IsValid) 
      { 
       return PartialView(); 
      } 
      return PartialView(); 
     } 

CustomValidator.cs:

public class CustomValidator : ValidationAttribute 
    { 
     protected override ValidationResult IsValid(object value, ValidationContext validationContext) 
     { 
      if (value != null) 
      { 
       if (value.ToString().Contains("X")) 
       { 
        return ValidationResult.Success; ; 
       } 
       else 
       { 
        return new ValidationResult("Enter an email address with letter X"); 
       } 
      } 
      else 
      { 
       return new ValidationResult("" + validationContext.DisplayName + " is mandatory.Please enter it."); 
      } 
     } 
    } 

Ich kann sehen, dass die Custom Validations gefeuert werden, aber das Rendern auf der Popup-Seite ist ein bisschen krumm. Erscheint unten wie:

On Load

Nun, ich gebe keinen Wert in der E-Mail textbox, und klicken Sie auf Submit, kann ich meine benutzerdefinierten Validierung „Email Address is mandatory. Please enter it.“ wird ausgelöst, und ist offensichtlich auf der Popup-Seite wie folgt:

Afterwards

ich meine, es ist ziemlich offensichtlich, dass die benutzerdefinierte Validierung in der Nähe der E-Mail textbox und Dinge sollten wie ein popup aussehen erscheinen soll. Bitte helfen Sie.

EDIT

Validations erscheinen in der popup Seite, aber der Inhalt ist etwas schief. I mean the content of the parent page too appear on the popup page. Schnappschuss unten. Wie man es los wird? Bitte helfen Sie.

enter image description here

+0

'$ ("# ModalDialog") html (Antwort);' (nicht ', Text()') –

+1

Warum nicht einfach einen 'RegularExpressionAttribute' verwenden, um ein' "X", um sicherzustellen, 'enthalten - es ist kein wirklicher Punkt in diesem Attribut –

+0

@StephenMuecke: Diese X-Aufnahme dient nur zu Demonstrationszwecken.Ich kann andere gültige Arten der benutzerdefinierten Validierung haben. – Anurag

Antwort

0

Dies ist ein typisches und sehr einige Zeit oft gesehen. Der Grund dafür, dass die Validierung nicht ausgelöst wurde, ist, dass der Inhalt wie der modale Dialog dynamisch ist und später auf der Seite hinzugefügt wird. Die Formularüberprüfung muss das Formular erneut analysieren, um die Steuerelemente zu überprüfen, die der Seite dynamisch hinzugefügt werden.

Sie haben OnSuccess() eingerichtet, damit Sie es verwenden können, um das Formular zu analysieren.

function OnSuccess() 
{ 
    if($.validator) 
    { 
     $.validator.unobtrusive.parse("form"); 
    } 

    $("#modalDialog").html(response); 
} 

Visit here für weitere Informationen.

Beachten Sie, dass diese Lösung davon ausgeht, dass Ihre Validierung einwandfrei funktioniert. .

+0

Das Validierungsattribut implementiert 'IClientValidatable' nicht, so dass ein Reparieren nicht notwendig ist (nur sinnloser zusätzlicher Aufwand). –

+0

In diesem Fall funktioniert das nicht wie vorgesehen. – Rohit416

+0

@ Rohit..Lass mich versuchen..danke – Anurag

Verwandte Themen