在Bootstrap模式asp.net mvc中打开视图?

时间:2014-04-06 09:54:44

标签: jquery asp.net asp.net-mvc twitter-bootstrap

<div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-url='@Url.Action("Register","Account")'>
    <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" id="H1">Sign Up</h4>
            </div>
            <div class="modal-body" id="modalsignupbody">

            </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>
    </div>
</div>



<button type="submit" id="SignUpbtn" class="btn btn-warning">Sign Up</button>

控制器:

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

JQUERY:

  $('#SignUpbtn').click(function () {
            var url = $('#signup').data('url');

            $.get(url, function (data) {
                $('#modalsignupbody').html(data);

                $('#signup').modal('show');
            });
        });

有人可以帮帮我吗?

错误:模态没有打开页面只是刷新

部分视图代码:

  @model BrightFolio.Models.RegisterModel
@{
    ViewBag.Title = "Register";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>Create a new account.</h2>
</hgroup>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                @Html.PasswordFor(m => m.ConfirmPassword)
            </li>
        </ol>
        <input type="submit" value="Register" />
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

1 个答案:

答案 0 :(得分:1)

在您的视图中使用以下

<div id='signup' class='modal hide fade in' data-url='@Url.Action("Register","Account")'>
   <div id='modal-content'>

   </div>
</div>

    <button type="submit" id="SignUpbtn" class="btn btn-warning">Sign Up</button>

在您的脚本中使用

$(document).ready(function() {
   $('#SignUpbtn').click(function() {
        var url = $('#signup').data('url');

        $.get(url, function(data) {
            $('#modal-content').html(data);

            $('#modal-content').modal('show');
        });
   });
});