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 代码会modal使用相关数据填充 div 并将其显示在屏幕上。当用户按下“提交”时，将使用 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 回答