Wyświetl komunikat o błędzie w wyskakującym okienku jQuery lub w powiadomieniu w MVC 4

Question

Korzystam z funkcji DataAnnotation do sprawdzania poprawności, chcę wyświetlić komunikat o błędzie (adnotacja danych) w wyskakującym okienku (okno dialogowe/alert) zamiast wyświetlać je w widoku ... Zaimplementowałam kod przy użyciu tego linku ..

Szablon projektu jest mobilny Daj mi znać, jeśli czegoś brakuje? http://forums.asp.net/t/1738076.aspx/1

Javascript: -

$('#Test').bind('invalid-form.validate', function (form, validator) { 
    alert('InsideTest'); 
    var $list = $('#errorlist ul:first') 
    if ($list.length && validator.errorList.length) { 
      $list.empty(); 
      $.each(validator.errorList, function() { 
       $("<li />").html(this.message).appendTo(list); 
      }); 
      $list.dialog({ 
       title: 'Please correct following errors:', 
      }); 
} 
}); 
Forgot to add html...  

About.cshtml: -

@model WRDSMobile.Models.Test 

<div id="errorlist" style="display:none"><ul></ul></div>  
@using (Html.BeginForm(null, null, FormMethod.Post, new { name = "Test", id = "Test" })) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 

     <legend>Test</legend> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.Name) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Name) 
      @Html.ValidationMessageFor(model => model.Name) 
     </div> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.Age) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Age) 
      @Html.ValidationMessageFor(model => model.Age) 
     </div> 
      <input type="submit" value="Create" /> 
    </fieldset> 
} 

Answer 1

Nie jestem pewien, czy rozumiem pytanie, ale można ajax post do kontrolera i zwraca częściowy widok. Następnie załaduj częściowy widok do swojego elementu html, a następnie wyskakuj w oknie dialogowym.

[HttpPost] 
    public ActionResult validate(string firstName,string lastName){ 

     //logic here for validation 
     return PartialView(); 
    } 


$.ajax({ 
      type: "POST", 
      data: {firstName: nameVal, lastName: lastNameVal }, 
      url: "/myController/validate", 
      dataType: "html", 
      success: function (data) { 
       if (data) { 
        var dialog = $('<div></div>'); 
        dialog.html(data); 
        dialog.dialog({ 
         resizable: false, 
         modal: true, 
         overflow: false, 
         maxWidth: 1200, 
         maxHeight: 600, 
         width: 1200, 
         height: 600, 
         border: 0, 
         buttons: { 
          "Cancel": function() { //cancel 
           $(this).dialog("close"); 
          } 
         } 

        }); 
       } 
       else { 
        alert("error"); 

       } 
      } 
     }); 

Answer 2

public static metoda void (to ModelStateDictionary ModelState)

{ 
     StringBuilder errors = new StringBuilder(); 
     try 
     { 
      foreach (ModelState model_State in modelState.Values) 
       foreach (ModelError error in model_State.Errors) 
        errors.AppendLine(error.ErrorMessage.ToString()); 
      if (errors.Length > 1) 
       throw new Exception(); 
     } 
     catch (Exception ex) 
     { 
      throw new // your validation helper 
     } 

}

haczyk to Ajax Sukces fałszywej dialogowe Otwórz jquery z tego błędu komunikat o błędzie Note: użyj mvc obsługi błędu to wyśle ​​komunikat o błędzie z ajax success = false

Answer 3

Dodaj poniżej następujące CSS/JS jako ref erance jquery-ui.css, jquery-1.8.2.min.js, jquery-ui-1.8.24.min.js, jquery.validate.min.js, jquery.validate.unobtrusive.min.js

$(document).ready(function() { 
     $('#Test').bind('invalid-form.validate', function (form, validator) { 
      var $list = $('<ul />') 
      if (validator.errorList.length) { 
       $.each(validator.errorList, function (i, entity) { 
        $("<li />").html(entity.message).appendTo($list); 
       }); 
       msgbox('Please correct following errors:', $('<div />').append($list)); 
       return false; 
      } 
     }); 
    }); 

    function msgbox(_title, _messageHtml) { 
     $('<div></div>').appendTo('body') 
        .html(_messageHtml) 
        .dialog({ 
         modal: true, title: _title, zIndex: 10000, autoOpen: true, 
         width: 'auto', resizable: false, 
         buttons: { 
          Ok: function() { 
           // $(obj).removeAttr('onclick');         
           // $(obj).parents('.Parent').remove(); 

           $(this).dialog("close"); 
          } 
         }, 
         close: function (event, ui) { 
          $(this).remove(); 
         } 
        }); 
    };