|
今天在做一个前端界面的时候，发生一个诡异的问题：有一个下拉框元素，在做表单序列化的时候，HttpContext.Request.Form.AllKeys中竟然没有这个元素！而同一个界面的另外一个元素却可以序列化！好在总算解决了，过程简单描述如下，给碰到类似问题的朋友提个醒吧。
现象描述
两个元素的界面代码如下：
<div class="form-group">
<label class="myControlLabel col-md-3" for="ddlCustomer"><span class="required">*</span> 元素A：</label>
<div class="myControls col-md-9">
<select id="ddlCustomer" class="formSelect">
</select>
</div>
</div>
<div class="form-group">
<label class="myControlLabel col-md-3" for="ddlFileType"><span class="required">*</span> 元素B：</label>
<div class="myControls col-md-9">
<select id="ddlFileType" class="formSelect">
<option value="" selected="selected">请选择</option>
<option value="A">A类</option>
<option value="B">B类</option>
<option value="C">C类</option>
<option value="D">D类</option>
</select>
</div>
</div>
看上去唯一的区别在于：元素A是通过jquery到后台取数据以后填充的，元素B是固定值的下拉框。网上有文章解释下拉框里默认是空值的话，有可能是取不到值，经过验证测试，不是这个原因。
问题解决
折腾半个小时，突然发现，其他一些文本框元素都是有name属性的，会不会下拉框元素也是用name序列化的？马上修改代码如下：
<div class="form-group">
<label class="myControlLabel col-md-3" for="ddlFileType"><span class="required">*</span> 档案类别：</label>
<div class="myControls col-md-9">
<select id="ddlFileType" name="ddlFileType" class="formSelect">
<option value="" selected="selected">请选择</option>
<option value="A">A类</option>
<option value="B">B类</option>
<option value="C">C类</option>
<option value="D">D类</option>
</select>
</div>
</div>
经过测试，问题解决！
原因分析
这是一个明显偷懒造成的结果，其实在写元素的时候，每个元素都应该写上id和name。为什么元素A不用写呢？
经过分析js代码，发现了这句：
var divSelectHtml = '<div name="' + taget + '" class="mySelector"><input name="' + taget + '" type="hidden" value="" id="selector_' + taget + '" />' + aBtn + '\
<div class="mySelector_panel"><div class="mySelector_search"><input type="text" autocomplete="off"></div>' + selectorResultHtml + '</div></div>';
$this.hide();
$('#' + taget).next('[class="mySelector"]').remove();
$('#' + taget).after(divSelectHtml);
$('#selector_' + taget).val(selectedValue);
原来，由于此元素被js重写了，也加上了name属性，因此就可以被序列化了！
由于之前都是拷贝之前的代码，运气比较好，都是带name的，所以没有发现问题，这次偶尔自己写了一下，立马出问题，还是基础不牢，地动山摇啊。
写下此篇文章，引以为戒。 | 
转播
