0
我在看here在asp.net mvc中使用jQuery创建一个动态选项卡。asp.net mvc jquery tab
我有我的观点的添加按钮将调用jQuery函数去通过AJAX到URL,返回其采用
Html.BeginCollectionItem()
到目前为止,我已经做了,增加柜台为我的标签(例如一个partialView: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");
}
EmployeePartial:
@model Test.Models.Employee
<div class="editorRow">
@using (Html.BeginCollectionItem("employees"))
{
@Html.EditorFor(m => m.FullName, new { htmlAttributes = new { @class = "form-control" } })
</div>
}