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和窗体验证

回答

相关问题