不显眼的ajax - 视图被部分视图完全取代

Question

我搜索了多个示例，并尝试了一些方法来使其正常工作。目前我试图通过使用指向PartialViewResult方法的Ajax.HtmlLink来替换div。

我试过

• 检查网络和JavaScript控制台以确保我的.js都已加载
• 分拆stock jqueryval包并手动包含脚本
• 仔细检查我没有另一个具有相同更新目标标识的DOM元素
• 检查我的ajaxoptions以确保一切正确

我知道不引人注意的是因为我的电子邮件重复远程验证检查工作正常。

我现在将展示调试过程的一些屏幕截图

以下是ajax加载之前页面的样子

我的目标是更换当前持有电子邮件，名称和邮政编码值的右侧容器

结果是##

这是我的视图代码

<div class="container">
<br />
<br />
<div class="row">
    <div class="col-sm-3">
        <div class="sidebar-account">
            <div class="row ">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">My Account</div>
                        <div class="panel-body">
                            <ul class="nav">
                                <li>
                                    <a class="active" href="account_dashboard.html">Me</a>
                                </li>
                                <li>
                                    @Ajax.ActionLink("Alerts", "ManageAlerts", null, new AjaxOptions
                               {
                                   HttpMethod = "GET",
                                   UpdateTargetId = "ajax-update",
                                   InsertionMode = InsertionMode.Replace,
                                   OnBegin = "ajaxBegin",
                                   OnFailure = "ajaxFail",
                                   OnComplete = "ajaxComplete",
                                   OnSuccess = "ajaxSuccess"
                               }, new { @class = "active" })
                                </li>
                                <li>
                                    <a class="active" href="account_account.html">Linked Accounts</a>
                                </li>
                                <li>
                                    <a class="active" href="account_ads.html">Manage ads</a>
                                </li>
                                <li>
                                    <a class="active" href="account_ad_create.html">Create new ad</a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="row hidden-xs">
                <div class="col-lg-12">
                    <div class="well">
                        <div class="row ">
                            <div class="col-lg-3">
                                <img src="css/images/icons/Crest.png" width="45" />
                            </div>
                            <div class="col-lg-9">

                                <h4 style="margin-top: 0">Increase visibility</h4>
                                <p>Don't forget to 'bump' your listing to gain more visibility</p>

                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="col-sm-9">
        <div id="ajax-update">
            @Html.Partial("_ManageUserAccount", Model)
        </div>

    </div>
    <br />

</div>

部分查看代码##

<div id="fadein-div">
<div class="panel panel-default">
    <div class="panel-heading">@Model.Username : Alerts</div>
    <div class="panel-body">
        <br />
        <div class="row">
            <div class="col-sm-12">
                <p><span style="font-weight:bold">Change your alerts!</span></p>
            </div>
        </div>

        <br />

        @using (Html.BeginForm("ManageAlerts", "Account", FormMethod.Post, new { @class = "form-vertical", role = "form" }))
        {
            @Html.AntiForgeryToken()
            <fieldset>
                <div class="row">
                    <div class="col-sm-12 ">

                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-2">
                                    <div class="checkbox">
                                        @Html.CheckBoxFor(P => P.EmailAlertsOn) @Html.LabelFor(P => P.EmailAlertsOn)
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div id="control-div">
                            <div class="form-group">
                                <h3>Email alert options</h3>
                            </div>

                            <div class="form-group">
                                <div class="checkbox">
                                    @Html.CheckBoxFor(P => P.EmailOnNewMessageOn) @Html.LabelFor(P => P.EmailOnNewMessageOn)
                                </div>
                                <div class="text-danger">
                                    @Html.ValidationMessageFor(P => P.EmailOnNewMessageOn)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    @Html.CheckBoxFor(P => P.EmailOnReplyOn) @Html.LabelFor(P => P.EmailOnReplyOn)
                                </div>
                                <div class="text-danger">
                                    @Html.ValidationMessageFor(P => P.EmailOnReplyOn)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    @Html.CheckBoxFor(P => P.EmailOnAccountUpdateOn) @Html.LabelFor(P => P.EmailOnAccountUpdateOn)
                                </div>
                                <div class="text-danger">
                                    @Html.ValidationMessageFor(P => P.EmailOnAccountUpdateOn)
                                </div>
                            </div>

                        </div>


                        <br />
                        <button type="submit" class="btn btn-primary">Save details</button> &nbsp;&nbsp;


                    </div>




                </div>
            </fieldset>
        }


    </div>
</div>

最后，控制器代码##

 [HttpGet]
    public PartialViewResult ManageAlerts()
    {
        var user = UserManager.FindById(Guid.Parse(User.Identity.GetUserId()));
        Models.Account.ManageAlertsViewModel vm = new ManageAlertsViewModel();
        vm.Username = user.UserName;
        vm.EmailAlertsOn = user.EmailAlertsOn;
        vm.EmailOnAccountUpdateOn = user.EmailOnAccountUpdateOn;
        vm.EmailOnNewMessageOn = user.EmailOnNewMessageOn;
        vm.EmailOnReplyOn = user.EmailOnReplyOn;

        return PartialView("_ManageAlerts", vm);
    }  


<!-- js library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/bootstrap.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/jquery.icheck.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/waypoints.min.js"></script>

<!-- authenty js -->
<script src="~/Themes/Authenticity%20Forms/Authenty/js/authenty.js"></script>

<!-- preview scripts -->
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/jquery.malihu.PageScroll2id.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/jquery.address-1.6.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/scrollTo.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/init.js"></script>



@Scripts.Render("~/bundles/jqueryval")