asp.net mvc jquery 选项卡

Question

我正在查看 here 以使用 jQuery 在 asp.net mvc 中创建一个动态选项卡。

我的视图中有一个添加按钮，它将调用 jquery 函数以通过 ajax 转到 url 并返回一个使用

的 partialView

Html.BeginCollectionItem()

到目前为止，我已经为我的选项卡（例如：Employee1，Employee2）增加了计数器，并且可以带来部分视图并在选项卡内容中呈现它，但是我在 Employee1 选项卡内容中输入的信息被直接复制并在 Employee2 内容中重新生成。 （例如：Employee1 内容中的 FullName 出现在 Employee2 内容中）如何删除以前的选项卡内容数据并生成新的？

当我点击添加按钮时，部分视图内容会垂直和水平添加。这看起来真的很奇怪。

所以我的观点：

button type="button" class="btn btn-primary" id="add">Add</button>

<div id="tabs">
            <ul>                                  
            </ul>
            <div id="content">
                <div id="tabs-1"></div>   
            </div>                           
        </div>


<script>
$(document).ready(function () {
    var tabCounter = 1;
    $('#add').on('click', function () {
        $.ajax({
            url: '/Employee/AddNewEmployee',
        }).success(function (partialView) {
            addTab(partialView);
        });
    });

    function addTab(partialView) {
        var id = "Employee" + tabCounter;
        var title = "Employee" + tabCounter;
        $('#content').append("<div id='" + id + "'><p>" + partialView + "</p></div>");            
        $('#tabs').tabs("add", id, title);
        tabCounter++;
    }
});
</script>

控制器：

public ActionResult AddNewEmployee()
    {
        return PartialView("_EmployeePartial");
    }  

部分员工：

@model Test.Models.Employee

<div class="editorRow">
    @using (Html.BeginCollectionItem("employees"))
    {
        @Html.EditorFor(m => m.FullName, new { htmlAttributes = new { @class = "form-control" } })         
</div>
    }

Answer 1

我解决了。我只需要更仔细地查看 jQuery API 文档。

这是我的代码：

<div id="tabs">
    <ul>                    
    </ul>

 </div>    

<script>
$(function () {
    var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
        tabCounter = 2;

    var tabs = $("#tabs").tabs();
    $('#add').on('click', function (event) {
        $.ajax({
            url: '/Application/AddNewEmployee',
        }).success(function (partialView) {
            addTab(partialView);
        });
        event.preventDefault();
    });

    // Actual addTab function: adds new tab using the input from the form above
    function addTab(partialView) {
        var label = "Tab " + tabCounter,
          id = "tabs-" + tabCounter,
          li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label));

        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div id='" + id + "'><p>" + partialView + "</p></div>");
        tabs.tabs("refresh");
        tabCounter++;
    }

    // Close icon: removing the tab on click
    tabs.on("click", "span.ui-icon-close", function () {
        var panelId = $(this).closest("li").remove().attr("aria-controls");
        $("#" + panelId).remove();
        tabs.tabs("refresh");
    });

    tabs.on("keyup", function (event) {
        if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
            var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
            $("#" + panelId).remove();
            tabs.tabs("refresh");
        }
    });
});