1

オブジェクトのコレクションを追加、編集、削除するためのページを作成したいと思います。javascriptで追加/編集/削除操作をしたい。現在、次のHTMLがあります。

<table class="table table-striped">
    <thead>
        <tr>
            <td>Name</td>
            <td>Number</td>
            <td>Country</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
    @foreach(var n in Model)
    {
        <tr>
            <td class="name">@n.Name</td>
            <td class="value">@n.Value</td>
            <td class="country-name">@n.CountryName</td>
            <td><ahref="#">Edit</a> | <a href="#">Delete</a></td>
        </tr>
    }
    </tbody>
</table>

<div class="modal">
    <form>
        <label>Name</label>
        <input type="text" />
        <label>Value</label>
        <input type="text />
        <button type="submit">Save</button>
    </form>
</div>

ユーザーが「編集」を押すと、JavaScriptコードがmodaldivに関連データを入力し、画面に表示します。ユーザーが[送信]を押すと、データはajaxで送信され、モーダルダイアログは非表示になり、テーブルは新しいデータで更新されます。

送信する前にフォームを検証したいのですが。可能であれば、目立たないクライアント検証システムを利用して、モデルクラスのデータアノテーションへの変更がクライアント側のコードに自動的に反映されるようにしたいと思います。より標準的な例では、@Html.EditorFor()メソッドを使用して正しいHTMLを生成できますが、ここではこれは不可能です。

目立たない検証は、次のようにhtml要素の属性を使用して制御されます。

<input data-val="true" data-val-required="This field is required." id="Name"
    name="Name" type="text">
<span class="field-validation-valid" data-valmsg-for="Name"
     data-valmsg-replace="true"></span>

クラスの特定のインスタンスを参照せずに、特定のモデルクラスに関連するHTMLを生成することは可能ですか？または、他に使用できる方法はありますか？

4

2 に答える 2

1

受け入れられているアプローチは、モーダルdivに部分ビューを使用することです。これには、モデルのインスタンスは必要ありません。

EditorForメソッドのジェネリック型パラメーターを指定して、新しいHtmlHelperを作成することもできます。以下のスニペットは、MVC3プロジェクトテンプレートに付属するLogOn.cshtmlビューに配置されました。

@(EditorExtensions.EditorFor<MvcApplication9.Models.RegisterModel, string>(new HtmlHelper<MvcApplication9.Models.RegisterModel>(ViewContext, this), m => m.Email))
于 2012-11-01T17:21:11.320 に答える
0

入力のdata-val属性を手動で生成するメソッドを作成することにしました。ここにあります：

public static MvcHtmlString DataAttributesFor<TMdl>(Expression<Func<TMdl,object>> exp)
{
    string prop;
    if (exp.Body is UnaryExpression)
        prop = ((exp.Body as UnaryExpression).Operand as MemberExpression).Member.Name;
    else if (exp.Body is MemberExpression)
        prop = (exp.Body as MemberExpression).Member.Name;
    else
        throw new ArgumentException("Given selector expression is unsupported.");


    var attrs = typeof(TMdl).GetProperty(prop).GetCustomAttributes();
    var dict = new Dictionary<string,string>();
    foreach (var elm in attrs)
    {
        if (elm.GetType() == typeof(RequiredAttribute))
            dict.Add("data-val-required", ((RequiredAttribute)elm).FormatErrorMessage(null));
        else if (elm.GetType() == typeof(RegularExpressionAttribute))
        {
            var re = (RegularExpressionAttribute)elm;
            dict.Add("data-val-regex", re.FormatErrorMessage(null));
            dict.Add("data-val-regex-pattern", re.Pattern);
        }
        else if (elm.GetType() == typeof(StringLengthAttribute))
        {
            var sl = (StringLengthAttribute)elm;
            dict.Add("data-val-length", sl.MaximumLength.ToString());
            dict.Add("data-val-length-max", sl.FormatErrorMessage(null));
        }
    }

    if (dict.Count == 0)
        return null;

    var sb = new StringBuilder("data-val='true'");
    foreach (var rr in dict)
        sb.Append(" " + rr.Key + "='" + rr.Value + "'");

    return new MvcHtmlString(sb.ToString());            
}

次のように使用します。

<input id="record-name" type="text" name="record-name"
 @(HtmlExtensions.DataAttributesFor<PhoneNumberVm>(elm => elm.Name))
/>

この方法はそれほど堅牢ではなく、すべてのデータ注釈属性に対して機能するわけではありませんが、誰かにとって有用な出発点となる可能性があります。

于 2012-11-02T14:51:06.870 に答える