![](/img/trans.png)
[英]Adding Triggers dynamically on UpdatePanel for dynamially added controls
[英]Adding dynamically added controls to the ViewModel
我有以下ViewModel,其中填充了一些预定义的数据。 该预定义数据之一是ApplicationParameter ViewModels列表,该列表设置为最初显示n个ApplicationParameters。
我想要实现的是允许用户在单击按钮时添加更多数量的ApplicationParameters ViewModel,这是通过使用ApplicationParameter代码调用PartialView实现的。 正如预期的那样,控件确实会自动添加,但是由于它们的名称不正确(因为它们是嵌套的),因此在ViewModel中无法识别它们。
如何使动态添加的控件对POST返回的ViewModel可见。
的ViewModels
public class ApplicationVM
{
public int idApplication { get; set; }
public int idCompany { get; set; }
public string Company { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public string Link { get; set; }
public string Photo { get; set; }
public List<ApplicationParameterVM> ApplicationParameters { get; set; }
}
public class ApplicationParameterVM
{
public string Name { get; set; }
public bool Keep { get; set; }
}
动作视图(代码段)
<tbody id="editorRows">
@for (int i = 0; i < Model.ApplicationParameters.Count(); i++)
{
<tr>
<td>
@Html.TextBoxFor(m => Model.ApplicationParameters[i].Name, new { @class = "form-control" })
@Html.CheckBoxFor(m => Model.ApplicationParameters[i].Keep)
</td>
</tr>
}
</tbody>
用于添加ApplicationParameterVM的操作视图
@model AccessMarketmind.Areas.Administration.ViewModels.ApplicationParameterVM
@{
Layout = null;
}
<tr class="application-parameters">
<td>
@Html.TextBoxFor(m => Model.Name, new { @class = "form-control" })
@Html.CheckBoxFor(m => Model.Keep)
</td>
</tr>
我知道这看起来很琐碎,可以使用Javascript轻松完成,但事实是我有更复杂的ViewModel(阅读:大量嵌套),其中Javascript不可选。
这些动态表单的基本技巧是要发布的表单数据应与属性名称匹配。
例如:动态控件数组的最终属性名称应该是。 ApplicationParameters [0]。名称和ApplicationParameters [0]。保留和
ApplicationParameters [1]。名称和ApplicationParameters [1]。保持.....
为此,请仅使用松散耦合的帮助器Html.TextBox()。
经过有用的回答后,我能够按照我想要的方式正常工作。 我所做的是服务器和客户端代码的组合,其想法是基本上在ViewModel中添加一个附加属性,我将其命名为ControlName,类型为字符串。 这样做的好处在于,如果ViewModel发生更改,您可以轻松地将代码调整为当前需求,而不必担心太多,更不用说只需将ControlName属性添加到每个ViewModel子级别即可轻松进入多个层次。
注意:以下示例不是OP中提到的示例
首先,您需要某种包装器(在我的情况下是一个表)和一个链接,该链接使您可以创建新的控件行:
@Html.ActionLink("Add attribute", "AddProductCategoryAttribute", null, new { id = "addProductCategoryAttribute" })
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>
</th>
<th>
Attribute
</th>
<th>
Measure
</th>
</tr>
</thead>
<tbody id="productCategoryAttributes"></tbody>
</table>
在客户端,您需要这样的东西
<script type="text/javascript">
$("#addProductCategoryAttribute").click(function () {
elementCount = $(".productCategoryAttribute").length;
$.ajax({
url: this.href + "?elementCount=" + elementCount,
cache: false,
success: function (html) {
$("#productCategoryAttributes").append(html);
}
});
return false;
})
</script>
注意链接上附加的elementCount-此查询字符串用于让Action方法知道已经存在多少个元素。 在谈论Action方法时,现在是这样。
public ActionResult AddProductCategoryAttribute(int elementCount)
{
ProductCategoryOverview.ProductCategoryAttributeVM productCategoryAttributeVM = new ProductCategoryOverview.ProductCategoryAttributeVM();
productCategoryAttributeVM.ControlName = "ChangeThisNameToWhateverIsNeeded[" + elementCount.ToString() + "].";
productCategoryAttributeVM.Keep = true;
return View(productCategoryAttributeVM);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.