c# - MVC3 C# Custom HtmlHelper 用于客户端和服务器端的验证输入

Question

我看到了一些与此类似的问题，但它们似乎是针对旧版本的 MVC，我没有找到如何将它们应用于 MVC3 的运气。

基本上我写了一个不错的小 htmlhelper，它将显示当前模型的选定参数，很像 @Html.DisplayFor() 做的，除了我的旁边有一个编辑按钮它(请原谅这些示例中缺少样式!):

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

这是我的 helper :

    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 输入在验证错误的情况下都是这样的:

更新

我很确定我需要做的就是让我的助手包含必要的 html 属性和 span 元素，这是当您使用“编辑”模板添加 View 时自动生成的 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 上有一个方法，您可以在辅助方法中使用该方法来获取模型属性的验证属性。

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

然后您可以遍历该集合并合并这些属性，就像您已经对其他属性所做的那样。