Modals和窗體驗證

我有一個頁面，它有大約4種不同的窗體嵌套在自己的模式彈出窗口中。Modals和窗體驗證

在這一點之前，我只做過一個表格。

當我提交給控制器並且我的modelState無效時，會發生什麼情況是它會回到我的部分視圖。

如何使@validationFor消息顯示在我的模式中，就像在單個頁面上一樣？基本上這個頁面不會改變，但是如果是這樣的話，它會返回模態仍在的頁面。

這是否需要我使用某種Ajax調用？在這裏有沒有任何例子？我很確定這可能是一個重複的線程，但是我找不到任何資源。

來源

2016-12-15 Travis Tubbs

時，是的，這將需要一些JavaScript來使這項工作。

創建部分視圖來保存表單。

@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> 
 
}

創建一個控制器的方法來處理該局部視圖

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(); 
}

導線了一切與一些jquery的

對話開幕

$("#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返回所有。

來源

2016-12-15 16:28:49 Fran

根據我的理解，你正在做的是試圖在一個頁面中有多個表單。你可以嘗試這樣的事情 -

 @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' /> 
}

在一個單一的頁面內。

您可以在此鏈接查看答案 - asp.net MVC 4 multiple post via different forms

來源

2016-12-15 16:02:51 Dhanashree

不顯眼的驗證將只在頁面加載存在的形式工作。如果要加載的模態動態頁面需要註冊他們，他們加載

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

後，或者你可以隱藏加載和顯示的看法需要

來源

2016-12-15 16:15:24 KevDevMan

Modals和窗體驗證

回答

相關問題