1、动态添加文件框
前台页面关键部分:
<script type="text/javascript"> //添加一个选项 function AddFileCtrol() { //新建一个Div元素 var innerDiv = document.createElement("div"); //添加到Div元素中 document.getElementById("dv1").appendChild(innerDiv); //建立input元素 var fileCtrol = document.createElement("input"); //设置元素的名称 fileCtrol.name = "txtSelections"; //设置元素的类型 fileCtrol.type = "text"; //添加到span元素 innerDiv.appendChild(fileCtrol); //建立input元素 var btnCtrol = document.createElement("input"); //设置元素的名称 btnCtrol.name = "btnDelete"; //设置元素的类型 btnCtrol.type = "button"; //设置元素的显示文字 btnCtrol.setAttribute("value", "删除") //绑定函数到onclick事件 btnCtrol.onclick = function () { DeleteFileCtrol(this.parentNode) }; //添加到div元素 innerDiv.appendChild(btnCtrol); } //删除一个上传控件 function DeleteFileCtrol(obj) { document.getElementById("dv1").removeChild(obj); } </script> <table> <tr> <td align="left" width="50%"> <input id="btnAttch" type="button" value="添加选项" onclick="AddFileCtrol();" /><br /> <div id="dv1" runat="server"> </div> </td> </tr> </table>
后台操作关键部分:
protected string CombineSelections() { string selections = ""; if (Request.Form.GetValues("txtSelections")!=null) { selections = "<Selections>"; string[] str = Request.Form.GetValues("txtSelections");//把每个动态文件框的内容保存在str中 for (int i = 0; i < str.Length; i++) { selections += "<Selection>(" + (char)(65+i)+ ")" + str[i] + "</Selection>"; } selections += "</Selections>"; } return selections; }
1.1、把xml取出来并且动态生成前台文本框:
后台代码如下:
protected void SplitSelections(string Selections) { List<string> selections = new List<string>();//保存每个选项的实际内容 XmlDocument dom = new XmlDocument(); dom.LoadXml(Selections.Trim());//把striong类型的转换成xml类型 XmlElement root = dom.DocumentElement;//取xml文档的根节点 int i = 0; foreach (XmlNode node in root) { if (node.Name == "Selection") { selections.Add(node.InnerText.Substring(3));//每个选项格式为,例如:(A)今天下雨。所以从第3个起才是真正内容 //动态生成实际的选项,包括控件。 hfSelections.Value = hfSelections.Value + "<div><input type="text" name="txtSelections" value=""+selections[i++]+""/><input type="button" value="删除" onclick="DeleteFileCtrol(this.parentNode)"/></div>"; } } }
3、把数据库里面的数字转换成文字(利用枚举)
前台关键代码如下:
<td align="center"> <%#Enum.GetName(typeof(Utility.Product.ProductStatusTypeEnum),Eval("ProductStatusType"))%> </td>
4.获取下拉框的值:
var type = document.getElementById("ddlType").options[document.getElementById("ddlType").selectedIndex].value;//获取下拉框的值
5.获取多个name相同的text的值
var Selections = document.getElementsByName("txtSelections");
for (var i = 0; i < Selections.length;i++)
{
hasSelections = 1;
if(Selections[i].value=="")
{
hasSelectionsValues = 0;
}
}
6.js做的保存事件的验证:
<asp:Button ID="btnSave" runat="server" Text="保存" Width="50px" Height="35px" OnClientClick="return showErr()" OnClick="btnSave_Click" />
7、在Repeater控件中调用带参数的JS(此参数与绑定的数据有关)函数:
前台:
function DeleteLab(Id) { if (confirm('确认要删除此题库?')) { var ids = $("#hfIds").val(); if (ids.indexOf(Id + ",") > -1) ids = ids.replace(Id + ",", ""); else if (ids.indexOf("," + Id, "") > -1) ids = ids.replace("," + Id, ""); else ids = ids.replace(Id, ""); $("#hfIds").val(ids); $("#btnRefresh").click(); } return false; }
<td align="center">
<asp:Button ID="btnDel" runat="server" Text="删 除" OnClientClick=<%# System.String.Format("return DeleteLab('{0}');", Eval("Id")) %> />
</td>