ASP.NET MVC +使用jQuery Tab检索一对多关系 [英] ASP.NET MVC + Retrieving one to many relationship using jQuery Tab
问题描述
我有一个表单,该表单的一部分使用 jQuery标签 ="https://github.com/danludwig/BeginCollectionItem" rel ="nofollow noreferrer"> BeginCollectionItem .这是通过一对多关系完成的.我可以在表单中创建多个选项卡并提交(newForm.cshtml).但是,当涉及到编辑时,尤其是当我必须检索表单(带有填充信息的多个选项卡)时,我有点卡在这里.
I have a form that has a section where it uses jQuery tab generated by BeginCollectionItem. This is done by one-to-many relationship. I can create multiple tabs within the form and can submit it (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.
所以场景很简单.我有一个表,其中显示了已提交表单的列表,并且可以单击一行的编辑链接来编辑检索到的表单.目前,我只能在NewForm中检索名称,而与家庭"选项卡关联的其他名称却无法检索.
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.
型号:
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>
控制器:
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关联的家庭(标签)的信息?
How can I retrieve information for families(tabs) associated with 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>
}
我已经反映了斯蒂芬的建议,并且正在检索多个家庭,但是现在我面临另一个问题,我无法为每个家庭创建每个标签.我尝试使用我的代码,但是它创建了选项卡,但是将其放置在一个奇怪的地方.有什么建议吗?
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?
推荐答案
您需要使用2个循环为集合中的每个Family
生成一个标签,
一个用于创建标头(<li><a>
元素),另一个用于内容(<div>
元素.
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.
请注意,您当前的实现正在生成重复的id
属性,并且需要确保每个内容<div>
具有唯一的id
属性,并且关联的标头<a>
元素具有匹配的href
值
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.
@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
Side note: In your current script, you need to set the familyTabCounter
using
var familyTabCounter = @index
,以便单击添加"按钮将基于集合中现有Family
的数量生成正确的id
属性和关联的片段标识符.
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.
这篇关于ASP.NET MVC +使用jQuery Tab检索一对多关系的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!