MVC 4 Ajax和jQuery在表单post后的滑动切换

Question

我对MVC4和Ajax有几个问题。

我的观点很基本：

<div id="sName">
    @Html.Partial("PartialName", Model)
</div>
<script type="text/javascript">
    $(function () {
        $("select").selectpicker({ style: 'btn', menuStyle: 'dropdown' }); // I use a Bootstrap mod
    });
</script>

以下是我的部分观点：

@using (Ajax.BeginForm("UpdateProfile", "Account", new { form = "name" }, new AjaxOptions { UpdateTargetId = "sName", OnSuccess = "NameUpdated", HttpMethod = "POST" }))
{
    <span>Name</span>
    <div id="field-name">
        <a id="edit-name" href="#" title="Click here to update your name">@Model.User.Firstname @Model.User.Middlename @Model.User.Surname</a>
    </div>
    <div id="field-edit-name" style="display: none;">
        <input type="text" name="firstname" value="@Model.User.Firstname" />
        <input type="text" name="middlename" value="@Model.User.Middlename" /></div>
        <input type="text" name="surname" value="@Model.User.Surname" />
        <button>Save</button>
        <button id="cancel-name">Cancel</button>
    </div>
    <script type="text/javascript">
        $(function () {
            $("select").selectpicker({ style: 'btn', menuStyle: 'dropdown' });
            $("#edit-name, #cancel-name").on('click', function (e) {
                e.preventDefault();
                $("#field-edit-name").slideToggle(450);
                $("#field-name").slideToggle(450);
            })
        function NameUpdated() {
            $("#field-edit-name").slideToggle(450);
            $("#field-name").slideToggle(450);
        }
    </script>
}

这是我的帐户控制器：

public ActionResult Index()
{
    MyModel Model = new MyModel();
    return View(Model);
}

[HttpPost]
public ActionResult UpdateProfile(string form, FormCollection c)
{
    switch (form)
    {
        case "name":
            // Update name and Model
            return PartialView("PartialName", Model);
        case "email":
            // Update email and Model
            return PartialView("PartialEmail", Model);
        case "address":
            // Update address and Model
            return PartialView("PartialAddress", Model);
        default :
            break;
    }
    return View();
}

第一个问题是：我将JQuery函数称为“$（”select“）.SelectPicker（{style:'btn',MenuStyle:'dropdown'}）；”在视图中，因为我将使用许多Bootstrap选择（都在不同的部分视图中），并且将其仅放在一个地方是有意义的。但是，我发现在上面部分视图中的Ajax回发之后，引导样式丢失了，并且select元素恢复到标准的浏览器选择。为了避开这件事我

$(function () {
    $("select").selectpicker({ style: 'btn', menuStyle: 'dropdown' });

在局部视图中也是如此。这并不理想，那么有没有更好的方法在Ajax回发后保持selects样式为Bootstrap而不必重复代码呢？

第二个问题是：当用户单击id=“edit-name”的链接时，id=“field-name”的div滑出，表单字段（id=“field-edit-name”的div内部）滑入。这个很管用。但是，当单击save按钮时，我希望表单字段滑回，链接滑回。我以为Ajax选项onsuccess=“nameupdated”可以做到这一点，但Ajax回发似乎正在刷新部分视图（使字段突然消失，链接重新出现，就好像页面被刷新了一样）。我知道Ajax正在正常工作，因为页面上的滚动位置没有丢失。我做错了什么？

我在布局页面中引用了以下JS文件：

<script src="/common/js/jquery-1.8.3.min.js"></script>
<script src="/common/js/jquery.ui.touch-punch.min.js"></script>
<script src="/common/js/bootstrap.min.js"></script>
<script src="/common/js/bootstrap-select.js"></script>
<script src="/common/js/bootstrap-switch.js"></script>
<script src="/common/js/jquery.tagsinput.js"></script>
<script src="/common/js/jquery.placeholder.js"></script>
<script src="/common/js/bootstrap-typeahead.js"></script>
<script src="/common/js/jquery.stacktable.js"></script>
<script src="/common/js/jquery.unobtrusive-ajax.min.js"></script>

多谢了。

Answer 1

对于第一个问题，您可以查看可能有自定义事件，该事件在加载部分视图时触发。

在视图中，您可以看到类似的内容

$("#sName").on("customevent",function(){ //apply style here etc.... });

在部分视图脚本中，您可以有如下内容

$("#sName").trigger("customevent");

对于第二个问题，我会建议重写表单的提交，这样您就可以完全控制所发生的事情。

$("#form").on("submit", function(event) {
event.preventDefault();
var url = $(this).attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            data: $(this).serialize(),
            success: function(data) {
             //Successful post, do work.
            }
        });
}