构建自定义字段类型:如何渲染自定义属性
本文关键字:何渲染 自定义属性 类型 自定义 字段 构建 | 更新日期: 2023-09-27 18:29:12
我正在尝试使用剃刀在Contour(3.0.14)中创建一个自定义字段类型来进行渲染。我创建了一个名为CustomTextfield
的新类,该类具有额外的Width
属性,然后在~/umbraco/Plugins/umbracoContour/Views
中创建了名为Fieldtype.customtextfield.cshtml
的新视图。我需要知道的是:如何从自定义视图访问Width
属性?
这是我的代码:
自定义文本字段.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Umbraco.Forms.Core;
using System.Web.UI.WebControls;
namespace Custom.FieldType {
public class CustomTextfield : Umbraco.Forms.Core.FieldType {
public CustomTextfield() {
//Provider
this.Id = new Guid("b994bc8b-2c65-461d-bfba-43c4b3bd2915");
this.Name = "Custom Textfield";
this.Description = "Renders a html input fieldKey"; //FieldType
this.Icon = "textfield.png";
}
public System.Web.UI.WebControls.TextBox tb;
public List<Object> _value;
[Umbraco.Forms.Core.Attributes.Setting("Width", description = "Enter the width of the Textfield")]
public string Width { get; set; }
public override WebControl Editor {
get {
tb.TextMode = System.Web.UI.WebControls.TextBoxMode.SingleLine;
tb.CssClass = "text";
if (!string.IsNullOrEmpty(this.Width)) {
int width;
if (Int32.TryParse(this.Width, out width)) {
tb.Width = width;
}
}
if (_value.Count > 0)
tb.Text = _value[0].ToString();
return tb;
}
set { base.Editor = value; }
}
public override List<Object> Values {
get {
if (tb.Text != "") {
_value.Clear();
_value.Add(tb.Text);
}
return _value;
}
set { _value = value; }
}
public override string RenderPreview() {
return
"<input type='"text'" id='"text-content'" class='"text'" maxlength='"500'" style='"" + this.Width + "px'" />";
}
public override string RenderPreviewWithPrevalues(List<object> prevalues) {
return RenderPreview();
}
public override bool SupportsRegex {
get { return true; }
}
}
}
Fieldtype.customtextfield.cshtml:
@model Umbraco.Forms.Mvc.Models.FieldViewModel
<input type="text" name="@Model.Name" id="@Model.Id" class="text" value="@Model.Value" maxlength="500"
style="@{if(!string.IsNullOrEmpty(Model.Width)){<text>width:@(Model.Width)px; </text>}}"
@{if(Model.Mandatory || Model.Validate){<text>data-val="true"</text>}}
@{if (Model.Mandatory) {<text> data-val-required="@Model.RequiredErrorMessage"</text>}}
@{if (Model.Validate) {<text> data-val-regex="@Model.InvalidErrorMessage" data-regex="@Model.Regex"</text>}}
/>
视图的代码不起作用,因为我试图引用不存在的Width
属性。我找不到任何使用剃刀自定义属性的自定义字段类型的例子。如果有人能为我指明正确的方向,我将不胜感激。
我找到了解决方案。结果表明,FieldViewModel
具有AdditionalSettings
属性,其类型为List<FieldSettingViewModel>
,由字符串Key
和Value
组成
为了让我上面的例子发挥作用,我可以使用以下方法:
@model Umbraco.Forms.Mvc.Models.FieldViewModel
@{
var widthSetting = Model.AdditionalSettings.FirstOrDefault(s => s.Key.Equals("Width"));
string width = (widthSetting == null) ? null : widthSetting.Value;
}
<input type="text" name="@Model.Name" id="@Model.Id" class="text" value="@Model.Value" maxlength="500"
style="@{if(!string.IsNullOrEmpty(width)){<text>width:@(width)px; </text>}}"
@{if(Model.Mandatory || Model.Validate){<text>data-val="true"</text>}}
@{if (Model.Mandatory) {<text> data-val-required="@Model.RequiredErrorMessage"</text>}}
@{if (Model.Validate) {<text> data-val-regex="@Model.InvalidErrorMessage" data-regex="@Model.Regex"</text>}}
/>