2

, 나는 모달 창을 열고 오전 :ASP.Net 면도기 MVC 부트 스트랩 로그인 모달 검증

<div class="container-fluid"> 
    <div class="navbar navbar-fixed-top navbar-default"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand pull-right" href="#"> 
       <img src="assets/img/logo-header.png" alt="Alternate Text for Image"> 
      </a> 
     </div> 

     <div class="navbar-offcanvas offcanvas navmenu-fixed-left"> 
      <a class="navmenu-brand" href="#">eServices</a> 
      <ul class="nav nav-justified"> 
       <li><a href="#" data-toggle="modal" data-target="#modalSignup" data-backdrop="static">New Here?</a></li> 
       <li><a href="index.html">Services</a></li> 
       <li><a href="#" data-toggle="modal" data-target="#modalLogin" data-backdrop="static">Sign In</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <p> 
        <h3 class="modal-title" id="myModalLabel">Login to MyApplication</h3> 
       </p> 
      </div> 

       @using (Html.BeginForm("index", "home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { role = "form", @class = "form-horizontal" })) 
       { 
        @Html.AntiForgeryToken() 
        <div class="form-group @Html.ValidationErrorFor(m => m.Username, "has-error has-feedback")"> 
         <div class="col-sm-12"> 
          @Html.FormTextBoxFor(p => p.Username, new { @class = "form-control" }) 
          @if (!Html.IsValid(m => m.Username)) 
          { 
           <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
          } 
          @Html.ValidationMessageFor(m => m.Username, null, new { @class = "help-block" }) 
         </div> 
        </div> 
        <div class="form-group @Html.ValidationErrorFor(m => m.Password, "has-error has-feedback")"> 
         <div class="col-sm-12"> 
          @Html.FormPasswordFor(p => p.Password, new { @class = "form-control" }) 
          @if (!Html.IsValid(m => m.Password)) 
          { 
           <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
          } 
          @Html.ValidationMessageFor(m => m.Password, null, new { @class = "help-block" }) 
         </div> 
        </div> 
        @Html.ValidationSummary(true, string.Empty, new { @class = "test" }, "span") 
        <div class=" pull-right"> 
         <p> 
          <button type="submit" class="btn btn-default">@Forms.ButtonSignin</button> 
         </p> 
         <br /> 
         <p> 
          @Html.ActionLink("Forgot your username?", "ForgotUsername") 
         </p> 
         <p> 
          @Html.ActionLink("Forgot your password?", "ForgotPassword") 
         </p> 
        </div> 
       } 
     </div> 
    </div> 
</div> 
내가 가진 문제는 예를 들어, 내가 잘못된 사용자 이름/암호를 입력한다는 것입니다

폼의 유효성을 검사하지만 모달 창이 닫힙니다. 유효성 검사에서 오류가 발생하면 양식이 게시 된 후 모달 창을 다시 열 수 있습니까? 당신은 즉

public class AModel 
{ 
    public bool IsModalShown { get; set; } 
} 

IsModalShown이보기 즉, 모달 true로 숨겨진 값을 설정 열립니다

@Html.HiddenFor(m => m.IsModalShown) 

,이 의지에 대한 숨겨진이 렌더링라는 이름의 속성을 추가 할 수

답변

1

모달 상태가 컨트롤러 동작에 다시 게시되도록합니다. 즉

$('#modalLogin').on('show.bs.modal', function (e) { 
    $('#IsModalShown').val(true); 
}) 

위가 사용중인 부트 스트랩의 버전에 따라 달라집니다 있습니다 만

가 자동으로 내가 있었다

$(function(){ 
    @if(Model.IsModalShown) 
    { 
     $('#signin_modal').modal('show'); 
    } 
}); 
0

그것을 팝업보기에 다음을 추가 공식 사이트의 다른 문서가있다 비슷한 문제가 있지만보기에 모델이 없습니다. 누군가를 도울 수 있도록 내 솔루션 게시. TempData (Batuta가 묻는 잘못된 로그인/암호 조합의 경우)에 저장된 오류 메시지를 표시하려고합니다. 모달 창에서 메시지를 표시

public ActionResult SignIn(string login, string password) 
    { 
     if (Membership.ValidateUser(login, password)) 
     { 
      // something 
     } 
     else 
     { 
      TempData["message-error"] = "Wrong combination"; 
     } 
     return RedirectToAction("Index", "Home"); 
    } 

:

컨트롤러

@if (TempData["message-error"] != null) 
{ 
@TempData["message-error"] 
} 

열기 지수 모달 :

@if (TempData["message-error"] != null) 
{ 
<script type="text/javascript"> 
    $('#myModal').modal('show'); 
</script> 
} 

어쩌면 깨끗하지,하지만 나를 위해 작동합니다.