Integrating code into existing Web Site

[putrtek]

I found a article written by Scott Mitchell

http://aspnet.4guysfromrolla.com/articles/091504-1.aspx

that expalins how to Create a Collapsible Detail Region in a Repeater. His code works perfectly as it was written. However when I attempt to integrate his code into my existing web site that uses Master Pages and code behind in VB, then I have problems. What I've tried to do is insert his code (which works stand alone0, into the contentplaceholder scetion. What happens when I try to run the page is I get all the masterpage content (logo across the top and menu down the left side, but the center section which is where the Repeater should show is blank. I get no error, just a blank page where the Repeater should be.

Can anyone give me any suggestions as to what I need to do to make this code work with my Existing web site?

Thanks in advance for any suggestions.

-MARK-



Mark Buckley

http://www.swiftriverphotos.com

 

[jmeckley]

without aspx/code behind we can only guess.
I guess:
1. there is no data for the repeater to render
2. the default action is to hide details

also check if the rendered webpage contain the content.
IE: View -> Source
FF: <ctrl> + u

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[putrtek]

Jason,
Thank you for your response. To Anwser your questions.

1. When I run to code Stand Alone, I DO get data back.
2. Not sure what you mean by this one...

In the View Source code the repeater content is NOT renedered but the javascript function is.

Here is my code.

Default2.aspx

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script language="JavaScript">
  function ToggleDisplay(id)
  {
    var elem = document.getElementById('d' + id);
    if (elem) 
    {
      if (elem.style.display != 'block') 
      {
        elem.style.display = 'block';
        elem.style.visibility = 'visible';
      } 
      else
      {
        elem.style.display = 'none';
        elem.style.visibility = 'hidden';
      }
    }
  }
</script>

<style>
  .header { font-size: 10pt; font-weight: normal  ; cursor: hand; cursor:pointer; background-color:grey; font-family: 'Trebuchet MS';}
.details { display:none; visibility:hidden; background-color:#eeeeee; font-family: 'Trebuchet MS'; }

</style>
<asp:Repeater id="rptFAQs" runat="server">
   <ItemTemplate>
   <hr />
     <div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
          onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>
      <b> <%# Eval("IncidentID") %></b> - <b>Last Update:</b> <%# Eval("LastUpdated") %> - <b>Site: </b><%# Eval("SiteName") %> Status: <%# Eval("StatusName") %><br />
       <%# Eval("OutageShortDescription") %>
      </div>
         
     <div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">
     
        <table border="0" cellpadding="1" cellspacing="1">
                <tr>
                    <td colspan="1" style="width: 125px">
                         ID#:<asp:HyperLink id="HyperLink3" runat="server" NavigateUrl='<%# "~/Edit_IS_MultiView.aspx?IncidentID="&Eval("IncidentID")%>' 
                            Text='<%# Eval("IncidentID") %>' xToolTip="Edit Record" ></asp:HyperLink>
                        </td>
                    <td colspan="1" style="width: 799px">Last Updated:
                        <asp:Label ID="LastUpdatedLabel" runat="server" Text='<%# Eval("LastUpdated") %>' Font-Bold="true" Font-Size="10pt"></asp:Label></td>
                    <td colspan="1" style="width: 799px">
                        &nbsp;<asp:Label ID="lblIncidentStatus" runat="server" Font-Bold="True" Font-Size="10pt"
                            Text="Current Status:"></asp:Label>
                  <asp:Label ID="IncidentStatus" runat="server" Text='<%# Eval("StatusName") %>' Font-Bold="True" Font-Size="10pt" ForeColor="Blue"></asp:Label></td>
                </tr>
                <tr>
                    <td colspan="1" style="width: 125px">
                        <asp:Label ID="LblSiteImpacted" runat="server" Font-Bold="True" Font-Size="10pt"
                            Text="Site Impacted:"></asp:Label></td>
                    <td colspan="2" rowspan="1">
                        <asp:Label ID="SiteNameLabel" runat="server" Text='<%# Eval("SiteName") %>' Font-Bold="True" Font-Size="10pt" ForeColor="Blue"></asp:Label></td>
                </tr>
               </table> 
     </div>
   </ItemTemplate>
</asp:Repeater>

</asp:Content>



#####################################
Code Behind  Default2.apsx.vb
#####################################
Imports System.Data
Imports System.Data.SqlClient

Partial Class Default2
    Inherits System.Web.UI.Page

    Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not Page.IsPostBack Then
            BindData()
        End If
    End Sub

    Sub BindData()
        ' Get Connection string from Web Config
        Dim myConnection As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("IncidentConnectionString").ToString)
        ' Create the command object, passing in the SQL string (Stored Procedure), Open the connection
        Const strSQL As String = "usp_incidentsummary_SELECT" 'Using a Stored Procedure
        Dim myCommand As New SqlCommand(strSQL, myConnection)
        myCommand.CommandType = CommandType.StoredProcedure

        'Set the datagrid's datasource to the datareader and databind
        Dim resultsDataSet As New DataSet()
        Dim myDataAdapter As SqlDataAdapter = New SqlDataAdapter(strSQL, myConnection)
        myDataAdapter.Fill(resultsDataSet)

        rptFAQs.DataSource = resultsDataSet
        rptFAQs.DataBind()
    End Sub


End Class

Mark Buckley

http://www.swiftriverphotos.com

 

[mbiro]

Two things...

1. you have single quotes around the div id ..

<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">

try

<div id="d<%# DataBinder.Eval(Container, "ItemIndex") %>" class="details">

2. If that doesn't fix it, look at the source when the page is displayed... make sure the id's match in name..

<div id="d<%# DataBinder.Eval(Container, "ItemIndex") %>" class="details">

and

onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'

 

[mbiro]

Also, you should put your javacript in the head of your masterpage and not on the content page. Not sure if that will affect this problem but I know a lot of javascript issues can resolve when javascript is put in the head section of the webpage. Better yet, put javascript in a seperate file and reference it on your masterpage.

 

[putrtek]

Gentleman,

Thanks very much for your responses... I will try out your suggestions and let you know how they turn out.

-MARK-

Mark Buckley

http://www.swiftriverphotos.com

 

[putrtek]

Good morning,

I have taken your advise, but it has not helped.

* I changed the single quotes to double quotes in the DIV ID in both locations.
* I moved the JavaScript function ToggleDisplay(id) to the Head section of the Master Page.

I still get a blank page... Let me clarify that. I get everything EXCEPT the

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" ></asp:contentplaceholder>

section of the master page. When I look at the rendered source code I get the opening TD tag before this section and the closing TD tag after this section but nothing in between.

I'm not sure where else to go from here. Javascript is NOT one of my strong points.

Mark Buckley

http://www.swiftriverphotos.com

 

[jmeckley]

your problem isn't javascript if the data isn't rendered.

I know this sounds trivial, but when you view this website/app in a browser what url are you entering? it should be [tt]http(s)://.../Default2.aspx[/tt] (the s is optional)

could you post the masterpage markup/code behind as well?


Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[putrtek]

I'm using the VWD Development server so my URL is

http://localhost:4047/IS_Local/Default2.aspx

Here is the code for my MasterPage

<%@ Master Language="VB"  %>

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

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
    <title>Incident Summary</title>
    <link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" />
   
   <script language="JavaScript">
  function ToggleDisplay(id)
  {
    var elem = document.getElementById('d' + id);
    if (elem) 
    {
      if (elem.style.display != 'block') 
      {
        elem.style.display = 'block';
        elem.style.visibility = 'visible';
      } 
      else
      {
        elem.style.display = 'none';
        elem.style.visibility = 'hidden';
      }
    }
  }
</script>
 
</head>
<body>
<a href="#TOP"></a>
    <form id="form1" runat="server">
    <div>
        <table width="100%"  border = "0" >
            <tr><%-- First Row--  Title --%>
                <td colspan="3"> 
                                        <%-- Begin Inner Title Table--%>
                                      <table border="0" cellspacing="1" width="100%" ><%-- Inner Title Table--%>
                              <tr>
                                  <td style="text-align:center" colspan="3"> <img src="images/NMCI_Incident_Summary.jpg"alt="Incident Summary Logo"/></td>
                            </tr>
                    </table>
                        <%-- End Inner Title Table--%>
              </td>
            </tr>
               
               
               <tr>
                                    <td style="text-align:center" colspan="3">Currently Logged in User is: <%=HttpContext.Current.User.Identity.Name%></td>
                </tr>
                                
            <tr><%-- Second Row- Bread Crumb Menu --%>
                <td colspan="3">   
                        You are here:<asp:SiteMapPath ID="SiteMapPath2" runat="server" Font-Names="Verdana" Font-Size="0.8em" />
                </td>
            </tr>
            <tr><%-- Third Row- Verttical Menu and Content --%>
                <td valign="top">
                 
                     <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
                        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" Font-Names="Verdana" 
                            Font-Size="0.8em" ImageSet="XPFileExplorer" NodeIndent="10" ExpandDepth="1">
                            <ParentNodeStyle Font-Bold="True" />
                            <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
                            <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
                                VerticalPadding="0px" />
                            <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
                                NodeSpacing="0px" VerticalPadding="2px" />
                        </asp:TreeView>
                    
                </td>
                
                    <td colspan="2" id="MyPlaceMCB">
                        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server" ></asp:contentplaceholder>
                    </td>
            </tr>
        
            <tr><td colspan="3" ><hr /></td></tr>
        
            <tr><%-- Forth Row- Footer --%>
                <td colspan="3" style="text-align: center">
                               <address>  The information contained in this database is confidential
                                    and proprietary information of Electronic Data Systems Corporation (EDS). This information
                                    is not to be disclosed to third parties without written authorization from EDS.
                                    This information is to be used solely for the purpose of performance of the NMCI
                                    contract.<br />
                                </address>
                                 <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/FeedBack.aspx">Provide Feedback to the Developer</asp:HyperLink> 
                </td>
            </tr>
        </table>
    </div>
 </form>
   <a href="#Bottom"></a> 
</body>
</html>

Mark Buckley

http://www.swiftriverphotos.com

 

[jmeckley]

I copied this into a new website on my box. everything seems to work. there are some suddle differences.

1. i didn't reference the style sheet. app_themes does that automatically, if the theme is referenced in the page.
2. I referenced theme in the page markup
3. I changed the names of the hyperlinks. i was getting compile errors
4. I used Container.ItemIndex and Eval("[field]") instead of DataBinder.Eval()
5. I moved all string contactinations either outside of, or within server tags in the repeater control.

here's the code

*master*
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head id="Head1" runat="server">
    <title>Incident Summary</title>
    <script language="javascript" type="text/javascript" src="JScript.js"></script>
</head>
<body>
    <a href="#TOP"></a>
    <form id="form1" runat="server">
        <div>
            <table width="100%" border="0">
                <tr>
                    <%-- First Row--  Title --%>
                    <td colspan="3">
                        <%-- Begin Inner Title Table--%>
                        <table border="0" cellspacing="1" width="100%">
                            <%-- Inner Title Table--%>
                            <tr>
                                <td style="text-align: center" colspan="3">
                                    <img src="images/NMCI_Incident_Summary.jpg" alt="Incident Summary Logo" /></td>
                            </tr>
                        </table>
                        <%-- End Inner Title Table--%>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center" colspan="3">
                        Currently Logged in User is:
                        <%=HttpContext.Current.User.Identity.Name%>
                    </td>
                </tr>
                <tr>
                    <%-- Second Row- Bread Crumb Menu --%>
                    <td colspan="3">
                        You are here:<asp:SiteMapPath ID="SiteMapPath2" runat="server" Font-Names="Verdana"
                            Font-Size="0.8em" />
                    </td>
                </tr>
                <tr>
                    <%-- Third Row- Verttical Menu and Content --%>
                    <td valign="top">
                        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
                        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" Font-Names="Verdana"
                            Font-Size="0.8em" ImageSet="XPFileExplorer" NodeIndent="10" ExpandDepth="1">
                            <ParentNodeStyle Font-Bold="True" />
                            <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
                            <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
                                VerticalPadding="0px" />
                            <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
                                NodeSpacing="0px" VerticalPadding="2px" />
                        </asp:TreeView>
                    </td>
                    <td colspan="2" id="MyPlaceMCB">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <hr />
                    </td>
                </tr>
                <tr>
                    <%-- Forth Row- Footer --%>
                    <td colspan="3" style="text-align: center">
                        <address>
                            The information contained in this database is confidential and proprietary information
                            of Electronic Data Systems Corporation (EDS). This information is not to be disclosed
                            to third parties without written authorization from EDS. This information is to
                            be used solely for the purpose of performance of the NMCI contract.<br />
                        </address>
                        <asp:HyperLink ID="Hyperlink1" runat="server" NavigateUrl="~/FeedBack.aspx">Provide Feedback to the Developer</asp:HyperLink>
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <a href="#Bottom"></a>
</body>
</html>


*page*
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" Title="Untitled Page" Theme="Theme1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:Repeater ID="rptFAQs" runat="server">
        <ItemTemplate>
            <hr />
            <div id='<%# "h" & Container.ItemIndex.ToString() %>' class="header" onclick='<%# "ToggleDisplay(" & Container.ItemIndex.ToString() & ");" %>'>
                <b><%# Eval("LastUpdated") %></b>- 
                <b>Last Update:</b><%# Eval("SiteName") %>- 
                <b>Site: </b><%# Eval("StatusName") %>
                Status: <%# Eval("OutageShortDescription") %>
                <br /><%# "d" & Container.ItemIndex.ToString() %>
            </div>
            <div id='<%# "d" & Container.ItemIndex.ToString() %>' class="details">
                <table border="0" cellpadding="1" cellspacing="1">
                    <tr>
                        <td colspan="1" style="width: 125px">
                            ID#:<asp:HyperLink ID="Hyperlink1" runat="server" NavigateUrl='<%# "~/Edit_IS_MultiView.aspx?IncidentID=" & Eval("IncidentID")%>'
                                Text='<%# Eval("IncidentID") %>' ToolTip="Edit Record">Novell: NFS Links</asp:HyperLink>
                        </td>
                        <td colspan="1" style="width: 799px">
                            Last Updated:
                            <asp:Label ID="LastUpdatedLabel" runat="server" Text='<%# Eval("SiteName") %>'
                                Font-Bold="true" Font-Size="10pt"></asp:Label></td>
                        <td colspan="1" style="width: 799px">
                            &nbsp;<asp:Label ID="lblIncidentStatus" runat="server" Font-Bold="True" Font-Size="10pt"
                                Text="Current Status:"></asp:Label>
                            <asp:Label ID="IncidentStatus" runat="server" Text='<%# Eval("OutageShortDescription") %>' Font-Bold="True"
                                Font-Size="10pt" ForeColor="Blue"></asp:Label></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="width: 125px">
                            <asp:Label ID="LblSiteImpacted" runat="server" Font-Bold="True" Font-Size="10pt"
                                Text="Site Impacted:"></asp:Label></td>
                        <td colspan="2" rowspan="1">
                            <asp:Label ID="SiteNameLabel" runat="server" Text='<%# Eval("StatusName") %>' Font-Bold="True"
                                Font-Size="10pt" ForeColor="Blue"></asp:Label></td>
                    </tr>
                </table>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</asp:Content>


*code behind*
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Partial Class Default2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Me.BindData()
        End If
    End Sub

    Private Sub BindData()
        ' Get Connection string from Web Config
        'Dim myConnection As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("IncidentConnectionString").ToString)
        '' Create the command object, passing in the SQL string (Stored Procedure), Open the connection
        'Const strSQL As String = "usp_incidentsummary_SELECT" 'Using a Stored Procedure
        'Dim myCommand As New SqlCommand(strSQL, myConnection)
        'myCommand.CommandType = CommandType.StoredProcedure

        ''Set the datagrid's datasource to the datareader and databind
        'Dim resultsDataSet As New DataSet()
        'Dim myDataAdapter As SqlDataAdapter = New SqlDataAdapter(strSQL, myConnection)
        'myDataAdapter.Fill(resultsDataSet)

        Dim resultsDataSet As DataSet = New DataSet()
        Dim table As DataTable = New DataTable("MyTable")
        resultsDataSet.Tables.Add(table)
        table.Columns.Add("SiteName", GetType(String))
        table.Columns.Add("StatusName", GetType(String))
        table.Columns.Add("OutageShortDescription", GetType(String))
        table.Columns.Add("IncidentID", GetType(Integer))
        table.Columns.Add("LastUpdated", GetType(DateTime))

        table.Rows.Add(New Object() {"Site1", "Open", "Description 1", 1, DateTime.Now})
        table.Rows.Add(New Object() {"Site2", "Closed", "Description 2", 2, DateTime.Now.AddDays(-1)})
        table.Rows.Add(New Object() {"Site3", "Pending", "Description 3", 3, DateTime.Now.AddHours(-2)})

        rptFAQs.DataSource = resultsDataSet
        rptFAQs.DataMember = table.TableName
        rptFAQs.DataBind()
    End Sub
End Class

*javascript*
function ToggleDisplay(id)
{
    var elem = document.getElementById('d' + id);
    if (elem) 
    {
        if (elem.style.display != 'block') 
        {
            elem.style.display = 'block';
            elem.style.visibility = 'visible';
        } 
        else
        {
            elem.style.display = 'none';
            elem.style.visibility = 'hidden';
        }
    }
}

*style sheet*
.header { font-size: 10pt; font-weight: normal  ; cursor: hand; cursor:pointer; background-color:gray; font-family: 'Trebuchet MS';}
.details { display:none; visibility:hidden; background-color:#eeeeee; font-family: 'Trebuchet MS'; }

folder structure
[tt]
website
+-App_Data (not used)
+-App_Themes
| +-Theme1
| +-StyleSheet.css
+-Default.aspx (not used)
+-Default2.aspx
| +-Default2.aspx.vb
+-JScript.js
+-MasterPage.Master
| +-MasterPage.Master.vb (not used)
+-web.config (default settings)
+-web.sitemap (no data, but required for sitemap provider on masterpage)
[/tt]

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[putrtek]

Thanks Again Jason for your very detailed reply. I will try your code and let you know how it works...

-MARK-

Mark Buckley

http://www.swiftriverphotos.com

 

[putrtek]

Alright looks like it's something to do with my existing code... If I make all the changes you suggest in my existing web site I still get the same blank page I did before... however, If I create a new web site with the files and directory as you gave... it works fine using your manually created datatable. And if I switch it BACK to pulling data from my SQL server... it still works fine.

SO there is something in my existing code that's causing it not to render the repeater... not sure what just yet.

Anyway thank you very much for getting me this far. It's much appreciated. I feel like I've accomplished something today with your extensive help. Thanks Again.

-MARK-



Mark Buckley

http://www.swiftriverphotos.com