ASP.NET MVC 表单中List字段的前端验证问题

Question

现有两个类：代码部分我就简要写了

class Style{  // 款式类：已使用 Data Annotations 对字段进行了设置

包含字段：int Id  /  string Name  /  double Price  /  int Count

}

class Product{ // 产品类

包含字段：int Id  /  string Name  /  List<Style> Styles

}

在视图中的代码：

@model Product // 产品类作为模型

@using(Html.BeginForm()){

@:产品名称：@Html.TextBoxFor(x=>x.Name)

<ul>  // 下面是款式列表

@for(var i=0; i < Module.Styles.Count; i++){

<li>

@:款式名称：@Html.TextBoxFor(x=>x.Styles[i].Name)

@:价格：@Html.EditorFor(x=>x.Styles[i].Price)

@:库存：@Html.EditorFor(x=>x.Styles[i].Count)

<input type="button" value="删除" class="deleteStyle" />

<input type="button" value="添加" class="addStyle" />

<div>

@Html.ValidationMessageFor(x=>x.Styles[i].Name)

@Html.ValidationMessageFor(x=>x.Styles[i].Price)

@Html.ValidationMessageFor(x=>x.Styles[i].Name)

</div>

</li>

}

</ul>

<input type="submit" value="保存" />

}

由于Razor的辅助方法的作用，下面两种方法会生成不冲突的标签名

@Html.EditorFor(x=>x.Styles[i].Count) ->生成标签：<input type="number" id="Styles_0__Count" name="Styles[0].Count".../>

@Html.ValidationMessageFor(x=>x.Styles[i].Count) -> 生成标签：<span data-valmsg-for="Styles[0].Count" ...></span>

在前端的“添加”功能，我使用JS将当前Style所在<li>标签Copy一份，然后将Copy中的各标签的属性中的数值替换成新的数值。以此来保证在后台可以接收到所有的Style。

问题描述：

在页面渲染时生成的Style，在编辑时，前端都有输入规范的提示，但是新添加的（也就是在前端用JS Copy的）则没有对应的输入提示。

还望解答。

如果有对后台对Styles的接收感兴趣的朋友，请前往 http://blog.csdn.net/cdtaixf/article/details/50130669, 这里是我的文章。

谢谢。

Answer 1

你好，

根据你的代码，我没有发现有关设置输入提示的代码，我建议你可以使用placeholder属性来添加输入提示。

使用这个属性需要注意一下浏览器的兼容性，你可以参考这个链接： http://www.w3schools.com/tags/att_input_placeholder.asp

另外，你也可以使用JQuery来为新添加的textbox设置输入提示，代码如下：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var mask = $(".text-box").first().attr("data-val-number");
            $(".text-box").each(function () {
                //当你添加新的textbox时，你可以使用下面两行代码添加输入提示。
                $(this).val(mask);
                $(this).css("color", "gray")
            });

            $(".text-box").focusin(function () {
                var value = $(this).val();
                if (value == mask) {
                    $(this).val("");
                    $(this).css("color", "black")
                }
            });
            $(".text-box").focusout(function () {
                var value = $(this).val();
                if (value == "") {
                    $(this).val(mask);
                    $(this).css("color", "gray")
                }
            });
        });
    </script>

       <div>
            <input id="txtAge1" type="text" class="text-box" placeholder="" value="" data-val-number="Age must be a number" />
            <input id="txtAge2" type="text" class="text-box" placeholder="" value="" data-val-number="Age must be a number" />
            <input id="txtAge3" type="text" class="text-box" placeholder="" value="" data-val-number="Age must be a number" />

        </div>

Answer 2

参考：

Asp.net MVC&JQuery 应用（表单验证）

---

If my post is helpful,please help to vote as helpful, if my post solve your question, please help to make it as answer. My sample