HTML下拉框绑定XML

传统的HTML下拉框数据通常是硬编码在控件内,但这种方法不够灵活。当需求变化时,需要更新数据并重新发布程序。本文探讨了三种下拉框数据存储方式:XML文件、HTML和JS,并提供了使用XML文件进行数据绑定的简单实现,通过请求XML文件动态加载下拉框数据,提高了系统的灵活性。

     

    一直以来界面上下拉框中的数据,一般都是写在控件内。但这样及其不灵活,需求改变了,下拉框需要追加一些数据,那我们必须重新修改我们控件中的数据,再将程序打包发布。不仅浪费人力、物力,而且及其不安全。

    下拉框数据存储的现在使用的3种形式:



一、具体实现



 


1XML文件


<<span style="font-size:18px;">?xmlversion="1.0" encoding="UTF-8"?>
<Options>
<option>考试系统</option>
<option>基础系统</option>
<option>权限系统</option>
<option>评教系统</option>
  <option>新生系统</option>
  <role>超管理员</role>
  <role>管理员</role>
  <role>操作员</role>
</Options>
 </span>

2HTML

@* 页面加载时读取xml文件 *@
<bodyonload="GetDataFromXML();">
          <div>
            <table width="689"border="0" cellpadding="2" cellspacing="10"bordercolor="#FFFFFF">
            <tr>
                <tdwidth="173" height="21">用户名</td>
                <tdwidth="168">手机号</td>
                <tdwidth="149">组织</td>
                <tdwidth="163">角色</td>
            </tr>
            <tr>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="UserOne" type="text" id="txtUserOne">
                    </form>
                </td>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="PhoneOne" type="text" id="txtUserOne5">
                    </form>
                </td>
 
                <td>
                    <divclass="result">
                        <selectclass="easyui-combobox" name="select"onchange="SelectChanage();" style="width:150px">
                           <option>==请选择组织==</option>
                        </select>
                    </div>
 
                </td>
                <td>
                    <divclass="role">
                        <selectclass="easyui-combobox" name="SelectRole"  style="width:150px"onchange="SelectChanage();" >
                           <option>==请选择角色==</option>
                    </div>
                </td>
 
            </tr>
 
            <tr>
                <td>
                    <inputname="UserTwo" type="text"id="txtUserTwo"></td>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="PhoneTwo" type="text" id="txtUserOne6">
                    </form>
                </td>
 <span style="font-size:18px;">
                <td>
                    <divclass="result">
                        <selectclass="easyui-combobox" name="select"  onchange="SelectChanage();"style="width:150px">
                           <option>==请选择组织==</option>
                        </select>
                    </div>
                </td>
 
                <td>
                    <divclass="role">
                        <selectclass="easyui-combobox" name="SelectRole"  style="width:150px"onchange="SelectChanage();" >
                           <option>==请选择角色==</option>
                    </div>
                </td>
            </tr>
 
            <tr>
                <td>
                    <inputname="txtUserThree" type="text"id="txtUserThree"></td>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="txtPhoneThree" type="text"id="txtUserOne7">
                    </form>
                </td>
                <td>
                    <divclass="result">
                        <selectclass="easyui-combobox" name="select"  onchange="SelectChanage();"style="width:150px">
                           <option>==请选择组织==</option>
                        </select>
                    </div>
                </td>
 
                <td>
                    <divclass="role">
                        <selectclass="easyui-combobox" name="SelectRole"  style="width:150px"onchange="SelectChanage();" >
                           <option>==请选择角色==</option>
                    </div>
                </td>
            </tr>
 
            <tr>
                <td>
                    <inputname="txtUserFour" type="text"id="txtUserFour"></td>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="txtPhoneFour" type="text"id="txtUserOne8">
                    </form>
                </td>
 
                <td>
                    <divclass="result">
                        <selectclass="easyui-combobox" name="select"  onchange="SelectChanage();"style="width:150px">
                           <option>==请选择组织==</option>
                        </select>
                    </div>
                </td>
 
                <td>
                    <divclass="role">
                        <selectclass="easyui-combobox" name="SelectRole"  style="width:150px"onchange="SelectChanage();" >
                           <option>==请选择角色==</option>
                    </div>
                </td>
            </tr>
 
            <tr>
                <td colspan="4"style="height:70px">
                    <divalign="right">
                       <input type="button" name="btnSkip"  id="btnSkip" value="跳过">
                       <input type="button" name="btnNext"  id="btnNext" value="下一步" onclick="SelectFunction()">
                    </div>
                </td>
            </tr>
        </table>
        </div>
</div>
</body>
</html></span>


3JS

<script>
 
        //创建XMLHttpRequest对象
        function CreateRequest() {
            //火狐、谷歌……
            if (window.XMLHttpRequest)
                return new XMLHttpRequest();
            else if (window.ActiveXObject)
            //ie6需要创建ActiveObject对reponseXML对象进行加载后对getElementByTagName进行解析
                return newActiveXObject("Microsoft.XMLHTTP");
            else
                return false;
        }
 
        //页面加载时触发
        function GetDataFromXML() {
 
            //创建XMLHttpRequest对象
            var request = CreateRequest();
            if (!request)
                return;
 
            //打开外部的XML文件
            request.open("GET","../../Common/binddata.xml");
            //注册回调函数,实际上在每次XMLHttpRequest对象的readyState属性的值发生变化的时候都会被调用,但是我们实际上只关心
            request.onreadystatechange =function () {
                if (request.readyState == 4){                  
                    if (request.status == 200){
                        var xmlDoc;
 
                        //IE6
                        if(window.ActiveXObject) {
                            xmlDoc = newActiveXObject("Microsoft.XMLDOM");
                            xmlDoc.async =false;
                           xmlDoc.load(request.responseXML);//不可以是responseText
                        }
                        //Firefox
                        else {
                            xmlDoc =request.responseXML;
                        }
                       
                        //读取XML组织节点数据
                        options =xmlDoc.getElementsByTagName("option");
                        //读取XML角色节点数据
                        roles =xmlDoc.getElementsByTagName("role");
 
                        //将XML中的组织数据赋给下拉框
                        ListOptions();
 
                        //将XML中的角色数据赋给下拉框
                        ListRoles();
                    }
                }
            }
 
            //向服务器发送数据,但不带有数据,一般用get方式提交
            request.send(null);
        }
 
        //为组织添加选项
        function ListOptions() {
            //获得html中关于组织的下拉框
            var select =document.getElementsByName("select");
 
            //j表示下拉框的选项,i标识XML中的数据
            //options.length代表的是XML中数据的个数
            //select[j].options[i + 1] 其中的options是下拉框select的属性,表示其中的选项
            //newOption(options[i].firstChild.data);  Option为XML的属性
            //firstChild为被选节点的第一个子节点
            for (var j= 0; j <select.length;j++){
                for (var i = 0; i <options.length; i++) {
                    select[j].options[i + 1] =new Option(options[i].firstChild.data);
                }
            }
 
        }
 
        //为角色下拉框添加数据
        function ListRoles() {
            var selectRole =document.getElementsByName("SelectRole");
            for (var j = 0; j <selectRole.length; j++) {
                for (var i = 0; i <roles.length; i++) {
                    selectRole[j].options[i+1]= new Option(roles[i].firstChild.data);
                }
            }
        }
    </script>

   

注意:request.open("GET", "../../Common/binddata.xml"); XML所在的相对路径

    以上实例只是简单的实现,实现过后发现简单的几段代码就解决了我们长期以来将数据写死在程序中的问题。为了系统更加灵活,先把一些基本的数据写灵活。

<think>我们正在使用WebForm实现一个下拉框(DropDownList)的数据绑定,并且采用三层架构(通常包括表示层UI、业务逻辑层BLL、数据访问层DAL)进行开发。三层架构的基本思想:1.表示层(UI):负责用户界面显示和用户交互,这里就是我们的WebForm页面。2.业务逻辑层(BLL):负责处理业务逻辑,调用数据访问层的方法,并对数据进行处理。3.数据访问层(DAL):负责与数据库交互,执行数据的增删改查操作。我们要实现的功能是:在WebForm页面上有一个DropDownList控件,它需要绑定从数据库获取的数据(例如,绑定一个分类列表,显示分类名称,值对应分类ID)。步骤:1.在数据访问层(DAL)中编写从数据库获取数据的方法(比如获取所有分类)。2.在业务逻辑层(BLL)中调用DAL的方法,并返回数据给表示层。3.在表示层(UI)的WebForm页面中,调用BLL的方法获取数据,并将数据绑定到DropDownList控件。下面我们逐步实现:第一步:创建数据访问层(DAL)方法假设我们有一个分类表(Category),包含CategoryID和CategoryName两个字段。在DAL中,我们创建一个类(例如CategoryDal),并编写一个获取所有分类的方法。第二步:创建业务逻辑层(BLL)方法在BLL中,创建对应的类(例如CategoryBll),并编写一个调用DAL方法的方法。第三步:在表示层(UI)绑定数据在WebForm页面的Page_Load事件中,调用BLL的方法获取数据,然后绑定到DropDownList控件。具体代码示例:1.数据访问层(DAL)代码示例:```csharppublicclassCategoryDal{//假设我们使用SqlConnection连接数据库publicDataTableGetAllCategories(){stringconnectionString="你的数据库连接字符串";using(SqlConnectionconn=newSqlConnection(connectionString)){stringsql="SELECTCategoryID,CategoryNameFROMCategory";SqlDataAdapterda=newSqlDataAdapter(sql,conn);DataTabledt=newDataTable();da.Fill(dt);returndt;}}}```2.业务逻辑层(BLL)代码示例:```csharppublicclassCategoryBll{publicDataTableGetAllCategories(){CategoryDalcategoryDal=newCategoryDal();returncategoryDal.GetAllCategories();}}```3.表示层(UI)代码示例(WebForm页面):在.aspx页面中放置一个DropDownList控件:```html<asp:DropDownListID="ddlCategory"runat="server"DataTextField="CategoryName"DataValueField="CategoryID"></asp:DropDownList>```在.aspx.cs页面的Page_Load事件中绑定数据:```csharpprotectedvoidPage_Load(objectsender,EventArgse){if(!IsPostBack)//确保只在第一次加载时绑定,避免回发后重新绑定{CategoryBllcategoryBll=newCategoryBll();DataTabledt=categoryBll.GetAllCategories();ddlCategory.DataSource=dt;//设置数据源ddlCategory.DataBind();//绑定数据}}```这样,当页面第一次加载时,就会从数据库获取分类数据并绑定下拉框。注意事项:-数据库连接字符串应该放在Web.config中,通过ConfigurationManager.ConnectionStrings来获取,而不是硬编码。-我们这里返回的是DataTable,也可以返回List<Category>(自定义实体类),然后在绑定的时候设置DropDownList的DataTextField和DataValueField为实体类的属性名。-使用三层架构可以降低各层之间的耦合,便于维护和扩展。如果使用实体类的方式,我们可以这样:定义实体类(Model层):```csharppublicclassCategory{publicintCategoryID{get;set;}publicstringCategoryName{get;set;}}```修改DAL方法,返回List<Category>:```csharppublicList<Category>GetAllCategories(){List<Category>list=newList<Category>();//数据库操作,将读取的数据填充到list中//...省略数据库操作代码,可以参考上面的连接方式using(SqlConnectionconn=newSqlConnection(connectionString)){stringsql="SELECTCategoryID,CategoryNameFROMCategory";SqlCommandcmd=newSqlCommand(sql,conn);conn.Open();SqlDataReaderreader=cmd.ExecuteReader();while(reader.Read()){Categorycategory=newCategory();category.CategoryID=Convert.ToInt32(reader["CategoryID"]);category.CategoryName=reader["CategoryName"].ToString();list.Add(category);}}returnlist;}```修改BLL方法,同样返回List<Category>:```csharppublicList<Category>GetAllCategories(){CategoryDalcategoryDal=newCategoryDal();returncategoryDal.GetAllCategories();}```在UI层绑定:```csharpprotectedvoidPage_Load(objectsender,EventArgse){if(!IsPostBack){CategoryBllcategoryBll=newCategoryBll();List<Category>list=categoryBll.GetAllCategories();ddlCategory.DataSource=list;ddlCategory.DataTextField="CategoryName";//实体类的属性名ddlCategory.DataValueField="CategoryID";//实体类的属性名ddlCategory.DataBind();}}```这样我们就完成了使用三层架构在WebForm中绑定DropDownList的数据。引用说明:在WebForm中,数据绑定控件如DropDownList的绑定方式如上面代码所示,通过设置DataSource和调用DataBind方法实现[^1][^2]。同时,我们遵循三层架构的设计,将代码分层,提高了代码的可维护性[^4]。§§相关问题§§1.在WebForm中如何实现DropDownList的级联绑定?2.三层架构中如何实现依赖注入以降低层之间的耦合?3.WebForm中DropDownList控件的数据绑定有哪些常用事件?</think>### WebForm DropDownList 数据绑定(三层架构实现) 在 WebForm 中使用三层架构实现 DropDownList 数据绑定的步骤如下: #### 1. 三层架构分层结构 ``` 表示层 (UI) : .aspx 页面 + 后台代码 业务逻辑层 (BLL) : 业务处理类 数据访问层 (DAL) : 数据库操作类 ``` #### 2. 具体实现步骤 **① 数据访问层 (DAL)** ```csharp public class CategoryDAL { public DataTable GetAllCategories() { using (SqlConnection conn = new SqlConnection("连接字符串")) { string sql = "SELECT CategoryID, CategoryName FROM Categories"; SqlDataAdapter da = new SqlDataAdapter(sql, conn); DataTable dt = new DataTable(); da.Fill(dt); return dt; // 返回数据表 } } } ``` **② 业务逻辑层 (BLL)** ```csharp public class CategoryBLL { public DataTable GetCategories() { CategoryDAL categoryDal = new CategoryDAL(); return categoryDal.GetAllCategories(); // 调用DAL层 } } ``` **③ 表示层 (UI)** `.aspx` 页面: ```html <asp:DropDownList ID="ddlCategory" runat="server" DataTextField="CategoryName" DataValueField="CategoryID"> </asp:DropDownList> ``` 后台代码 `.aspx.cs`: ```csharp protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) // 首次加载时绑定 { BindCategoryDropdown(); } } private void BindCategoryDropdown() { CategoryBLL categoryBll = new CategoryBLL(); DataTable dt = categoryBll.GetCategories(); // 调用BLL层 ddlCategory.DataSource = dt; // 设置数据源 ddlCategory.DataBind(); // 执行绑定 // 添加默认选项 ddlCategory.Items.Insert(0, new ListItem("--请选择--", "0")); } ``` #### 3. 关键要点说明 1. **数据绑定属性** - `DataTextField`:显示文本的字段名(对应数据库列名) - `DataValueField`:选项值的字段名(对应数据库主键) 2. **绑定时机** 在 `!IsPostBack` 条件下绑定,避免回发时重复绑定[^1] 3. **三层调用关系** UI → BLL → DAL → 数据库,各层职责分离[^4] 4. **数据源类型** 可使用 `DataTable`、`List` 或 `IEnumerable` 作为数据源 #### 4. 优化建议 1. **使用实体类代替 DataTable** ```csharp // 在BLL层转换 public List<Category> GetCategoryList() { DataTable dt = GetCategories(); return dt.AsEnumerable().Select(row => new Category { ID = row.Field<int>("CategoryID"), Name = row.Field<string>("CategoryName") }).ToList(); } ``` 2. **添加缓存机制** ```csharp // 在BLL层 public DataTable GetCachedCategories() { if (HttpContext.Current.Cache["Categories"] == null) { var data = GetCategories(); HttpContext.Current.Cache.Insert("Categories", data, null, DateTime.Now.AddHours(2), Cache.NoSlidingExpiration); } return (DataTable)HttpContext.Current.Cache["Categories"]; } ``` 3. **异常处理** 在 DAL 层添加数据库异常处理: ```csharp try { // 数据库操作 } catch (SqlException ex) { // 记录日志并抛出业务异常 throw new ApplicationException("数据库访问失败", ex); } ``` 4. **配置连接字符串** 在 `web.config` 中配置: ```xml <connectionStrings> <add name="MyDB" connectionString="Server=.;Database=Northwind;Integrated Security=true" providerName="System.Data.SqlClient"/> </connectionStrings> ``` 代码中获取: `ConfigurationManager.ConnectionStrings["MyDB"].ConnectionString` ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值