关于弹出层的问题,保持层状态的问题?

yessoft 2012-05-04 08:04:25

在网页中,有一个按钮来控制弹出层的显示,点这个按钮便弹出DIV层,层里有Textbox,dropdownlist和一个Button控件来添加员工信息,当点Button时,数据在传入数据库的同时,主页面刷新,刚传入数据库的信息也在主页面的Gridview控件中显示,好像我要的效果达到了.但问题是我的弹出层也随着主页面的刷新而隐藏起来了.有什么办法即可以刷新主页面,又不让弹出层隐藏起来呢?
这是在CSDN上面搜索到的有关答案:
1、给这个DIV一个唯一的ID，比如layer_01
2、在ASPX页面中声明一个形式如function setLayerState(stateString)的java script函数，当其中包含"layer_01_visible=true"的值的时候，设置layer_01可见。具体写法我不提示了。
3、在ASPX页面中声明一个hidden field，假设叫做layerState，其value初始为空
4、当layer_01可见性发生改变的时候，用java script函数设定layerState的值为"layer_01_visible=true"。如果有多个层需要管理，你可以自己决定怎么存储，比方说增加"layer_01_visible=true;layer_02_visible=false;layer_01_height=100px"等等
5、在ASPX页面的Page_Load代码中，如果IsPostBack为真，则获取layerState这个隐藏字段的值，使用Page.RegisterStartupScript()功能调用setLayerState，参数就是layerState的值

这5个步骤,我真的不会弄,麻烦,哪位知道的朋友,帮我这个新手一把,真的很急,在这个问题上我已经纠结很久了,得不到解决,看到这5步骤感觉能解决我的问题,但自己就是不会写代码.

...全文

177 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

yessoft 2012-05-05

打赏
举报

谢谢 net_lover你的代码,昨晚回家试了你的代码,对我有很大的帮助,就是我要的效果,我会自己再做扩展,非常感谢你的无私!我也很感谢sp1234的用心回答!

以专业开发人员为伍 2012-05-04

打赏
举报

一个Panel在其它控件层上，你不会。

给它设置Visible属性你不会。

以专业开发人员为伍 2012-05-04

打赏
举报

就去精通大型的机遇javascript的前端企业用户组件 --> 就去精通大型的基于javascript的前端企业用户组件

其实只知道一点ajax与原理就宣称在产品中可以大量使用ajax来制作企业软件，这是不切实际的。需要精通大型的javascript的企业组件库，才能用javascript制作企业应用。

如果退而求其次，你并没有能力用javascript就制作出一整套类似asp.net精简那样的插件（特别是自动从后台获取数据绑定到浏览器端组件上自动产生交互界面），那么asp.net的基于控件的编程是一定要学好。在多年以前我们做企业软件，比如一个销售订单上同时要及时编辑用户信息、待寻商品信息，也就是在一个GridView旁边动态出现一个FormView，以及在这个GridView上下动态出现很多其它组件，绝不切换到其它页面上编辑临时信息，这些都是最基本、最通用的功能。

以专业开发人员为伍 2012-05-04

打赏
举报

你的5个步骤，全都是不懂asp.net基本的控件编程的思路。现在的asp.net程序员再怎么降低门槛，也不应该到这个程度。如果你真的就是玩而asp.net mvc，那么就去精通大型的机遇javascript的前端企业用户组件（最起码应该有一个非常方便的自动绑定数据的Grid电子表编辑控件吧）。

既然你使用不断在服务器刷新html的传统asp.net方式编程，对于asp.net，这就是修改一个Panel的Visible属性就行了（这个Panel层的position样式应该是absolute浮动的，并且其坐标应该移动到你要的位置上），asp.net会自动记住层的属性状态，并且自动显示或者隐藏。只需要修改一个属性就行了，你说的1～5全都是html/javascript程序员的思路，可是你的编程又是动用asp.net，这真是遗憾。

孟子E章 2012-05-04

打赏
举报

上面的例子是一个基本的功能，其他你还可以自己扩展，如层自动居中，随页面长度自动滚动等，看明白原理就可以了

yessoft 2012-05-04

打赏
举报

回3楼,晚上回去慢慢研究一下,非常感谢!

yessoft 2012-05-04

打赏
举报

回1楼,用弹出层增加信息到数据库的同时,用主页面上GRIDVIEW从数据库返回刚才弹出层的增加的信息,就是这么简单!为什么要保留弹出层呢?输入了一条学生数据后,我要接着输入第二个,第三个,第四个......,如果弹出层总是随着页面的刷新而隐藏起来.那么我在输入第二条数据的时候,我得点一下显示弹出层;输入第三条又得点一下显示弹出层,这样做着重复的去显示弹出层的动作.
我不需要保留多个层,一个就够了.
回2楼,因为我的弹出层里有个人图片的预览上传(是以二进制方式存在数据库的),我2个月前,我试着用了一下AJAX来做,用了AJAX技术后,图片预览效果就没用了.

孟子E章 2012-05-04

打赏
举报

下面是一个完整的例子，你创建一个access数据库MengXianHui.mdb，表明Table1,字段分别为id,Title,Content，放到App_Data文件夹下就可以直接测试了

<%@ Page Language="C#" %>



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

<script runat="server">  

  String ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|MengXianHui.mdb;";

  System.Data.DataTable CreateDataSourceByXianhuiMeng()

  {

    System.Data.OleDb.OleDbConnection cn = new System.Data.OleDb.OleDbConnection(ConnectionString);

    System.Data.OleDb.OleDbCommand cmd = new System.Data.OleDb.OleDbCommand("select * from Table1", cn);

    cn.Open();

    System.Data.OleDb.OleDbDataReader dr = cmd.ExecuteReader();

    System.Data.DataTable dt = new System.Data.DataTable();

    dt.Load(dr);

    cn.Close();

    return dt;

  }



  protected void Page_Load(object sender, EventArgs e)

  {

    if (Request.QueryString["id"] != null)

    {

      //插入内容

      String textbox = Request.Form["TextBox1"];

      String select = Request.Form["DropDownList1"];

      System.Data.OleDb.OleDbConnection cn = new System.Data.OleDb.OleDbConnection(ConnectionString);

      System.Data.OleDb.OleDbCommand cmd = new System.Data.OleDb.OleDbCommand("insert into Table1 ([Title],[Content]) Values(@Title,@Content)", cn);

      cn.Open();

      cmd.Parameters.AddWithValue("@Title", textbox);

      cmd.Parameters.AddWithValue("@Content", select);

      cmd.ExecuteNonQuery();

      cn.Dispose();

      Response.ClearContent();

      GridView GridView1 = new GridView();

      GridView1.DataSource = CreateDataSourceByXianhuiMeng();

      GridView1.DataBind();

      System.Text.StringBuilder sb = new System.Text.StringBuilder();

      System.IO.StringWriter sw = new System.IO.StringWriter(sb);

      HtmlTextWriter htw = new HtmlTextWriter(sw);

      GridView1.RenderControl(htw);

      Response.Write("这里查询数据，输出结果就可以了。结果：" + sb.ToString());

      Response.End();

    }

    else

    {

      //测试数据

      DropDownList1.DataSource = new String[] { "A", "B", "C", "D" };

      DropDownList1.DataBind();

    }

  }



  /// 添加这个override void VerifyRenderingInServerForm(Control control)，是为了避免出现

  /// 类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内。

  /// 的异常

  public override void VerifyRenderingInServerForm(Control control)

  { }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

  <title>使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现</title>

  <script type="text/javascript">

    function GetData() {

      data = "TextBox1=" + encodeURIComponent(document.getElementById('<%=TextBox1.ClientID %>').value) + "&DropDownList1=" + document.getElementById('<%=DropDownList1.ClientID %>').value;

      //document.getElementById("gv").innerHTML = "正在添加数据……";

      h = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");

      h.open("POST", '<%=Request.FilePath %>?id=' + (new Date()).valueOf(), true);

      h.setRequestHeader("Content-Length", data.length);

      h.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      h.onreadystatechange = function () {

        if (h.readyState == 4) {

          if (h.status >= 200 && h.status < 300) {

            document.getElementById("gv").innerHTML = h.responseText;

          }

          else {

            document.getElementById("gv").innerHTML = "<h2>数据操作错误：</h2>" + h.responseText;

          }

        }

      }

      h.send(data);

    }

    alert("这个提示，只出现在第一次打开页面。");

    function showDiv() {

      document.getElementById("addDiv").style.display = "";

      document.getElementById("addDiv").style.top = "20px";

      document.getElementById("addDiv").style.left = "200px";

      document.getElementById("addDiv").style.top = "20px";

    }

  </script>

</head>

<body>

  <form id="form1" runat="server">

  <div id="addDiv" style="display: none; position: absolute; border: 1px solid red;

    background: #EEE; width: 200px; height: 200px">

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:DropDownList ID="DropDownList1" runat="server">

    </asp:DropDownList>

    <asp:Button ID="Button1" runat="server" Text="保存" OnClientClick="GetData();return false;" />

  </div>

  <div id="gv">

  </div>

  <input type="button" value="输入" onclick="showDiv()" />

  </form>

</body>

</html>