- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经在这个问题上苦苦思索了好几天了,还是想不通。我需要创建一个 View ,允许用户添加和删除复杂的分层对象。伪造的例子:
模型
public class ParentModel
{
public int ParentId { get; set; }
public string ParentText { get; set; }
public IList<ChildModel> Children { get; set; }
}
public class ChildModel
{
public int ChildId { get; set; }
public string ChildText { get; set; }
public IList<GrandChildModel> GrandChildren { get; set; }
}
public class GrandChildModel
{
public int GrandChildId { get; set; }
public string GrandChildText { get; set; }
}
现在,假设我有一个填充 ParentModel
及其子属性的操作,一个简单的 View 可能如下所示:
@model EditorTemplateCollectiosns.Models.ParentModel
@using (@Html.BeginForm())
{
<div>
@Html.TextBoxFor(m => m.ParentId)
@Html.TextBoxFor(m => m.ParentText)<br/>
Children:<br/>
@for (var i = 0; i < Model.Children.Count; i++)
{
@Html.TextBoxFor(m => Model.Children[i].ChildId)
@Html.TextBoxFor(m => Model.Children[i].ChildText)
<div>
Grandchildren:<br/>
<table id="grandChildren">
<tbody>
@for (var j = 0; j < Model.Children[i].GrandChildren.Count; j++)
{
<tr>
<td>@Html.TextBoxFor(m => @Model.Children[i].GrandChildren[j].GrandChildId)</td>
<td>@Html.TextBoxFor(m => @Model.Children[i].GrandChildren[j].GrandChildText)</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
<button type="button" id="addGrandchild">Add Grandchild</button>
<input type="submit" value="submit"/>
}
<script type="text/javascript">
$(document).ready(function() {
$("#addGrandchild").click(function() {
$("#grandChildren tbody:last").append('<tr><td><input type="text" name="grandChildId" /></td><td><input type="text" name="grandChildText" /></td></tr>');
});
});
</script>
这个 View 工作正常,除非我添加一个孙子并提交表单,在这种情况下它不会绑定(bind)到 GrandChildModel
的列表。 POST 的 fiddle :
所以我尝试使用 GrandChildModel
的编辑器模板,只是为了看看它是否可行。这非常适合简单地显示对象,但我不知道如何将孙子添加到列表中并让它显示在编辑器模板中。我还尝试嵌套加载了 $.ajax
调用的部分 View ,但这变成了逻辑上的噩梦。
在实际应用中,层级比这个例子更深,每一个连续的子对象都需要有这个add/remove的能力。每次用户想要添加或删除对象时,如果没有完整的表单发布,这是否可能?使用上面示例中的方法,是否可以让新添加的孙子绑定(bind)到 POST 上的 IList
?或者,有没有一种方法可以在客户端添加一个对象并将其显示在编辑器模板中并绑定(bind)到 POST 上的 IList
?如果两种选择都不是正确的方法,那什么才是?
更新
我已经想出了一些可能有用的 hacky,但我仍然很想知道是否有更简单的方法来做到这一点。我将上面的 View 代码更改为:
@model EditorTemplateCollectiosns.Models.ParentModel
@using (@Html.BeginForm())
{
<div>
@Html.TextBoxFor(m => m.ParentId)
@Html.TextBoxFor(m => m.ParentText)<br/>
Children:<br/>
<button type="button" id="addChild" onclick="addChildRow()">Add Child</button>
<table id="children">
<tbody class="childTableBody">
@for (var i = 0; i < Model.Children.Count; i++)
{
<tr>
<td colspan="3">Child @i</td>
</tr>
<tr class="childInfoRow">
<td>
@Html.TextBoxFor(m => Model.Children[i].ChildId)
</td>
<td>
@Html.TextBoxFor(m => Model.Children[i].ChildText)
</td>
<td>
<button type="button" id="removeChild@(i)" onclick="removeChildRow(this)">Delete</button>
</td>
</tr>
<tr>
<td colspan="3">
Grandchildren:<br/>
<button type="button" id="addGrandchild@(i)" onclick="addGrandchildRow(this)">Add Grandchild</button>
<table id="grandChildren@(i)">
<tbody>
@for (var j = 0; j < Model.Children[i].GrandChildren.Count; j++)
{
<tr>
<td>@Html.TextBoxFor(m => @Model.Children[i].GrandChildren[j].GrandChildId)</td>
<td>@Html.TextBoxFor(m => @Model.Children[i].GrandChildren[j].GrandChildText)</td>
<td><button type="button" id="removeGrandchild@(i)_@(j)" onclick="removeGrandchildRow(this)">Delete</button></td>
</tr>
}
</tbody>
</table>
</td>
</tr>
}
</tbody>
</table>
</div>
<input type="submit" value="submit"/>
}
然后,我添加了以下 javascript。我不能使用类和 jQuery 单击事件处理程序,因为在每次添加/删除后重新绑定(bind)处理程序似乎无法正常工作:
<script type="text/javascript">
function addChildRow() {
var newRowIndex = $("#children tr.childInfoRow").length;
var newRow = '<tr><td colspan="3">Child ' + newRowIndex + '</td></tr><tr class="childInfoRow"><td><input type="text" name="Children[' + newRowIndex + '].ChildId" /></td>' +
'<td><input type="text" name="Children[' + newRowIndex + '].ChildText" /></td>' +
'<td><button type="button" id="removeChild' + newRowIndex + '" onclick="removeChildRow(this)">Delete</button></td></tr>' +
'<td colspan="3">Grandchildren: <br/><button type="button" id="addGrandchild' + newRowIndex + '" onclick="addGrandchildRow(this)">Add Grandchild</button>' +
'<table id="grandChildren' + newRowIndex + '"><tbody></tbody></table></td></tr>';
$("#children tbody.childTableBody:last").append(newRow);
}
function addGrandchildRow(elem) {
var childIndex = $(elem).attr('id').replace('addGrandchild', '');
var newRowIndex = $("#grandChildren" + childIndex + " tr").length;
var newRow = '<tr><td><input type="text" name="Children[' + childIndex + '].GrandChildren[' + newRowIndex + '].GrandChildId" /></td>' +
'<td><input type="text" name="Children[' + childIndex + '].GrandChildren[' + newRowIndex + '].GrandChildText" /></td>' +
'<td><button type="button" id="removeGrandchild' + childIndex + '_' + newRowIndex + '" onclick="removeGrandchildRow(this)">Delete</button></td></tr>';
$("#grandChildren" + childIndex + " tbody:last").append(newRow);
}
function removeChildRow(elem) {
$(elem).closest('tr').prev().remove();
$(elem).closest('tr').next().remove();
$(elem).closest('tr').remove();
}
function removeGrandchildRow(elem) {
$(elem).closest('tr').remove();
}
</script>
到目前为止,这是可行的,并且数组值似乎已正确绑定(bind)。但是,我不太喜欢向任一表添加行所需的大量内容。有人有更好的主意吗?
最佳答案
如果您坚持只使用一种模型,这会更容易实现。 ChildModel 和 GrandChildModel 没有 ParentModel,而是只有一个 HierarchichalPersonModel。
这样一来,您只需要一个 View 和一个自定义编辑器模板。 Ajax 会更难一些,但不是您描述的后勤噩梦。
更新:添加示例
人物模型:
public class Person
{
public int Id { get; set; }
public string Text { get; set; }
public List<Person> Children { get; set; }
}
假仓库:
public static List<Person> PersonCollection { get; set; }
public static Person FindById(int id, List<Person> list = null)
{
if (list == null)
list = PersonCollection;
foreach (var person in list)
{
if (person.Id == id)
return person;
if (person.Children != null)
return FindById(id, person.Children);
}
return null;
}
关于asp.net-mvc - 我可以在具有添加/删除功能的 MVC 4 View 中显示复杂对象的列表吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15851832/
我创建了一个用户可以添加测试的字段。这一切运行顺利我只希望当用户点击(添加另一个测试)然后上一个(添加另一个测试)删除并且这个显示在新字段中。 所有运行良好的唯一问题是点击(添加另一个字段)之前添加另
String[] option = {"Adlawan", "Angeles", "Arreza", "Benenoso", "Bermas", "Brebant
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
我正在努力将 jQuery 滚动功能添加到 nav-tab (Bootstrap 3)。我希望用户能够选择他们想要的选项卡,并在选项卡内容中有一个可以平滑滚动到 anchor 的链接。这是我的代码,可
我正在尝试在用户登录后再添加 2 个 ui 选项卡。首先,我尝试做一个之后。 $('#slideshow').tabs('remove', '4'); $("#slideshow ul li:last
我有一个包含选择元素的表单,我想通过选择添加和删除其中一些元素。这是html代码(这里也有jsfiddle http://jsfiddle.net/txhajy2w/):
正在写这个: view.backgroundColor = UIColor.white.withAlphaComponent(0.9) 等同于: view.backgroundColor = UICo
好的,如果其中有任何信息,我想将这些列添加到一起。所以说我有 账户 1 2 3 . 有 4 个帐户空间,但只有 3 个帐户。我如何创建 java 脚本来添加它。 最佳答案 Live Example H
我想知道是否有一种有效的预制算法来确定一组数字的和/差是否可以等于不同的数字。示例: 5、8、10、2,使用 + 或 - 等于 9。5 - 8 = -3 + 10 = 7 + 2 = 9 如果有一个预
我似乎有一个卡住的 git repo。它卡在所有基本的添加、提交命令上,git push 返回所有内容为最新的。 从其他帖子我已经完成了 git gc 和 git fsck/ 我认为基本的调试步骤是
我的 Oracle SQL 查询如下- Q1- select hca.account_number, hca.attribute3, SUM(rcl.extended_amou
我正在阅读 http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingG
我正在尝试添加一个“加载更多”按钮并限制下面的结果,这样投资组合页面中就不会同时加载 1000 个内容,如下所示:http://typesetdesign.com/portfolio/ 我对 PHP
我遇到这个问题,我添加了 8 个文本框,它工作正常,但是当我添加更多文本框(如 16 个文本框)时,它不会添加最后一个文本框。有人遇到过这个问题吗?提前致谢。 Live Link: JAVASCRIP
add/remove clone first row default not delete 添加/删除克隆第一行默认不删除&并获取正确的SrNo(例如:添加3行并在看到问题后删除SrNo.2)
我编码this ,但删除按钮不起作用。我在控制台中没有任何错误.. var counter = 0; var dataList = document.getElementById('materi
我有一个类似数组的对象: [1:数组[10]、2:数组[2]、3:数组[2]、4:数组[2]、5:数组[3]、6:数组[1]] 我正在尝试删除前两个元素,执行一些操作,然后将它们再次插入到同一位置。
使用的 Delphi 版本:2007 你好, 我有一个 Tecord 数组 TInfo = Record Name : String; Price : Integer; end; var Info
我使用了基本的 gridster 代码,然后我声明了通过按钮添加和删除小部件的函数它工作正常但是当我将调整大小功能添加到上面的代码中时,它都不起作用(我的意思是调整大小,添加和删除小部件) 我的js代
title 323 323 323 title 323 323 323 title 323 323 323 JS $(document).keydown(function(e){
我是一名优秀的程序员,十分优秀!