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

  • 问题

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

    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, 这里是我的文章。

    谢谢。

    2015年12月30日 8:06

全部回复

  • 你好,

    根据你的代码,我没有发现有关设置输入提示的代码,我建议你可以使用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>

    2016年1月4日 2:38
    版主
  • 参考:

    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

    2016年4月9日 14:50