Question

我对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样式将丢失，并且select元素将恢复为标准浏览器选择。为了解决这个问题，我有

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

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

第二个问题是：当用户点击id =“edit-name”的链接时，带有id =“field-name”的div滑出，表单字段（在id =“field”的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>

感谢。

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.
            }
        });
}

表单发布后MVC 4 Ajax和jquery slidetoggle

1 个答案: