[英]ASP.NET MVC + Retrieving one to many relationship using jQuery Tab
I have a form that has a section where it uses jQuery tab generated by BeginCollectionItem . 我有一个表单,其中有一个部分使用了BeginCollectionItem生成的jQuery选项卡 。 This is done by one-to-many relationship.
这是通过一对多关系完成的。 I can create multiple tabs within the form and can submit it (newForm.cshtml).
我可以在表单中创建多个选项卡并提交(newForm.cshtml)。 However, when it comes to editing, especially when I have to retrieve the form (with multiple tabs filled with information), I am kinda stuck here.
但是,当涉及到编辑时,尤其是当我必须检索表单(带有填充信息的多个选项卡)时,我有点卡在这里。
So the scenario is simple. 因此,情况很简单。 I have a table that shows the list of submitted forms and can click an edit link of a row to edit that retrieved form.
我有一张表格,显示已提交表格的列表,可以单击一行的编辑链接来编辑检索到的表格。 At this moment, I can only retrieve the Name in NewForm, but other Names associated with Family tabs are not retrieved.
目前,我只能在NewForm中检索“名称”,而与“家庭”选项卡关联的其他名称则无法检索。
Model: 模型:
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: 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: Family.cshtml:
@model Test.Models.Family
<div class="editorRow">
@using (Html.BeginCollectionItem("families"))
{
@Html.EditorFor(m => m.Name)
}
</div>
Controller: 控制器:
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);
}
How can I retrieve information for families(tabs) associated with newForm? 如何检索与newForm关联的家庭(标签)的信息?
Edit 编辑
@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>
}
I've reflected Stephen's advice and retrieving multiple families is working, but now I face another problem that I can't create each tab for each family. 我已经反映了斯蒂芬的建议,并且正在检索多个家庭,但是现在我面临另一个问题,我无法为每个家庭创建每个标签。 I tried with my code, but it creates tab, but it is placed in a weird place.
我尝试使用我的代码,但是它创建了选项卡,但是将其放置在一个奇怪的地方。 Any suggestions?
有什么建议么?
You need to generate a tabs for each Family
in your collection using 2 loops, one to create the headers (the <li><a>
elements), and one for the content (the <div>
elements. 您需要使用2个循环为集合中的每个
Family
生成一个选项卡,一个用于创建标头( <li><a>
元素),一个用于内容( <div>
元素)。
Note that your current implementation is generating duplicate id
attributes, and you need to ensure that each content <div>
has a unique id
attribute, and that the associated header <a>
element has matching href
value. 请注意,您当前的实现正在生成重复的
id
属性,并且需要确保每个内容<div>
具有唯一的id
属性,并且关联的标头<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>
}
Side note: In your current script, you need to set the familyTabCounter
using 旁注:在当前脚本中,您需要使用以下命令设置
familyTabCounter
var familyTabCounter = @index
so that clicking the 'Add' button will generate the correct id
attribute and associated fragment identifier based on the number of existing Family
in the collection. 因此点击“添加”按钮将根据集合中现有
Family
的数量生成正确的id
属性和关联的片段标识符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.