0

我对 MVC 4 和 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 回发之后，Bootstrap 样式丢失并且选择元素恢复为标准浏览器选择。为了解决这个问题，我有

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

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

第二个问题是：当用户点击 id="edit-name" 的链接时，id="field-name" 的 div 滑出，表单字段（在 id="field-edit-name 的 div 内") 滑入。这很好用。但是，当单击保存按钮时，我希望表单字段滑回并滑出链接。我认为 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>

谢谢。

4

1 回答 1

0

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

在视图中你可以有类似的东西

$("#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.
            }
        });
}
于 2013-09-10T15:57:21.437 回答