我想在不重新加载页面的情况下从数据库中显示div中的数据。我怎么能这样做?

时间:2012-06-29 15:46:10

标签: javascript asp.net

我使用div标签作为数据容器,当用户点击链接时,页面上会显示链接列表我希望从该div中的数据库显示其相关数据,该div将出现在链接点击上在页面顶部。 我正在使用asp.net C# 详细目前,我在链接点击上显示diff-2 div标签中的数据,并使用

显示所有数据
    divid.InnerHtml="";

在代码后面,但现在我想使用单个单个div,它将出现在点击链接上,我想从数据库加载内容,以加载到与点击的链接相对应的div中。

        <div id="popUpDiv"  runat="server"
        style="
            display:none;
            position:fixed;
            top:20%;
            left:20%;
            right:20%;
            min-width:60%;
            min-height:60%;
            background-color:Gray;
    z-index: 10002;">
         My popup box
         </div>

这是目前显示div的按钮

<asp:Button ID="btnPopUp" OnClientClick="togglePopUp('popUpDiv'); return false;"
             text="Pop Up a div box" runat="server" />

这是C#代码

while (dr.Read())
            {
                sr = sr + "<table border=\"0px\" ><tr valign=\"top\"><td align=\"left\" valign=\"top\"><a href=\"About.aspx\">" + dr.GetString(2) + "</a></td></tr><tr><td align=\"left\">"+"<img alt=\"\" src=\"Container/Images/aus.jpg\" />"+"</td></tr><tr valign=\"top\" ><td style=\"text-align:Justify;\" valign=\"top\">" + dr.GetString(3) + "</td></tr></table>";
            }
            con.Close();
            dr.Close();
            popUpDiv.InnerHtml = sr;

这是我的javascript显示div

    <script type="text/javascript" language="javascript">
    function togglePopUp(div_id) {
        var el = document.getElementById(div_id);
        if (el.style.display == 'block') { el.style.display = 'none'; }
        else { el.style.display = 'block'; }
    }
    </script>

1 个答案:

答案 0 :(得分:0)

此解决方案使用ajax和结束请求处理程序来显示div,将其添加到您的aspx页面。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" language="javascript"> 
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
 function endRequestHandle(sender, Args) {
        if (pbControl.name.toString() == "btnPopUp") {
        var el = document.getElementById(div_id);
        if (el.style.display == 'block') { el.style.display = 'none'; }
        else { el.style.display = 'block'; }                  
        }
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
  <asp:Button ID="btnPopUp" text="Pop Up a div box" runat="server" />
 </ContentTemplate>
</asp:UpdatePanel>

代码隐藏:

while (dr.Read())
 {
   sr = sr + "<table border=\"0px\" ><tr valign=\"top\"><td align=\"left\" valign=\"top\"><a href=\"About.aspx\">" + dr.GetString(2) + "</a></td></tr><tr><td align=\"left\">"+"<img alt=\"\" src=\"Container/Images/aus.jpg\" />"+"</td></tr><tr valign=\"top\" ><td style=\"text-align:Justify;\" valign=\"top\">" + dr.GetString(3) + "</td></tr></table>";
 }
con.Close();
dr.Close();
popUpDiv.InnerHtml = sr;