Question

我有三个标签。选项卡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>

Answer 1

我想自从使用了jquery之后你只将事件附加到一个#frm元素:)尝试.Live

Answer 2

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

在ajax post之后，MVC选项卡第二个选项卡未正确加载

2 个答案: