MVC:页面提交JQ动态生成的输入框的值得解决方案:

一,动态生成JS写法

  <script type="text/javascript">
        var numlist = new Array(2, 3, 4, 5);
        function Additional() {
            var num = $("#AdditionalNum").val();  //定义的隐藏的保存当前在页面上存在的数量,最多五个
            if (num == 5) {
                alert("最多加五个");
                return;
            }
            var deleteNo = numlist.shift();
            num++;
            var append = ‘<li class="list-group-item"><form class="form-inline" role="form" action="#">‘;
            append += ‘ <input type="text" class="form-control"  name="Text‘ + deleteNo + ‘" placeholder="名称2"> <input type="text" class="form-control" id="Text4" placeholder="名称2">‘;
            append += ‘<input type="button" id="Button1" value="确定" class="btn btn-info"></form></li>‘;
            $("#AdditionalList").append(append);
            $("#AdditionalNum").val(num);
            Maopao(numlist);
            //alert(num);
        }
        function AdditionalRemove(obj, id) {
            var num = $("#AdditionalNum").val(); //定义的隐藏的保存当前在页面上存在的数量删除是减少
            num--;
            $(obj).parent().parent().parent().parent().remove();  //移除父节点
            $("#AdditionalNum").val(num);       //定义的隐藏的保存当前在页面上存在的数量
            numlist.push(id);
        }
        function Maopao(obj) {
            for (var i = 0; i < obj.length - 1; i++) {
                if (obj[i] > obj[i + 1]) {
                    var temp = obj[i];
                    obj[i] = obj[i + 1];
                    obj[i + 1] = temp;
                }
            }
        }
    </script>

二,MCV后台获取代码

        public ActionResult Test(FormCollection collection)
        {
            //var inputCount = 0; //可以动态获取文本框的数量,这里定义为五个
            var inputValues = new List<string>();//将提交过来的输入框的值放到这个集合

            for (int i = 1; i <= 5; i++)
            {
                if (!string.IsNullOrEmpty(collection["Test" + i]))
                {
                    inputValues.Add(collection["Test" + i]);
                }
            }
            return RedirectToAction("Index");
        }

三,总结

1,用为空性判断,如果输入的为空则会过滤,以至于不会将空值插入到数据库报错

2,前端遍历生成的input的Name不能相同,则需要处理,如上例子

时间: 2024-10-16 13:31:51

MVC:页面提交JQ动态生成的输入框的值得解决方案:的相关文章

JQ动态生成的元素,原事件绑定失效

Old Code: $('code').click(function () { console.log($(this).text()); }); New Code:(.container 是<code>所在的div) $('.container').on("click", "code", function () { console.log($(this).text()); }); 之前只是知道官方推荐使用on来生成事件,并不知道其好处,这次知道了 话说,

js、jq动态生成海报+动态生成二维码+Logo图片

前言: 最近做项目的时候移动端的发现板块作品需要生成海报,经查阅各种博客发现并没有很多资源,自己就着手写了一个分享给大家 废话不再多说,我们先看一下效果: 我是一名后端程小猿,写成这样已经很不错了,自我感觉良好 哈哈…… 废话不多说,我们开始上代码(怕对小白不友善,这里直接上源码,我自己就是小白 哈哈……): 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

动态生成DOM元素绑定click事件无效问题

在页面里,jq动态生成dom节点,该节点的click事件无效. 如,html里动态添加class名为.del的<a>, js文件中: $('.del').bind('click',fuction(){ alert('sda'); }) 不响应, 网上说可以用live代替bind事件,但在jq1.7版本开始,就取消了live事件, 解决方法: on()事件 代码改为: $(document).on('click','.del',fuction(){ alert('sda'); }) 这样就搞定了

jquery访问动态生成元素

最近在做留言板过程中 ,遇到一个问题:通过jq动态生成的元素无法绑定事件,上网 查资料得知,动态生成元素需要通过事件代理来实现 这里直接介绍我采用的on()方式实现 : jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],f

解决 Vue 动态生成 el-checkbox 点击无法赋值问题

博客地址:https://ainyi.com/#/68 最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的 例如: 定义的 data 的 form 里面是空对象,需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList,这个就是动态生成的表单数据 v-for 循

MVC 根据模板动态生成静态页面

不是自己想出来的,找了好久没有找到相关的内容,根据源码发现 返回视图时时返回的ActionResult 类型的对象,然后执行ExecuteResult 方法,源码如下: 1 public override void ExecuteResult(ControllerContext context) 2 { 3 if (context == null) 4 { 5 throw new ArgumentNullException("context"); 6 } 7 if (string.Is

在JSP中动态生成随机验证码,登录时后台校验验证码,以及如何避免同一个验证码被重复提交爆破密码

只需几步就可以生成动态随机的验证码,最终效果如下图: 一 前台显示页面login.jsp 其中验证码显示的是一张图片,链接指向的是生成验证码的servlet,同时点击图片后触发changeImg()这个js函数,使其动态生成一个新的验证码,这个函数中的参数t=Math.random()并不会参与验证码的生成,它的作用仅仅只是表示每次提交的并不是同一个请求,需要单独处理,完整的login.jsp代码如下: <%@ page language="java" contentType=&

JS实现动态生成表格并向后端提交表格数据(一)

前段时间开发了一些web应用,其中就有涉及到动态的表格问题,因为很久没有写web前端了,所以在网上找了一些资料,发现很零碎,于是自己就根据找到的资料写了这么一个小功能,主要是供自己记忆,如果能帮到你很荣幸,如果你有更好的方法,也可以相互讨论,相互学习一下. 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. 1 <script src="../js

JS实现动态生成表格并提交表格数据向后端 表格中数据转为json

原文地址 需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面div中事先创建一个空白表格,可以根据需求而定,我这里是一个带表头的表格 <table border="0" style="text-align: center;" width="100%" id="myTable">