MVC3 C#Custom HtmlHelper用于输入验证,包括客户端和服务器端

Question

我已经看到了一些类似的问题,但它们似乎是旧版本的MVC,我没有运气如何将它们应用到MVC3.

基本上我已经编写了一个很好的小htmlhelper,它将显示当前模型的一个选定参数,就像我@Html.DisplayFor()一样,除了我的旁边有一个编辑按钮(原谅这些例子中没有样式!):

当单击此按钮时,它将执行其中一个"弹出窗口",其中显示编辑器字段,并使用一些简单的jquery使页面的其余部分显示为灰色:

这是我的帮手:

    public static HtmlString PopUpEditorFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, bool textarea = false)
    {
        string id = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));

        ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);

        var Display = new TagBuilder("span");
        Display.MergeAttribute("class", "Display");
        Display.InnerHtml = metadata.Model.ToString();

        var Edit_Button = new TagBuilder("span");
        Edit_Button.MergeAttribute("class", "Edit_Button");
        Edit_Button.InnerHtml = " Edit";// change to use resources file 

        var Display_Container = new TagBuilder("div");
        Display_Container.MergeAttribute("class", "Display");
        Display_Container.InnerHtml = Display.ToString(TagRenderMode.Normal) + Edit_Button.ToString(TagRenderMode.Normal);

        var legend = new TagBuilder("legend");
        legend.InnerHtml = "Edit " + metadata.DisplayName ?? metadata.PropertyName;

        var Editor_Box_Input = new TagBuilder("input");
        Editor_Box_Input.MergeAttribute("class", "Editor_Box");
        Editor_Box_Input.MergeAttribute("id", id);
        Editor_Box_Input.MergeAttribute("name", id);
        Editor_Box_Input.MergeAttribute("type", "text");
        Editor_Box_Input.MergeAttribute("value", metadata.Model.ToString());

        var Editor_Box_Textarea = new TagBuilder("textarea");
        Editor_Box_Input.MergeAttribute("class", "Editor_Box");
        Editor_Box_Input.MergeAttribute("id", id);
        Editor_Box_Input.MergeAttribute("name", id);
        Editor_Box_Input.MergeAttribute("type", "text");
        Editor_Box_Textarea.InnerHtml = metadata.Model.ToString();

        var Buttons = new TagBuilder("div");
        Buttons.MergeAttribute("class", "Buttons");
        Buttons.InnerHtml = QuestJSButton(html, "Cancel", "Option Cancel").ToString() + QuestJSButton(html, "Save", "Submit Save").ToString();

        var fieldset = new TagBuilder("fieldset");
        fieldset.InnerHtml += legend.ToString(TagRenderMode.Normal);
        fieldset.InnerHtml += !textarea 
            ? Editor_Box_Input.ToString(TagRenderMode.SelfClosing) 
            : Editor_Box_Textarea.ToString(TagRenderMode.Normal);
        fieldset.InnerHtml += Buttons.ToString(TagRenderMode.Normal);

        var form_styled = new TagBuilder("div");
        form_styled.MergeAttribute("class", "Editor form_styled");
        form_styled.InnerHtml = fieldset.ToString(TagRenderMode.Normal);

        var Editor_BG = new TagBuilder("div");
        Editor_BG.MergeAttribute("class", "Editor_BG");
        Editor_BG.InnerHtml = form_styled.ToString(TagRenderMode.Normal);

        var PopUp_Editor = new TagBuilder("div");
        PopUp_Editor.MergeAttribute("class", "PopUp_Editor");
        PopUp_Editor.MergeAttribute("id", id);
        PopUp_Editor.InnerHtml = Editor_BG.ToString(TagRenderMode.Normal) + Display_Container.ToString(TagRenderMode.Normal);

        return PopUp_Editor.ToString(TagRenderMode.Normal).ToHtmlString();
    }

它就像一个普通的帮手一样被称为:

@Html.PopUpEditorFor(model => model.property)

并生成以下html:

        <div class="PopUp_Editor" id="property_id">
          <div class="Display">
            <span class="Display">property_value</span>
            <span class="Edit_Button">Edit</span>
          </div>
          <div class="Editor_BG">
            <div class="Editor form_styled">
              <fieldset>
                <legend>Edit Salutation</legend>
                <input class="Editor_Box" id="property_id" name="property_id" type="text" value="property_value" />
                <div class="Buttons">
                  <span class="Option Cancel">Cancel</span>
                  <span class="Submit Save">Save</span>
                </div>
              </fieldset>
            </div>
          </div>
        </div>

这很好用,除了我想让MVC3的真棒客户端/服务器端验证工作,我不知道如何去做这件事.我的目标是在显示和输入下面显示任何验证错误消息,并为输入获取样式所需的类,因为任何其他htmlhelper输入将是验证错误,如下所示:

UPDATE

我非常确定我需要做的就是让我的助手包含必要的html属性和span元素,这里是使用"Edit"模板添加视图时自动生成的HTML:

<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-email="This is not a valid e-mail address." data-val-required="You must provide an e-mail address." id="Email_Address" name="Email_Address" type="text" value="example@domain.com" />
</div>
<div class="editor-validation">
<span class="field-validation-valid" data-valmsg-for="Email_Address" data-valmsg-replace="true"></span>
</div>

所以基本上我需要知道将这个应用到我的助手的正确方法是什么,如果可能的话,让框架为我完成大部分工作.

Answer 1

HtmlHelper上有一个方法可以在helper方法中使用,以获取模型属性的验证属性.

IDictionary<string, object> valAttributes = htmlHelper.GetUnobtrustiveValidationAttributes(propertyName, metaData);

然后,您可以遍历该集合并合并这些属性,就像您已经在使用其他属性一样.