ASP.NET MVC + 使用 jQuery Tab 检索一对多关系
ASP.NET MVC + Retrieving one to many relationship using jQuery Tab
我有一个表格,其中有一个部分使用 jQuery tab generated by BeginCollectionItem。这是通过一对多关系完成的。我可以在表单中创建多个选项卡并提交它 (newForm.cshtml)。然而,当涉及到编辑时,尤其是当我必须检索表单时(有多个选项卡填充信息),我有点被困在这里。
所以场景很简单。我有一个显示已提交表单列表的 table,可以单击行的编辑 link 来编辑检索到的表单。此时只能检索到NewForm中的Name,其他与Family标签关联的Name都检索不到。
型号:
public class NewForm
{
public int NewFormId { get; set; }
public string Name { get; set; }
public ICollection<Family> Families{ get; set; }
}
public class Family
{
public int FamilyId { get; set; }
public string Name { get; set; }
public int NewFormId { get; set; }
public virtual NewForm NewForm{ get; set; }
}
Edit.cshtml:
@model Test.Models.NewForm
@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
<p>Your Name</p>
@Html.EditorFor(m => m.Name)
<button type="button" id="addFamily" name="addFamily">Add Family</button>
<div id="tabs">
<ul>
<li><a href="#tabs-family">Family 1</a></li>
</ul>
<div id="tabs-family">
@Html.Action("AddNewFamily", "NewForm")
</div>
</div>
<button type="submit">Save</button>
}
<script>
$(function () {
var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
familyTabCounter = 2,
var tabs = $("#tabs").tabs();
$('#addFamily').on('click', function (event) {
$.ajax({
url: '/NewForm/AddNewFamily',
}).success(function (partialView) {
addTab(partialView, this.url);
});
event.preventDefault();
});
// Actual addTab function: adds new tab using the input from the form above
function addTab(partialView, url) {
if (url == "/NewForm/AddNewFamily") {
var label = "Family " + familyTabCounter,
id = "tabs-family" + familyTabCounter,
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");
familyTabCounter++;
}
}
});
</script>
Family.cshtml:
@model Test.Models.Family
<div class="editorRow">
@using (Html.BeginCollectionItem("families"))
{
@Html.EditorFor(m => m.Name)
}
</div>
控制器:
public PartialViewResult AddNewFamily()
{
return PartialView("~/Views/NewForm/PartialView/Family.cshtml");
}
public ActionResult Edit(int? id)
{
NewForm form = db.NewForms
.Include(i => i.Families)
.Where(x => x.NewFormId == id)
.Single();
return View(form);
}
如何检索与 newForm 关联的系列(选项卡)的信息?
编辑
@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
<p>Your Name</p>
@Html.EditorFor(m => m.Name)
<button type="button" id="addFamily" name="addFamily">Add Family</button>
@{int number = 1;}
@foreach (var family in Model.Families)
{
<div id="tabs">
<ul>
<li><a href="#tabs-family">Family @number</a></li>
</ul>
<div id="tabs-family">
@Html.Partial("../NewForm/Family", family)
</div>
</div>
number++;
}
<button type="submit">Save</button>
}
我已经反映了 Stephen 的建议并且检索多个家庭是有效的,但现在我面临另一个问题,我无法为每个家庭创建每个选项卡。我尝试使用我的代码,但它创建了选项卡,但它被放置在一个奇怪的地方。有什么建议吗?
您需要使用 2 个循环为 collection 中的每个 Family
生成一个标签,
一种用于创建 headers(<li><a>
元素),一种用于创建内容(<div>
元素。
请注意,您当前的实施正在生成重复的 id
属性,您需要确保每个内容 <div>
具有唯一的 id
属性,并且关联的 header <a>
元素具有匹配的 href
值。
@model Test.Models.NewForm
@{
// Initialize values for loops
int index = 1;
int count = Model.Families.Count() + 1;
}
@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
<p>Your Name</p>
@Html.EditorFor(m => m.Name)
<button type="button" id="addFamily" name="addFamily">Add Family</button>
<div id="tabs">
<ul>
// Create the tab header for each Family
@for(int i = index; i < count; i++)
{
// Generate unique fragment identifier
string id = String.Format("#family-{0}", i);
<li><a href="@id">Family @i</a></li>
}
</ul>
// Create the content (partial view) for each Family
@foreach(var family in Model.Families)
{
// Generate unique ID
string id = String.Format("family-{0}", index);
<div id="@id">
@Html.Partial("Family", family)
</div>
index++;
}
</div>
<button type="submit">Save</button>
}
旁注:在您当前的脚本中,您需要使用
设置 familyTabCounter
var familyTabCounter = @index
以便单击 'Add' 按钮将根据 collection 中现有 Family
的数量生成正确的 id
属性和关联的片段标识符。
我有一个表格,其中有一个部分使用 jQuery tab generated by BeginCollectionItem。这是通过一对多关系完成的。我可以在表单中创建多个选项卡并提交它 (newForm.cshtml)。然而,当涉及到编辑时,尤其是当我必须检索表单时(有多个选项卡填充信息),我有点被困在这里。
所以场景很简单。我有一个显示已提交表单列表的 table,可以单击行的编辑 link 来编辑检索到的表单。此时只能检索到NewForm中的Name,其他与Family标签关联的Name都检索不到。
型号:
public class NewForm
{
public int NewFormId { get; set; }
public string Name { get; set; }
public ICollection<Family> Families{ get; set; }
}
public class Family
{
public int FamilyId { get; set; }
public string Name { get; set; }
public int NewFormId { get; set; }
public virtual NewForm NewForm{ get; set; }
}
Edit.cshtml:
@model Test.Models.NewForm
@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
<p>Your Name</p>
@Html.EditorFor(m => m.Name)
<button type="button" id="addFamily" name="addFamily">Add Family</button>
<div id="tabs">
<ul>
<li><a href="#tabs-family">Family 1</a></li>
</ul>
<div id="tabs-family">
@Html.Action("AddNewFamily", "NewForm")
</div>
</div>
<button type="submit">Save</button>
}
<script>
$(function () {
var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
familyTabCounter = 2,
var tabs = $("#tabs").tabs();
$('#addFamily').on('click', function (event) {
$.ajax({
url: '/NewForm/AddNewFamily',
}).success(function (partialView) {
addTab(partialView, this.url);
});
event.preventDefault();
});
// Actual addTab function: adds new tab using the input from the form above
function addTab(partialView, url) {
if (url == "/NewForm/AddNewFamily") {
var label = "Family " + familyTabCounter,
id = "tabs-family" + familyTabCounter,
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");
familyTabCounter++;
}
}
});
</script>
Family.cshtml:
@model Test.Models.Family
<div class="editorRow">
@using (Html.BeginCollectionItem("families"))
{
@Html.EditorFor(m => m.Name)
}
</div>
控制器:
public PartialViewResult AddNewFamily()
{
return PartialView("~/Views/NewForm/PartialView/Family.cshtml");
}
public ActionResult Edit(int? id)
{
NewForm form = db.NewForms
.Include(i => i.Families)
.Where(x => x.NewFormId == id)
.Single();
return View(form);
}
如何检索与 newForm 关联的系列(选项卡)的信息?
编辑
@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
<p>Your Name</p>
@Html.EditorFor(m => m.Name)
<button type="button" id="addFamily" name="addFamily">Add Family</button>
@{int number = 1;}
@foreach (var family in Model.Families)
{
<div id="tabs">
<ul>
<li><a href="#tabs-family">Family @number</a></li>
</ul>
<div id="tabs-family">
@Html.Partial("../NewForm/Family", family)
</div>
</div>
number++;
}
<button type="submit">Save</button>
}
我已经反映了 Stephen 的建议并且检索多个家庭是有效的,但现在我面临另一个问题,我无法为每个家庭创建每个选项卡。我尝试使用我的代码,但它创建了选项卡,但它被放置在一个奇怪的地方。有什么建议吗?
您需要使用 2 个循环为 collection 中的每个 Family
生成一个标签,
一种用于创建 headers(<li><a>
元素),一种用于创建内容(<div>
元素。
请注意,您当前的实施正在生成重复的 id
属性,您需要确保每个内容 <div>
具有唯一的 id
属性,并且关联的 header <a>
元素具有匹配的 href
值。
@model Test.Models.NewForm
@{
// Initialize values for loops
int index = 1;
int count = Model.Families.Count() + 1;
}
@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
<p>Your Name</p>
@Html.EditorFor(m => m.Name)
<button type="button" id="addFamily" name="addFamily">Add Family</button>
<div id="tabs">
<ul>
// Create the tab header for each Family
@for(int i = index; i < count; i++)
{
// Generate unique fragment identifier
string id = String.Format("#family-{0}", i);
<li><a href="@id">Family @i</a></li>
}
</ul>
// Create the content (partial view) for each Family
@foreach(var family in Model.Families)
{
// Generate unique ID
string id = String.Format("family-{0}", index);
<div id="@id">
@Html.Partial("Family", family)
</div>
index++;
}
</div>
<button type="submit">Save</button>
}
旁注:在您当前的脚本中,您需要使用
设置familyTabCounter
var familyTabCounter = @index
以便单击 'Add' 按钮将根据 collection 中现有 Family
的数量生成正确的 id
属性和关联的片段标识符。