2013-08-28 79 views
0

我正在尝试在使用剃须刀进行渲染的Contour(3.0.14)中创建自定义字段类型。我创建了一个名为CustomTextfield的新类,并额外添加了Width属性,然后在~/umbraco/Plugins/umbracoContour/Views中创建了一个名为Fieldtype.customtextfield.cshtml的新视图。我需要知道的是:如何从自定义视图访问Width属性?构建自定义字段类型:如何呈现自定义属性?

这里是我的代码:

CustomTextfield.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属性。我找不到使用剃刀的自定义属性的自定义字段类型的任何示例。如果有人能指出我的方向正确,我会很感激。

回答

1

我找到了解决方案。原来FieldViewModel有一个AdditionalSettings属性,是List<FieldSettingViewModel>型它由一个字符串KeyValue

的为了让我上面的例子中工作,我可以使用以下命令:

@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>}} 
/> 
相关问题