mvc5 bootstap 3模态表单未验证客户端并且正在回发到页面 [英] mvc5 bootstap 3 Modal Form not validating client-side and is posting back to page

问题描述

你好我不打开boostrap模型登录get requset工作正常但是将它发布在另一页我的代码：



菜单部分链接模型（Bootstrap模型）：

hello i wont to open boostrap model as Login the get requset work fine but is post it in another page this my code:

menu partial the link the the model(Bootstrap Model):

<li><a class="btn btn-primary" href="@Url.Action("Login", "Account", new object{})" data-toggle="modal" data-target="#LoginModel">Login</a></li>

部分模型视图：

the partial model view:

@Html.AntiForgeryToken()

<div class="modal fade" id="LoginModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>


<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@section Scripts {
    <script type="text/javascript">
        $('#LoginModel').on('shown.bs.modal', function () {
            alert("sd");
            jQuery.validator.unobtrusive.parse($(this));

        })
    </script>
}

LoginView：

the LoginView:

@model WebApplication4.Models.Login

@{
    ViewBag.Title = "Login";
    Layout = "";

    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.Url = Url.Action("Login", "Account");
    options.UpdateTargetId = "modalForm";
    options.InsertionMode = InsertionMode.Replace;
}

<div class="container">
    @using (Ajax.BeginForm("Login", "Account", null, options, new { @class = "form-horizontal", role = "form" }))
    {
        @Html.AntiForgeryToken()


        <div id="modalForm" style="background-color:white">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="LoginModel">Login</h4>
            </div>
            <div class="modal-body">

                @Html.AntiForgeryToken()
                @Html.ValidationSummary("", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Remember, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="checkbox">
                            @Html.EditorFor(model => model.Remember)
                            @Html.ValidationMessageFor(model => model.Remember, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Login</button>
            </div>
        </div>

    }
</div>

< b>现在我按下登录上的菜单按钮，这样我就可以打开bootsrtap模型了。

现在当我发布i重定向到anoter页面时我得到了login.cshtml

不在bootstrap模型中。





i编辑配置键：

Now I press the menu button on the "login" so I get the bootsrtap model open.
now when i post i redirect to anoter page i get the login.cshtml
not in the bootstrap model .


i edit the config the keys:

  <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
<pre>

i think maby in the model the the query parese is worg.
<pre>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@section Scripts {
    <script type="text/javascript">
        $('#LoginModel').on('shown.bs.modal', function () {
            alert("sd");
            jQuery.validator.unobtrusive.parse($(this));

        })
    </script>
}

推荐答案

（'＃LoginModel'）。on（'shown.bs.modal'，function（）{
alert（sd）;
jQuery.validator.unobtrusive.parse（

('#LoginModel').on('shown.bs.modal', function () { alert("sd"); jQuery.validator.unobtrusive.parse(

（this））;

}）
< / script>
}

(this)); }) </script> }

LoginView：

the LoginView:

@model WebApplication4.Models.Login

@{
    ViewBag.Title = "Login";
    Layout = "";

    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.Url = Url.Action("Login", "Account");
    options.UpdateTargetId = "modalForm";
    options.InsertionMode = InsertionMode.Replace;
}

<div class="container">
    @using (Ajax.BeginForm("Login", "Account", null, options, new { @class = "form-horizontal", role = "form" }))
    {
        @Html.AntiForgeryToken()


        <div id="modalForm" style="background-color:white">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="LoginModel">Login</h4>
            </div>
            <div class="modal-body">

                @Html.AntiForgeryToken()
                @Html.ValidationSummary("", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Remember, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="checkbox">
                            @Html.EditorFor(model => model.Remember)
                            @Html.ValidationMessageFor(model => model.Remember, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Login</button>
            </div>
        </div>

    }
</div>

< b>现在我按下登录上的菜单按钮，这样我就可以打开bootsrtap模型了。

现在当我发布i重定向到anoter页面时我得到了login.cshtml

不在bootstrap模型中。





i编辑配置键：

Now I press the menu button on the "login" so I get the bootsrtap model open.
now when i post i redirect to anoter page i get the login.cshtml
not in the bootstrap model .


i edit the config the keys:

  <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
<pre>

i think maby in the model the the query parese is worg.
<pre>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@section Scripts {
    <script type="text/javascript">

（'＃LoginModel'）。on（'显示.bs.modal'，function（）{
alert（sd）;
jQuery.validator.unobtrusive.parse（

('#LoginModel').on('shown.bs.modal', function () { alert("sd"); jQuery.validator.unobtrusive.parse(

这篇关于mvc5 bootstap 3模态表单未验证客户端并且正在回发到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！