3

私はこれに似た質問をいくつか見ましたが、それらは古いバージョンのMVCのものであるようで、MVC3にそれらを適用する方法を理解することができませんでした。

基本的に、私は現在のモデルの選択されたパラメーターを表示する素敵な小さなhtmlhelperを作成しましたが@Html.DisplayFor()、私の場合はその横に編集ボタンがあります（これらの例ではスタイルの欠如を許してください！）：

ボタンの例

このボタンをクリックすると、エディターフィールドが表示され、ページの残りの部分が単純なjqueryを使用して少しグレー表示される「ポップアップ」の1つが実行されます。

ポップアップの例

これは私のヘルパーです：

    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属性とスパン要素をヘルパーに含めるだけでよいと確信しています。「編集」テンプレートを使用してビューを追加すると、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>

したがって、基本的に、これをヘルパーに適用する正しい方法を知る必要があります。可能であれば、フレームワークにほとんどの作業を実行させます。

4

2 に答える 2

5

HtmlHelperには、ヘルパーメソッドで使用してモデルのプロパティの検証属性を取得できるメソッドがあります。

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

次に、そのコレクションをループして、他の属性と同じようにそれらの属性をマージできます。

于 2012-10-01T15:43:34.190 に答える
1

ご存知のように、クライアント側で素晴らしい検証を行うには、JavaScript (通常は jQuery) をクライアントで実行する必要があります。これはフレームワークによって生成される場合もあれば、自分で作成する必要がある場合もあります。

ブラッド・ウィルソンによるこの例を見たことがありますか? http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html

完全で非常に短い別の例を次に示します。

編集:標準の検証を使用する場合は、これらのスクリプトが参照されていることを確認してください。

これは web.config で必要です。

<appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

これをあなたのページ（またはマスターページ）で：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

最後に、何かを動的に変更する場合 (たとえば、ajax などを介して何かをロードする場合) は、控えめな検証を次のように再解析する必要があることを思い出してください。

$.validator.unobtrusive.parse($('formid'));
于 2012-08-14T08:56:37.460 に答える