2016-12-15 14 views
0

モーダルのポップアップウィンドウの中にネストされた約4つの異なるフォームを持つページがあります。モーダルとフォームの検証

私はこの時点までにフォームごとに1ページしか行っていません。

コントローラに送信したときに、modelStateが有効でないのは、部分ビューに戻るということです。

@validationForメッセージを私のモーダルに表示するにはどうすればいいですか?私のシングルフォームページと同じですか?基本的にはページは変更されませんが、そうであれば、モーダルがまだ表示されているページが返されます。

代わりに、私は何らかのAjax呼び出しを使用する必要がありますか?ここにその事例はありますか?私はこれがおそらく重複したスレッドであるとは確信していますが、自分でリソースを見つけることはできませんでした。

答えて

1

を必要なときにあなただけの、これは作るためにいくつかのjavascriptが必要になりますはい、ロードショーのビューを非表示にすることができますをロードした後、あなたがそれらを登録する必要がモーダルで動的なページをロードする場合この作品。

  1. フォームを保持する部分ビューを作成します。

@using (Html.BeginForm("CreateHighSchoolType", "HighSchool", FormMethod.Post, new { id = "CreateHighSchoolTypeForm" })) 
 
{ 
 
    @Html.ValidationSummary(true) 
 
    <fieldset> 
 
     <legend></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> 
 
     <p> 
 
      <input type="submit" value="Create" id="CreateHighSchoolTypeButton" /> 
 
     </p> 
 
    </fieldset> 
 
}

  • ワイヤアップいくつかのjQuery

  • ですべてを

    public ActionResult CreateHighSchoolTypePartial() 
    { 
        return PartialView(); 
    } 
    
    [HttpPost] 
    public ActionResult CreateHighSchoolTypePartial(LookupEditModel viewModel) 
    { 
        if (!ModelState.IsValid) 
        { 
         return PartialView(viewModel); 
        } 
    
        var hsType = (from t in _highSchoolTypeRepository.FindAll() 
            where t.Name == viewModel.Name 
            select t).FirstOrDefault(); 
    
        if (hsType != null) 
        { 
         ModelState.AddModelError("Name", String.Format("This high school type already exists.", viewModel.Name)); 
         return PartialView(viewModel); 
        } 
    
        _highSchoolTypeRepository.Save(new HighSchoolType 
        { 
         Name = viewModel.Name 
        }); 
    
        return PartialView(); 
    } 
    
  • 部分的なビューを処理するためのコントローラメソッドを作成

    ダイアログ開口

    $("#AddHighSchoolTypeDialog").dialog({ 
     
         position: 'center', 
     
         autoOpen: false, 
     
         modal: true, 
     
         resizable: false, 
     
         draggable: false, 
     
         title: "Add a new high school type", 
     
         open: function (event, ui) { 
     
          //Load the CreateAlbumPartial action which will return 
     
          // the partial view _CreateAlbumPartial 
     
          $(this).load("/HighSchoolType/CreateHighSchoolTypePartial", function() { 
     
           $("form#CreateHighSchoolTypeForm input:first").focus(); 
     
          }); 
     
         }, 
     
         focus: function (event, ui) { 
     
    
     
         }, 
     
         close: function (event, ui) { 
     
          $.ajax({ 
     
           url: "/HighSchoolType/GetAllHighSchoolTypes", 
     
           type: "GET", 
     
           success: function (data) { 
     
            $("#HighSchoolTypeId option").remove(); 
     
            $.each(data, function (key, value) { 
     
             $('#HighSchoolTypeId') 
     
                .append($("<option></option>") 
     
                .attr("value", key) 
     
                .text(value)); 
     
            }); 
     
           } 
     
          }); 
     
          //$("#AddHighSchoolTypeDialog").remove(); 
     
         }, 
     
         width: 600 
     
        });

    とポスト

    $("#CreateHighSchoolTypeButton").live('click', function() { 
     
         $.ajax({ 
     
          url: "/HighSchoolType/CreateHighSchoolTypePartial", 
     
          type: "POST", 
     
          data: $("#CreateHighSchoolTypeForm").serialize(), 
     
          error: function (data) { 
     
           var errorMessage = $.parseJSON(data.responseText); 
     
          }, 
     
          success: function (data) { 
     
           if (data) { 
     
            $('#AddHighSchoolTypeDialog').html(data); 
     
           } 
     
           else { 
     
            $('#AddHighSchoolTypeDialog').html('no data'); 
     
           } 
     
          } 
     
         }); 
     
    
     
         return false; 
     
        });

    注どのように何をしてモーダルのHTMLを置き換えるために、成功した場合にあなたの必要性ポストcから返されたすべて。

  • 0

    あなたがやっていることは、1ページに複数のフォームを作成しようとしていることです。このようなものを試すことができます。 -

     @using (Html.BeginForm("Login", "Member", FormMethod.Post, new {})) { 
    
         @Html.LabelFor(m => m.LoginUsername) 
         @Html.TextBoxFor(m => m.LoginUsername) 
    
         @Html.LabelFor(m => m.LoginPassword) 
         @Html.TextBoxFor(m => m.LoginPassword) 
    
         <input type='Submit' value='Login' /> 
    
        } 
    
        @using (Html.BeginForm("Register", "Member", FormMethod.Post, new {})) { 
    
         @Html.LabelFor(m => m.RegisterFirstName) 
         @Html.TextBoxFor(m => m.RegisterFirstName) 
    
         @Html.LabelFor(m => m.RegisterLastName) 
         @Html.TextBoxFor(m => m.RegisterLastName) 
    
         @Html.LabelFor(m => m.RegisterUsername) 
         @Html.TextBoxFor(m => m.RegisterUsername) 
    
         @Html.LabelFor(m => m.RegisterPassword) 
         @Html.TextBoxFor(m => m.RegisterPassword) 
    
         <input type='Submit' value='Register' /> 
    } 
    

    1ページ内で試すことができます。

    あなたは、このリンク上で答えを確認することができます - asp.net MVC 4 multiple post via different forms

    0

    控えめな検証が唯一のページのロードに存在するフォーム上で動作します。彼らは

    $.validator.unobtrusive.parse("#formid") 
    

    または