如何在mvc中加載不同的局部視圖到引導模式4

Question

我有一個登錄局部視圖，它在引導模式中加載，在登錄部分視圖中，我點擊創建新鏈接時創建了一個新的鏈接。

div class="modal-header" style="background-color: gainsboro"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h4 class="modal-title" id="myModalLabel">Sign In</h4> 
</div> 
<div class="modal-body" style="height: 300px"> 
    <form id="frmLogin" class="form-horizontal" role="form"> 
     <div class="form-group"> 
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
      <div class="col-sm-10"> 
       <input type="email" title="email" pattern="^[a-zA-Z0-9._+-]+@("@")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" class="form-control" id="inputEmail3" placeholder="Email" style="width: 400px;" required> 
      </div> 
     </div> 
     <div class="form-group "> 
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
      <div class="col-sm-10"> 
       <input type="password" class="form-control" id="inputPassword3" placeholder="Password" style="width: 400px;" required> 
      </div> 
     </div> 
     <label id="lblInvalidUser" class="errorMessage">Invalid user Credential</label> 
     <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10"> 
       <div class="checkbox"> 
        <label> 
         <input type="checkbox"> 
         Remember me 
        </label> 
       </div> 
       <a class="anchor-horizontal " href="#">Forgot password</a> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10"> 
       <button id="btnLogin" type="button" class="btn btn-danger">Sign in</button> 
      </div> 
     </div> 
    </form> 

</div> 
<div class="modal-footer"> 
    <label style="margin: 40px;">Dont have an account yet</label> 
    @Html.ActionLink("Create a new one", "Register", "Home", null, new { @class = "anchor-horizontal pull-right modal-link" }) 
    @*<a class="anchor-horizontal pull-right" href="#">Create a new one</a>*@ 
</div> 

這是我的登錄局部視圖和以下是我 × 創建新帳戶

<form id="frmLogin" class="form-horizontal" role="form"> 

      <div class="form-group"> 
       <div class="editor-label"> 
        @Html.LabelFor(model => model.USER_EMAIL, "Your Email", new { @class = "col-sm-2 control-label" }) 
       </div> 
       <div class="col-sm-10 editor-field"> 
        @Html.EditorFor(model => model.USER_EMAIL, new { @class = "form-control" }) 
        @Html.ValidationMessageFor(model => model.USER_EMAIL) 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="editor-label"> 
        @Html.LabelFor(model => model.USER_PASSWORD, "Choose Password", new { @class = "col-sm-2 control-label" }) 
       </div> 
       <div class="col-sm-10 editor-field"> 
        @Html.EditorFor(model => model.USER_PASSWORD, new { @class = "form-control" }) 
        @Html.ValidationMessageFor(model => model.USER_PASSWORD) 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="editor-label"> 
        @Html.LabelFor(model => model.USER_CONFIRMPASSWORD, "Confirm Password", new { @class = "col-sm-2 control-label" }) 
       </div> 
       <div class=" col-sm-10 editor-field"> 
        @Html.EditorFor(model => model.USER_CONFIRMPASSWORD, new { @class = "form-control" }) 
        @Html.ValidationMessageFor(model => model.USER_CONFIRMPASSWORD) 
       </div> 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.USER_MOBILENO, "Your Mobile No", new { @class = "col-sm-2 control-label" }) 
      </div> 
      <div class="col-sm-10 editor-field"> 
       @Html.EditorFor(model => model.USER_MOBILENO, new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.USER_MOBILENO) 
      </div> 

      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
        <button id="btnRegister" type="submit" class="btn btn-danger">Create My Account</button> 
       </div> 
      </div> 
    </form> 

</div> 
<div class="modal-footer"> 
    @Html.ActionLink("Back to List", "Login","Home",null,new { @class = "anchor-horizontal pull-left"}) 
</div> 

}

這是我的js這是打開我的模態。

//open bootstrap modal 
$('body').on('click', '.modal-link', function (e) { 
    debugger; 
    e.preventDefault(); 
    $(this).attr('data-target', '#basicModal'); 
    $(this).attr('data-toggle', 'modal'); 
}); 

//Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears 
$('body').on('click', '.modal-close-btn', function() { 
    debugger; 
    $('#basicModal').modal('hide'); 
}); 

//clear modal cache, so that new content can be loaded. 
$('#basicModal').on('hidden.bs.modal', function() { 
    debugger; 
    $(this).removeData('bs.modal'); 
}); 

和我的控制器的動作方法是。

[HttpGet] 
    public ActionResult Register() 
    { 
     return PartialView("_register"); 
    } 

但是當我點擊創建新的它打開註冊視圖在一個完整的頁面而不是模態內。

Answer 1

也許你可以做這樣的事情，加載部分直接模態ATT

<a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal">Click me !</a> 

<!-- Modal --> <div class="modal fade" id="myModal" 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-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 

      </div> 
      <div class="modal-body"><div class="te"></div></div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> </div> <!-- /.modal --> 

Workign小提琴 http://jsfiddle.net/NUCgp/1552/