我有一个如下所示的cshtml视图
<div class="form-group">
@foreach (var fields in Model.ListProductFields)
{
@Html.LabelFor(x => x.ProductFieldNameEn, fields.FieldName, htmlAttributes: new { id="", @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.FieldValue, new { htmlAttributes = new { @class = "form-control", @row = 5 } })
</div>
}
</div>
使用上面的div部分我可以使用其相关标签
填充多个textareas这就是它工作时的显示方式
然后我尝试为所有这些文本区域添加summernote富文本编辑器, 使用以下home-index.js文件
(function ($) {
function HomeIndex() {
var $this = this;
function initialize() {
$('#FieldValue').summernote({
focus: true,
height: 150,
codemirror: {
theme: 'united'
}
});
}
$this.init = function () {
initialize();
}
}
$(function () {
var self = new HomeIndex();
self.init();
})
}(jQuery))
然后它申请第一个文本区域。不适用于其他文本区域
如下所示
答案 0 :(得分:0)
<div class="form-group">
@foreach (var fields in Model.ListProductFields)
{
@Html.LabelFor(x => x.ProductFieldNameEn, fields.FieldName, htmlAttributes: new { id="", @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.FieldValue, new { htmlAttributes = new { @class = "form-control mySummerNote", @row = 5 } })
</div>
}
</div>
(function ($) {
function HomeIndex() {
var $this = this;
function initialize() {
$('.mySummerNote').summernote({
focus: true,
height: 150,
codemirror: {
theme: 'united'
}
});
}
$this.init = function () {
initialize();
}
}
$(function () {
var self = new HomeIndex();
self.init();
})
}(jQuery))
答案 1 :(得分:0)
您创建了无效的HTML,因为每个textarea都具有相同的id
属性,而('#FieldValue')
只返回带有id="FieldValue"
的第一个元素。
此外,当您提交表单时,这不会绑定到您的模型。相反,使用for
循环生成html并为textarea提供一个类名,以用作jQuery选择器(请注意,属性ListProductField
需要实现IList
或者您可以使用该类型的自定义EditorTemplate
@for (int i = 0; i < Model.ListProductFields.Count; i++)
{
@Html.LabelFor(x => x.ListProductFields[i].ProductFieldNameEn, Model.ListProductFields[i].FieldName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(m => m.ListProductFields[i].FieldValue, new { htmlAttributes = new { @class = "form-control summernote", @row = 5 } })
</div>
}
并将选择器更改为
$('.summernote').summernote({
旁注:您的@Html.LabelFor()
似乎不正确。它正在创建与属性ProductFieldNameEn
关联的标签,但您可以控制属性FieldName
。我认为你有错误的参数,它应该是
@Html.LabelFor(x => x.ListProductFields[i].FieldName, Model.ListProductFields[i].ProductFieldNameEn, ...
将标签与以下textarea相关联,并显示属性ProductFieldNameEn
的值