在 ajax 发布后，MVC 选项卡的第二个选项卡无法正确加载答案

【问题标题】：MVC tabs second tab not loading properly after ajax post在 ajax 发布后，MVC 选项卡的第二个选项卡无法正确加载
【发布时间】：2015-01-18 21:39:10
【问题描述】：

我有三个标签。选项卡 2 和 3 加载带有要通过 ajax 发布的表单的部分视图。第二个选项卡可以正常发布，然后返回到第二个选项卡，但是第三个选项卡需要我在 ajax 工作之前点击浏览器刷新按钮，否则，ajax 不起作用，它只是通过 html.beginform() 发布并且只是加载没有发布后的 _layout.chstml。为什么我必须在 ajax 工作之前点击刷新？

<script src="~/Scripts/jquery.cookie.js"></script>

<div id="tabs">
    <ul>        
            <li><a href="#tabs-1">General</a></li>            
            <li>
                @Ajax.ActionLink("Items", "Item", "Test", null, null)
            </li>
            <li>
                @Ajax.ActionLink("Total", "Total", "Test", null, null)
            </li>                         
        </ul>

        <div id="tabs-1">
        1st tab data here...
        </div>


</div>

<script>
    $(document).ready(function () {
        //initialize tabs plugin with listening on activate event
        var tabs = $("#tabs").tabs({           
            activate: function (event, ui) {
                //get the active tab index
                var active = $("#tabs").tabs("option", "active");

                //save it to cookies
                $.cookie("activeTabIndex", active);

            }
        });

        //read the cookie
        var activeTabIndex = $.cookie("activeTabIndex");        

        //make active needed tab
        if (activeTabIndex !== undefined) {
            tabs.tabs("option", "active", activeTabIndex);
        }                     

    });

</script>

从控制器加载的 Tab 2 局部视图

@model Mvc.Models.Test

@using (Html.BeginForm("AjaxItemForm", "Test", FormMethod.Post, new { id = "frm" }))
{

    @Html.EditorFor(model => model.Name)

    <input type="submit" value="Submit" />

    <div id="result">
        @Html.Action("ShowTestList", "Test")
    </div>
}

<script type="text/javascript">

    $(document).ready(function () {             

        $(function() {
            $("#frm").on("submit", function(e) {
                e.preventDefault();
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (data) {
                        // update DIV with new data
                        $('#result').html(data);                        

                    },
                    error: function (data) {
                        $('#result').html("error");
                    }                    
                });                               

            });

        });

    });
</script>

【问题讨论】：

标签： jquery ajax asp.net-mvc asp.net-mvc-4 tabs

【解决方案1】：

我想既然使用了 jquery on，你只能将事件附加到一个 #frm 元素:) 试试 .Live

【讨论】：

.Live() 现已针对多个版本进行了贬值。 .On() 是可接受的首选方法。

【解决方案2】：

我发现了问题。我没有为表单使用唯一 ID。在每个部分视图中，我使用相同的 id 作为表单名称。我还将每个部分视图的所有元素 id 更改为唯一 id，它似乎已经解决了这个问题。

【讨论】：