读书人

!根据下拉框中的数值动态生成对应行数

发布时间: 2012-04-22 18:34:46 作者: rapoo

求助!根据下拉框中的数值动态生成对应行数的表格
刚刚学习.net不久,今天要求做一个产品界面的模板,行数在2,3,4 行,每行两种产品,每个产品单元格中要求既能输入文本,图片,也可以二者都输入。根据行数和每个单元格内容属性的不同生成不同的产品类别模板,供后台管理员使用。我是这样考虑的,用一个下拉框DropDownList,里面分别有2,3,4 三个选项,然后当我选择“2”的时候,自动就在同一个页面里生成一个两行两列的表格,然后在每个单元格里在有三个选项:图片、文字、图片和文字。

大体上就是这样,我想用AJAX做,这样就不用点击提交了,AJAX也是刚刚学习的阶段,很多东西也不太明白,照猫画虎的搞了一些代码,但是无法执行,还请各位前辈指教,小弟不胜感激!

主要就是想明确,AJAX中那个下拉列表的值如何返回到当前页面,然后再被程序使用,动态生成这样一个行数变化的表格。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Module_Add.aspx.cs" Inherits="Module_Add" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML code
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>制作模板,第一步</title></head><script language="javascript">function ajaxFunction(){  var xmlHttp;  try{    xmlHttp=new XMLHttpRequest();  }  catch(e){    try{      xmlHttp=new ActiveXObject(Msxml2.XMLHTTP);    }    catch(e){      try{        xmlHttp=new ActiveXObject(Msxml.XMLHTTP);      }      catch(e){        alert('您的浏览器不支持AJAX!');        return false;      }    }     }   xmlHttp.onreadystatechange=function()   {    if (xmlHttp.Readystate==4)      {       var dd1=document.getElementById("DropDownList1");       var index=dd1.selectIndex;       var aaa=dd1.options[index].value;       alert("aaa"); //这里无法执行      }    }    xmlHttp.open("GET","",true);    //xmlHttp.send(Null);    }</script><body><form name="form1" method="post" action="" runat="server"><table width="80%" align="center" style="border:solid 1px #4397c5; padding:0;">  <tr style="border:solid 1px #4397c5">    <td height="27" colspan="4">新增产品页面模板</td>  </tr>  <tr style="margin:0px;">    <td style="width: 107px; border:solid 1px #4397c5; margin:-2px; height: 25px;">模板名称</td>    <td style="width: 237px; height: 25px;"><input type="text" name="tf_module_name" value="产品模板"></td>    <td style="width: 115px; height: 25px;">模板行数</td>    <td width="27%" style="height: 25px">        <asp:DropDownList ID="DropDownList1" runat="server">          <asp:ListItem Value="2">2</asp:ListItem>          <asp:ListItem Value="3">3</asp:ListItem>          <asp:ListItem Value="4">4</asp:ListItem>        </asp:DropDownList>    </td>  </tr>  <div id="rownum">  </div></table><table>  里面动态生成模板的行数</table></form></body></html>


[解决办法]
用ajax实现思想,先新建一个新的Data.aspx用于被ajax请求页面,可以该页面后台写代码,根据判断下拉框
参数返回相应内容。
JScript code
<script language="javascript">var xmlHttp = false;function CreateXMLHttpRequest(){    try{        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");    }    catch(e){        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }}function StartRequest(RequestUrl,HandleFunctionName){    CreateXMLHttpRequest();    xmlHttp.open("GET",RequestUrl,false);    xmlHttp.setRequestHeader("Content-Type", "text/xml");    xmlHttp.setRequestHeader("charset", "utf-8");                xmlHttp.onreadystatechange = HandleFunctionName;    xmlHttp.send(null);}function GetData() {       var listType = document.all.DropDownList1.options[document.all.DropDownList1.selectedIndex].value;       var Url = "Data.aspx?Type=" + listType;    StartRequest(Url, HandleReload);}function change() {     GetData();       }function HandleReload() {    try {        if (xmlHttp.readyState == 4) {            var returnHtml = xmlHttp.responseText;            document.getElementById("rownum").innerHTML = returnHtml;        }    }    catch(e) {        window.alert(e);    }}</script> 

读书人网 >asp.net

热点推荐