2011-06-28 19 views
0

jquery UIダイアログに動的にロードしました。今、このダイアログにクライアント側の検証を追加したいと思います。私はScott GuのBlogを試してみましたが、正常に機能していますが、通常のUrlだけを使用しているときにダイアログに影響しません(ダイアログにフォームを使用すると「タイトルが必要です」というエラーメッセージは表示されません)。 jquery.validateをJqueryモーダルダイアログ内のMvc2クライアントサイド検証に質問する回答と同様のルールとメッセージで試しましたか?ダイアログには何も表示されず、[送信]ボタンをクリックするとまだ成功と表示されます。 (私は確信しています)JQueryダイアログクライアント側の検証が「必須!!」フィールドをasp.net mvc2

私は苦労している最大の長さの入力が、その最小の長さと必要なデータフィールドを防ぐためにヘルパークラスを操作することができます。私はMvcJQueryValidationのように考えることができるすべてのjavascriptを使用しようとしましたが、まだ何もありません。

誰もがここで

答えて

1

に感謝助けてくださいあなたが進むことができる方法の例です。いつものように部分的な内部形状データを表現するビューモデルで開始:

public class MyViewModel 
{ 
    [Required] 
    public string Foo { get; set; } 
    public string Bar { get; set; } 
} 

そしてコントローラ:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult Dialog() 
    { 
     return PartialView(new MyViewModel()); 
    } 

    [HttpPost] 
    public ActionResult Dialog(MyViewModel model) 
    { 
     if (!ModelState.IsValid) 
     { 
      return View(model); 
     } 

     // TODO: the model is valid => process ... 
     return Json(new { success = "thanks for submitting" }); 
    } 
} 

、最終的にビューを。

~/Views/Home/Index.aspx

<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Home Page 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

<script type="text/javascript" src="<%: Url.Content("~/scripts/jquery-1.4.1.js") %>"></script> 
<script type="text/javascript" src="<%: Url.Content("~/scripts/jquery-ui-1.8.11.js") %>"></script> 
<script type="text/javascript" src="<%: Url.Content("~/scripts/MicrosoftAjax.js") %>"></script> 
<script type="text/javascript" src="<%: Url.Content("~/scripts/MicrosoftMvcValidation.js") %>"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#show').click(function() { 
      $('#dialog').load(this.href, function (result) { 
       Sys.Mvc.FormContext._Application_Load(); 
       $('#myForm').submit(function() { 
        if (!Sys.Mvc.FormContext.getValidationForForm(this).validate('submit').length) { 
         $.post(this.action, $(this).serialize(), function (data) { 
          if (data.success) { 
           alert(data.success); 
           $('#dialog').dialog('close'); 
          } else { 
           $('#dialog').html(data); 
          } 
         }); 
        } 
        return false; 
       }); 
      }).dialog({ autoOpen: true }); 
      return false; 
     }); 
    }); 
</script> 

<%= Html.ActionLink("Show jquery dialog", "Dialog", null, new { id = "show" })%> 

<div id="dialog"></div> 

</asp:Content> 

、最終的には部分的(~/Views/Home/Dialog.ascx):

ダイアログは、フォームがDOMに注入されてロードされると、重要な部分が起こる
<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" %> 

<% Html.EnableClientValidation(); %> 

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" })) { %> 
    <div> 
     <%= Html.EditorFor(x => x.Foo)%> 
     <%= Html.ValidationMessageFor(x => x.Foo) %> 
    </div> 
    <div> 
     <%= Html.EditorFor(x => x.Bar)%> 
     <%= Html.ValidationMessageFor(x => x.Bar) %> 
    </div> 
    <input type="submit" value="OK" /> 
<% } %> 

=>あなたがする必要がありますSys.Mvc.FormContext.getValidationForFormメソッドを使用して検証規則を再解析します。

関連する問題