怎么在.net中使用jquery自定义表单
创始人
2024-11-28 08:02:37
0次

1.工作前准备

1.1.实现的思路

思路一：

（1）ueditor添加自定义按钮

（2）绘制表单（控件会触发的脚步【暂时考虑范围】）【每个控件均需添加控件名称和创建名称】

（3）保存表单时建立数据库表（无需存储表信息），并保存html字符串

（4）修改表单需同时修改数据库

（5）表单发起获取数据封装成json，进行后台保存。

思路二：

（1）jquery 拖动自定义标签，在指定区域进行绘制

（2）表单属性设置相应的表单属性和表单基本布局

（3）设置每个控件的属性值

（4）把表单信息和控件以json的形式传入后台进行保存

（5）从后台获取数据json对象用jquery 绘制表单页面

（6）创建一张表（F-F200）把表单数据存入表单中。

最终选择的是【思路二】，原因是富文本编辑器绘制起来有很多自动生成的标签，让人感觉很是不爽。当然可以对ueditor进行处理（这个也是两年前的思路）。

1.2.实现过程的确定

整个的过程从借鉴开始网上有些类似的功能，从中得到很多帮助在这就不一一鸣谢了。然后就是没羞没臊的3天脚本修改工作【现在基本完成不过还在持续中】。后台数据的处理完全没有什么可说的，中间用的了一些缓存问题，本来说是用redis呢，结果商量一些说不用难部署（难部署？？？好吧一脸懵逼），就用了c#的CacheHelper。

2.具体实现

绘制表单预览与保存

怎么在.net中使用jquery自定义表单

2.1.脚本

以上是表单创建的js脚本。

怎么在.net中使用jquery自定义表单

就是上边那个图片的实现。

html重要分左中右三部分。左边是页面上所用到的标签区域，中间是展示区域，右边是表单和控件属性的设置区域。htnl 脚本如下：




 
 
 
 
 表单设计

 
 
 
 
 




 
  
  
   
    通用字段
    
     单行文本
     多行文本
     单选框
     日期
     多级下拉框
     文件上传
     分隔符
    
    
     数字
     多选框
     下拉框
     时间
     组合单选框
     图片
     HTML
    
    联系信息字段
    
     姓名
     地址
     电话
    
    
     电子邮箱
     地理位置
     网址
     
    
    宏控件
    
     当前登入人
    
    
     登入人部门
    
   
  
                             
    
   
              没有字段!      表单中没有字段，点击或拖动左边的组件添加字段。     
   
                                 预览       保存                      
  
                     

没有选择字段

    

请先在右侧选择需要编辑的字段，然后在此编辑字段的属性。

   
             表单属性                                          字段名称                                               字段类型         (?)                                   单行文本          多行文本          单选框          数字          多选框          下拉框                            电子邮箱          地址          地理位置          手机          姓名          上传文件          日期          时间          网址          组合单选框          多级下拉框          图片          配图商品          无图商品                                                字段长度         (?)                         短         中         长                                       字段布局         (?)                         一列         二列         三列         自动排列                                       日期格式         (?)                         YYYY - MM - DD         @*MM / DD / YYYY         DD / MM / YYYY*@                                       电话格式         (?)                         手机         座机                                       姓名格式         (?)                         普通         加长                              货币格式                 ¥ 人民币/日元         $ 美元         £ 英镑         ? 欧元                              层级                 2         3         4                                     
                  行标签          (?)                          
       
                  列标签          (?)                                     批量编辑         
                                    
                  选择项          (?)                                     批量编辑                            批量编辑                 
                     
                  商品列表          (?)                                                            + 添加配图商品                                                                 + 添加无图商品                                          商品用于向供应商询价           (?)
                          
                                        上传图片(?)                            上传图片                                                 
        设置         
                                   必须输入           观看视频说明">(?)                                          不许重复           (?)                                                                        隐藏数字           (?)                               
                           启用国际手机 查看资费明细">(?)           
                         验证码 查看资费明细">(?)                                   提交审核                                                               禁止手动标注           (?)                   
       
                     
        字段可见性                  可见                           隐藏         (?)        
                            
                  范围          (?)                  
                    最小值                     
                    最大值                                      
                              默认值         (?)                                               默认值         (?)                                               默认值         (?)                                               默认值         (?)                                               默认值         (?)                                             区号                   -                              总机                   -                              分机                                                         默认值         (?)                                               默认值         (?)                                                               分隔描述         (?)                                               HTML内容         如何插入图片和链接？">(?)                                               字段说明         (?)                                                      字段宽度（仅填表时可见）         观看视频说明注意：设置的宽度在设计模式不可见，仅在查看表单时才能看到效果。">(?)                         充满整行         整行宽度的1/2         整行宽度的1/3         整行宽度的1/4                              扩展属性                                                                     表单属性           
  •       表单名称              
    •             描述 利用HTML标记插入图片和链接。">(?)                   
  •               标签对齐方式                      上对齐        左对齐        右对齐             
    •      
  •       提交后跳转选项       
                               显示文本         观看视频说明">(?)                                  跳转至网页         观看视频说明">(?)                         Thank you. Your entry has been successfully submitted.                        
         
    •                                                 正在处理...              var M = { FRMNM: "表单名称", DESC: "", LANG: "cn", LBLAL: "T", CFMTYP: "T", CFMMSG: "提交成功。", SDMAIL: "0", CAPTCHA: "1", IPLMT: "0", SCHACT: "0", INSTR: "0", ISPUB: "1" }   var F = [];   var fieldsLimit = 150;   var goodsNumber = 60;   var imageNumber = 10;   var LVL = 4;   var isForTemplate = false;   M.GID = M.GID || '';      IMGBUCKET = "jsformimages";   head.js("/Content/FormDesign/js/jquery-1.7.2.min.js",     "/Content/FormDesign/js/jquery-ui-1.8.24.custom.min.js",     "/Content/FormDesign/js/wangEditor.min.js?v=20160929",     "/Content/FormDesign/js/ajaxfileupload.js?v=20160929",     "/Content/FormDesign/js/plupload.full.min.js?v=20160929",     "/Content/FormDesign/js/directfileupload.js?v=20160929",     "/Content/FormDesign/js/utils.js?v=20160929",     "/Content/FormDesign/js/widgets.js?v=20160929",     "/Content/FormDesign/js/jquery.mCustomScrollbar.min.js?v=20160929",     "/Content/FormDesign/js/jquery.mousewheel.min.js?v=20160929",     "/Content/FormDesign/js/formbuilder.js?v=20160929",     "/Content/FormDesign/js/address-cn.js?v=20160929");  

    以上脚本中主要的操作就是拖动，设置每个控件的时候改变对应json的值。至于样式的变化这里没绘制表单的时候复杂一些。如果那位哥们要用这个模板稍微看一下代码即可你只要修改一下地方即可：

    复制代码 代码如下:

    var M={FRMNM:"表单名称",DESC:"",LANG:"cn",LBLAL:"T",CFMTYP:"T",CFMMSG:"提交成功。",SDMAIL:"0",CAPTCHA:"1",IPLMT:"0",SCHACT:"0",INSTR:"0",ISPUB:"1"}
    var F=[];


    其中M是表单信息json串，F是所用控件数据集字符串。所以在绘制的后保存的时候把这两个值传到后台保存即可，只有修改的货在页面初始加载的时候进行赋值就行啦。

    2.2后台代码（MVC）

     [HttpGet]
  public ActionResult FormView(string formData, string parameterData)
  {
   
   ViewBag.FormInfo = Session["formData"];
   ViewBag.FormParameter = Session["parameterData"];
   　　return View();
  }
  /// 
  /// 页面预览
  /// 
  /// 表单信息
  /// 表单控件信息
  /// 
  [HttpPost]
  //[ValidateInput(false)]
  public ActionResult FormView(string formData, string parameterData)
  {
   Session["formData"] = formData;
   Session["parameterData"] = parameterData;
   return pageHelper.OpenTab("FormDesignDetail", "预览", "/CustomFrom/FormDesign/FormDesignDetail");
  }

    页面预览操作。不保存只是在页面上显示而已。因为绘制表单不处理样式的，所以最终样式以预览的样式为标准，所见即所得。

    /// 
  /// 保存表单信息
  /// 
  /// {表单信息，表单字段信息}
  /// 
  [HttpPost]
  [ValidateInput(false)]
  public ActionResult FormSave(string formData, string parameterData)
  {
   try
   {

    ActionResult result = base.AddExecuteScript();
    if (result != null)
     return result;
    string strGUID = Guid.NewGuid().ToString(); //直接返回字符串类型
    JavaScriptSerializer js = new JavaScriptSerializer();
    List fclist = js.Deserialize>(parameterData);
    FormDesign model = js.Deserialize(formData);
    model.FormInfo = formData;
    model.Form_Guid = strGUID;
    model.ZhuangTai = "0";
    model.LuRuRen = userHelper.GetUser().UName;
    model.LuRuRen = DateTime.Now.ToString("yyyy-MM-dd");
    var flag = bll.AddFormDesign(model, fclist);
    return flag ? pageHelper.CloseOpenTab("FormDesignAdd", "FormDesignDetail" + strGUID, "表单信息详情", "/CustomFrom/FormDesign/FormDesignDetail?formgid=" + strGUID) : pageHelper.ExtAlert("新增失败！");
   }
   catch (Exception ex)
   {
    return null;
   }
  }

    页面保存信息，把json信息的元素都进行存储。表单信息和表单控件信息外键关联用的是guid。

    注：代码请忽略一些细节和我们框架有关

    预览脚本

    怎么在.net中使用jquery自定义表单

    3.脚本要不要说一下？？？

    [中午吃饭的时候写的，周末抽时间详细描述一下哈]

    function createFields() {
 var b,
 //标签对其方式
 a = $('#fields').empty();
 if ('L' === M.LBLAL) {
  a.addClass('leftLabel')
 } else {
  if ('R' === M.LBLAL) {
   a.addClass('leftLabel labelRight')
  }
 }
 var mwith = 0;
 //循环数据 typ="text" min="2323" max="432" reqd="1" uniq="1" def="默认值"
 $.each(F, function (d, c) {
  if (!c) {
   return true
  }
  b = $(DEFFLD.field_li);
  b.attr('id', M.GID + d);
  b.attr("typ", c.TYP);
  if (c.min != undefined && c.min != "") {
   b.attr("min", c.min)
  };
  if (c.max != undefined && c.max != "") {
   b.attr("max", c.max)
  }
  ;
  if (c.reqd != undefined && c.reqd != "0") {
   b.attr("reqd", c.reqd)
  };
  if (c.uniq != undefined && c.uniq != "0") {
   b.attr("uniq", c.uniq)
  };
  if (c.def != undefined && c.def != "") {
   b.attr("def", c.def)
  };
　　　　//布局非单行布局的时候，div宽度增加。
  if (c.LAYOUT != undefined && c.LAYOUT != "") {
   b.addClass(c.LAYOUT)
   mwith += 200;
  }
  if (c.INSTR != undefined && c.INSTR != "") {
   b.addClass("fieldInstruct");
  }
  createField(b, c, d + 1)
  a.append(b); 
 });
 if ($.isEmptyObject(F)) {
  $('#nofields').show();
  $('#formButtons').hide()
 }
 if (M.GID != "") {
  a.append(DEFFLD['form_but'].html);
 }
}

    首先页面的布局是这样的

    怎么在.net中使用jquery自定义表单

    其中控件的属性值主要是在li特定属性中进行控制。上边代码就是根据json字符串进行对li进行赋值的。当表单如果要两行布局的时候宽度会进行增加

    function createField(r, q, num) {
 if (!q) {
  return
 }
 var p,
 o,
 l,
 m;
 // r.removeClass('one two three oneByOne fieldInstruct');
 // r.attr('title', '点击编辑，拖动排序');
 r.empty();

 $('#nofields').hide();
 $('#formButtons').show();
 l = $(DEFFLD[q.TYP].html);
 //l.attr("name","F"+num);
 if ('goods' == q.TYP && '1' == q.NOIMG) {
  l = $(DEFFLD.goodsnoimg.html)
 }
 if (q.TYP === 'html' || q.TYP === 'section') {
  p = l.find('label.desc');
  m = l.find('div.content')
 } else {
  p = l.filter('label.desc');
  m = l.filter('div.content')
 }
 if (q.TYP === 'likert') {
  p = m.find('label.desc')
 }
 o = p.find('span');
 if (q.REQD === '1') {
  o.removeClass('hide')
 }
 p.text(q.LBL);
 p.append(o);
 if (q.TYP === 'text' && '1' == q.QRINPUT) {
  m.find('i.qrinput').removeClass('hide')
  m.find('text').attr('name', 'F' + num);

 } else {
  if (q.TYP === 'phone' && q.FMT) {
   m.html(DEFFLD[$.format('phone_{0}_{1}', q.FMT, M.LANG)]);
   '1' == q.AUTH ? m.find('.sendcode').show() : m.find('.sendcode').hide();
   '1' == q.AUTH ? $('#signcnt').show() : $('#signcnt').hide()
  } else {
   if (q.TYP === 'date' && q.FMT) {
    m.html(DEFFLD[$.format('date_{0}', q.FMT)])
   } else {
    if (q.TYP === 'name' && q.FMT) {
     if (q.FMT === 'short') {
      m.html(DEFFLD.name_short)
     } else {
      m.html(DEFFLD[$.format('name_{0}_{1}', q.FMT, M.LANG)])
     }
    } else {
     if (q.TYP === 'address') {
      m.html(DEFFLD[$.format('address_{0}', M.LANG)]);
      if (q.DEF) {
       var g = q.DEF.split('-');
       m.find('select.province').empty().append($.format('', g[0] || '省/自治区/直辖市'));
       m.find('select.city').empty().append($.format('', g[1] || '市'));
       m.find('select.zip').empty().append($.format('', g[2] || '区/县'))
      }
     } else {
      if (q.TYP === 'radio') {
       createRadioItemsPreview(q, m)
      } else {
       if (q.TYP === 'checkbox') {
        m.empty();
        var b;
        var a;
        var i = false;
        $.each(q.ITMS, function (j, c) {
         if (c.IMG) {
          i = true;
          return false
         }
        });
        $.each(q.ITMS, function (j, c) {
         b = $(DEFFLD.item_checkbox_f);
         b.find('label').text(c.VAL);
         b.find(':checkbox').prop('checked', c.CHKED === '1');
         if (i) {
          if (c.IMG) {
           a = $('' + b.html() + '')
          } else {
           a = $('' + b.html() + '')
          }
          m.append(a)
         } else {
          m.append(b)
         }
        })
       } else {
        if (q.TYP === 'image') {
         m.find('img').attr('src', q.IMG ? IMAGESURL + q.IMG : '/rs/images/defaultimg.png')
         //m.find('img').attr('name','F'+num);
        } else {
         if (q.TYP === 'goods') {
          createGoodsItemsPreView(q, m)
         } else {
          if (q.TYP === 'section') {
           m.html($.enterToBr((q.SECDESC || '')))
          } else {
           if (q.TYP === 'html') {
            m.html($.encodeScript(q.HTML || ''))
           } else {
            if (q.TYP === 'likert') {
             createLikertPreview(q, l)
            } else {
             if (q.TYP === 'dropdown2') {
              var d = q.pN || '2';
              if (d !== '2') {
               d = parseInt(d);
               m.find('select').remove();
               for (var f = 0; f < d; f++) {
                m.append('')
               }
               m.find('select').css({
                width: (100 / d - 1) + '%',
                'margin-right': '1%'
               })
              }
              for (var e = 0; e < q.ITMS.length; e++) {
               if (q.ITMS[e].CHKED === '1') {
                m.find('select:first').empty().append($.format('', q.ITMS[e].VAL));
                break
               }
              }
             }
            }
           }
          }
         }
        }
       }
      }
     }
    }
   }
  }
 }
 if (q.TYP === 'dropdown') {
  $.each(q.ITMS, function (j, c) {
   if (c.CHKED === '1' && c.VAL) {
    m.find('select').append($.tmpl('${$data}', c.VAL));
    // return false
   }
   else {
    m.find('select').append($.format('', c.VAL));
   }
  })
 }
 if (q.DEF) {
  var s = [
   'text',
   'textarea',
   'number',
   'ulr',
   'email',
   'money',
   'phone'
  ];
  if ($.inArray(q.TYP, s) >= 0) {
   if (q.TYP === 'phone' && q.FMT === 'tel') {
    $.each(q.DEF.split('-'), function (j, c) {
     m.find(':text:eq(' + j + ')').val(c)
    })
   } else {
    l.find(':input').val(q.DEF)
   }
  }
 }
 if (q.FLDSZ) {
  m.find(':text,textarea,select').removeClass('s m xxl').addClass(q.FLDSZ)
 }
 var h = $(DEFFLD.instruct);
 if (q.INSTR) {
  h.text(q.INSTR)
 }
 r.append(DEFFLD.icon).append(l).append(h).append(DEFFLD.fieldActions);
 if (isInstruct(q.TYP)) {
  r.addClass('fieldInstruct')
 }
 if (q.LAY) {
  r.addClass(q.LAY)
 }
 if (q.SCU == 'pri') {
  r.addClass('private')
 }
 m.find(':text,textarea,select,img,hidden').attr('name', 'F' + num);
}

    上一篇：ASP.NET中如何实现弹出日历

    下一篇：asp.net进行mvc异步查询的示例

    相关内容

    热门资讯

    空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素，包括空调的型号、功率、使用环境和维护情况等。一般来说，空调可以连续...
    空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异，但一般来说，除湿...
    格力空调多长时间加一次氟利昂 1、一般情况下，空调对氟利昂的使用量是非常小的，所以在空调使用了四年左右的时候再考虑加也没问题。2、...
    空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时，空调才需要加氟。1、空调的室内机和室外机各有两个接口，当接...
    格调生活·C标思享荟：卡萨帝在... 9月12日的郑州龙湖金融岛，夜风轻拂，灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
    品牌价值破千亿、高端份额持续领... 9月12日，“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
    空调主板坏了修800还是换新的 空调主板坏了是修还是换新，需要考虑多个因素，以下是一些建议：1. 维修成本：如果维修费用较低，比如 ...
    空调开多久需要休息多长时间 问题：空调开多久需要休息多长时间回答：1、在使用空调的过程中，一般空调开7~8个小时左右需要休息2~...
    中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可，空调开机中间时段再清洗一次，空调关机时清洗一次，这样比较合理。2、空...
    中央空调氟利昂多久加一次 看空调制热和制冷程度，很多人的观点认为氟利昂必须一年放一次，其实这个观点是错误的，理解上面有点偏差，...