Question

场合

我正在开发一个应用程序，其中我有一个包含三个字段的表，我通过单击按钮向该表添加项目并在我添加值的位置加载模式弹出窗口。

问题

我在我的控制器中进行了验证。如果由于任何原因验证失败，我想在表单上显示错误。问题，当我提交并发生验证错误时，表单会转到我的编辑视图，并将浏览器重定向到该页面。因此，不是我的链接“http://localhost:1979/Crops/Edit/34”仍然作为模态，浏览器实际上重定向到它，我的css / bootstrap / modal丢失了。

我尝试了什么

1）我试图使用ajax，以便我的页面不会刷新或重定向所以我有

@using (Ajax.BeginForm("Edit", "Crops", null,  new { @class = "form-horizontal", role = "form" }))
{

2）我已将jquery validate添加到我的脚本中，如下所示

<head>
    <meta charset="utf-8">
    <title> </title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script src="/scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</head>

3）我确认它也在我的网络配置中。

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

尽管如此，当点击提交时，我的页面仍然会将我带到显示验证的编辑页面。感谢我能得到帮助，所以当我提交时，它会以模态形式显示验证，而不是转到编辑页面。

我添加了编辑页面以及调用下面模型的索引页面

编辑页面

@model PSLicense_app.Models.HOLD_cropsGrown

@{
    ViewBag.Title = "Edit";
}
<head>
    <meta charset="utf-8">
    <title> </title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script src="/scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</head>


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Edit Crop Grown</h4>
</div>
<h2> </h2>
@using (Ajax.BeginForm("Edit", "Crops", null,  new { @class = "form-horizontal", role = "form" }))
{
@*@using (Html.BeginForm())
{*@
    <div class="modal-body">
        @Html.AntiForgeryToken()

        @Html.HiddenFor(model => model.availSell)
        <div class="form-horizontal">
            <h4></h4>
            <hr />
            @Html.ValidationSummary(true)
          @Html.HiddenFor(model => model.Holding_ID)

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
           --Fields here
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Edit" />
    </div>
}

索引（在模态代码上方编辑按钮调用）

@{
    ViewBag.Title = "Index";
}

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

     <h2></h2>
    <!-- modal placeholder-->
    <div id='myModal' class='modal fade in'>
        <div class=" modal-dialog">
    <div class="modal-content">
        <div id='myModalContent'  ></div>
    </div>
</div>
    </div>
@using GridMvc.Html


    <div class="panel panel-default">
        <div class="panel-heading">

        </div>



        <table class="table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Numof)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.availSell)
                </th> 

            </tr>


            @foreach (var item in Model)
{
    <tr>
        <th>
            @Html.DisplayFor(modelItem => item.id)
        </th>
        <td>
            @Html.DisplayFor(modelItem => item.Numof)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.availSell)
        </td>

<th>


        @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-pencil'></span>", "Edit", "Edit", "Crops", routeValues: new { id = item.id }, htmlAttributes: new { data_modal = "", @class = "btn btn-default modal-link" })


</th>


    </tr>
}

        </table>

    </div>

    <!-- Modal -->
    <div id="modal-container" class="modal fade" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div style="text-align:center">
                    <img src="~/Content/images/loader.gif" alt="Loading Please Wait test" />
                </div>
            </div>
        </div>
    </div>
</div>
    <script type="text/javascript">

        $(function () {
            // Initialize modal dialog
            // attach modal-container bootstrap attributes to links with .modal-link class.
            // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
            $('body').on('click', '.modal-link', function (e) {
                e.preventDefault();
                $(this).attr('data-target', '#modal-container');
                $(this).attr('data-toggle', 'modal');
            });
            //clear modal cache, so that new content can be loaded
            $(document).on("hidden.bs.modal", function (e) {
                $(e.target).removeData("bs.modal").find(".modal-content").replaceWith('<div class="modal-content"><div class="modal-body"><div style="text-align:center"><img src="/../Content/images/loader.gif" alt="Loading Please Wait" /></div></div></div>');

            });
            //Diable diabledtabs
            $('ul.nav> li.disabled > a').click(function () { return false; });

        });
    </script>

模态表单在返回验证时刷新到主页面而不是在模态

0 个答案: