Help: getting javascript & c# to talk together in asp.net web application

Discussion in 'ASP .Net' started by Alex, Feb 13, 2004.

  1. Alex

    Alex Guest

    Hi all,

    I'm writing a small web application which searches a database based on
    a date field, and populates a datagrid control with the results. The
    datagrid control has selection buttons added to it to view additional
    details about the selected result (a second database query is
    triggered).

    I want this second query to pop up in a new window, the way it would
    if I used "window.open" in javascript. I've added a function in the
    javascript to open the new window ("newpage"), but this function does
    not appear to be visible to the c# code on the asp page.

    I must admit to being a little confused about the separation between
    the c# code view of the asp page and the html view of the page layout
    - these two things are interrelated, but there doesn't seem to be any
    easy way to get them to talk to one another.

    To illustrate, this is the html view of the page Query.aspx:

    ---

    <%@ Page language="c#" Codebehind="Query.aspx.cs"
    AutoEventWireup="false" Inherits="VideoSearch.WebForm1" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
    <HEAD>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema"
    content="http://schemas.microsoft.com/intellisense/ie5">
    <script>
    function newpage(string url)
    {
    window.open(url, 'Session Detail', 'width=400,height=400,
    toolbar=no');
    }
    </script>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
    <asp:Calendar id="Calendar1" style="Z-INDEX: 101; LEFT: 296px;
    POSITION: absolute; TOP: 112px"
    runat="server" Width="240px" Height="224px"></asp:Calendar>
    <asp:DataGrid id="DataGrid1" style="Z-INDEX: 106; LEFT: 56px;
    POSITION: absolute; TOP: 488px"
    runat="server" Width="680px" Height="280px"
    HorizontalAlign="Left" BorderColor="#999999" BorderStyle="Solid"
    CellSpacing="2" BorderWidth="3px" BackColor="#CCCCCC"
    CellPadding="4" ForeColor="Black">
    <SelectedItemStyle Font-Bold="True" ForeColor="White"
    BackColor="#000099"></SelectedItemStyle>
    <ItemStyle BackColor="White"></ItemStyle>
    <HeaderStyle Font-Bold="True" ForeColor="White"
    BackColor="Black"></HeaderStyle>
    <FooterStyle BackColor="#CCCCCC"></FooterStyle>
    <Columns>
    <asp:ButtonColumn Text="View Session"
    ButtonType="PushButton" CommandName="Select"></asp:ButtonColumn>
    </Columns>
    <PagerStyle HorizontalAlign="Left" ForeColor="Black"
    BackColor="#CCCCCC" Mode="NumericPages"></PagerStyle>
    </asp:DataGrid>
    <asp:Label id="Label2" style="Z-INDEX: 103; LEFT: 440px;
    POSITION: absolute; TOP: 64px" runat="server"
    Width="96px" Height="32px">To:</asp:Label>
    <asp:Label id="Label1" style="Z-INDEX: 102; LEFT: 128px;
    POSITION: absolute; TOP: 72px" runat="server"
    Width="96px" Height="32px">From:</asp:Label>
    <asp:Button id="Button1" style="Z-INDEX: 104; LEFT: 320px;
    POSITION: absolute; TOP: 408px" runat="server"
    Width="184px" Height="40px" Text="Search!"></asp:Button>
    <asp:Label id="Label3" style="Z-INDEX: 105; LEFT: 128px;
    POSITION: absolute; TOP: 24px" runat="server"
    Width="280px" Height="24px">Search for video
    records:</asp:Label>
    <asp:Label id="errortext" style="Z-INDEX: 107; LEFT: 88px;
    POSITION: absolute; TOP: 360px"
    runat="server" Width="624px" Height="38px"></asp:Label>
    </form>
    </body>
    </HTML>









    This is the button handler event for the selection buttons in the data
    grid, which is in Query.aspx.cs:

    private void DataGrid1_SelectedIndexChanged(object sender,
    System.EventArgs e)
    {
    DataGridItem sel = DataGrid1.SelectedItem;

    string segmentid = sel.Cells[2].Text;

    newpage("SearchResults.aspx?seg=" + segmentid);
    }


    ---


    Can I access the javascript function "newpage" from the c# source like
    this?
    Is there a better way to do this?

    Any help would be greatly appreciated.

    Cheers,


    Alex.
    Remove ernie and bert from email address to reply.
    Alex, Feb 13, 2004
    #1
    1. Advertising

  2. Alex

    Tommy Guest

    In an ASP.NET application, JavaScript runs on the client-side, and C#
    runs on the server side. They are executed under a different tier and
    runtime, so they cannot call into each other's method.

    If I understand correct, you current have a datagrid that looks like
    this:

    ---------------------------------------
    |Data column|Data column|Button column|
    ---------------------------------------
    |Some data |Some data |Detail button|
    |Some data |Some data |Detail button|
    |Some data |Some data |Detail button|

    I would suggest making the "Detail button" an HTML button. Set the
    HTML button's client-side onclick event to call the "NewPage"
    javascript function. This way when the user click on the button, the
    javascript will open a new window with the detail information. All
    this happen without making a roundtrip back to the server.

    To change the "Detail button" to an HTML button, don't use the
    <asp:ButtonColumn, create an empty column, and create an HTML button
    in it.

    <input type="button" ...

    To set the client-side onclick event to call your javascript function:

    .... onclick="NewPage("SearchResults.aspx?seg="...

    To insert the segment Id from the datatable:

    <%# DataBinder.Eval(Container.DataItem,"SegmentID")%>"/>

    Put it all together, it will look something like this:

    <Columns>
    <asp:TemplateColumn>
    <ItemTemplate>
    <input type="button" value="Detail"
    onclick="NewPage("SearchResults.aspx?seg="
    <%#
    DataBinder.Eval(Container.DataItem,"SegmentID")%>);"/>
    </ItemTemplate>
    </asp:TemplateColumn>
    </Columns>

    Tommy,

    Alex <> wrote in message news:<>...
    > Hi all,
    >
    > I'm writing a small web application which searches a database based on
    > a date field, and populates a datagrid control with the results. The
    > datagrid control has selection buttons added to it to view additional
    > details about the selected result (a second database query is
    > triggered).
    >
    > I want this second query to pop up in a new window, the way it would
    > if I used "window.open" in javascript. I've added a function in the
    > javascript to open the new window ("newpage"), but this function does
    > not appear to be visible to the c# code on the asp page.
    >
    > I must admit to being a little confused about the separation between
    > the c# code view of the asp page and the html view of the page layout
    > - these two things are interrelated, but there doesn't seem to be any
    > easy way to get them to talk to one another.
    >
    > To illustrate, this is the html view of the page Query.aspx:
    >
    > ---
    >
    > <%@ Page language="c#" Codebehind="Query.aspx.cs"
    > AutoEventWireup="false" Inherits="VideoSearch.WebForm1" %>
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    > <HTML>
    > <HEAD>
    > <title>WebForm1</title>
    > <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    > <meta name="CODE_LANGUAGE" Content="C#">
    > <meta name="vs_defaultClientScript" content="JavaScript">
    > <meta name="vs_targetSchema"
    > content="http://schemas.microsoft.com/intellisense/ie5">
    > <script>
    > function newpage(string url)
    > {
    > window.open(url, 'Session Detail', 'width=400,height=400,
    > toolbar=no');
    > }
    > </script>
    > </HEAD>
    > <body MS_POSITIONING="GridLayout">
    > <form id="Form1" method="post" runat="server">
    > <asp:Calendar id="Calendar1" style="Z-INDEX: 101; LEFT: 296px;
    > POSITION: absolute; TOP: 112px"
    > runat="server" Width="240px" Height="224px"></asp:Calendar>
    > <asp:DataGrid id="DataGrid1" style="Z-INDEX: 106; LEFT: 56px;
    > POSITION: absolute; TOP: 488px"
    > runat="server" Width="680px" Height="280px"
    > HorizontalAlign="Left" BorderColor="#999999" BorderStyle="Solid"
    > CellSpacing="2" BorderWidth="3px" BackColor="#CCCCCC"
    > CellPadding="4" ForeColor="Black">
    > <SelectedItemStyle Font-Bold="True" ForeColor="White"
    > BackColor="#000099"></SelectedItemStyle>
    > <ItemStyle BackColor="White"></ItemStyle>
    > <HeaderStyle Font-Bold="True" ForeColor="White"
    > BackColor="Black"></HeaderStyle>
    > <FooterStyle BackColor="#CCCCCC"></FooterStyle>
    > <Columns>
    > <asp:ButtonColumn Text="View Session"
    > ButtonType="PushButton" CommandName="Select"></asp:ButtonColumn>
    > </Columns>
    > <PagerStyle HorizontalAlign="Left" ForeColor="Black"
    > BackColor="#CCCCCC" Mode="NumericPages"></PagerStyle>
    > </asp:DataGrid>
    > <asp:Label id="Label2" style="Z-INDEX: 103; LEFT: 440px;
    > POSITION: absolute; TOP: 64px" runat="server"
    > Width="96px" Height="32px">To:</asp:Label>
    > <asp:Label id="Label1" style="Z-INDEX: 102; LEFT: 128px;
    > POSITION: absolute; TOP: 72px" runat="server"
    > Width="96px" Height="32px">From:</asp:Label>
    > <asp:Button id="Button1" style="Z-INDEX: 104; LEFT: 320px;
    > POSITION: absolute; TOP: 408px" runat="server"
    > Width="184px" Height="40px" Text="Search!"></asp:Button>
    > <asp:Label id="Label3" style="Z-INDEX: 105; LEFT: 128px;
    > POSITION: absolute; TOP: 24px" runat="server"
    > Width="280px" Height="24px">Search for video
    > records:</asp:Label>
    > <asp:Label id="errortext" style="Z-INDEX: 107; LEFT: 88px;
    > POSITION: absolute; TOP: 360px"
    > runat="server" Width="624px" Height="38px"></asp:Label>
    > </form>
    > </body>
    > </HTML>
    >
    >
    >
    >
    >
    >
    >
    >
    >
    > This is the button handler event for the selection buttons in the data
    > grid, which is in Query.aspx.cs:
    >
    > private void DataGrid1_SelectedIndexChanged(object sender,
    > System.EventArgs e)
    > {
    > DataGridItem sel = DataGrid1.SelectedItem;
    >
    > string segmentid = sel.Cells[2].Text;
    >
    > newpage("SearchResults.aspx?seg=" + segmentid);
    > }
    >
    >
    > ---
    >
    >
    > Can I access the javascript function "newpage" from the c# source like
    > this?
    > Is there a better way to do this?
    >
    > Any help would be greatly appreciated.
    >
    > Cheers,
    >
    >
    > Alex.
    > Remove ernie and bert from email address to reply.
    Tommy, Feb 13, 2004
    #2
    1. Advertising

  3. Re: getting javascript & c# to talk together in asp.net web application

    > I must admit to being a little confused about the separation between
    > the c# code view of the asp page and the html view of the page layout
    > - these two things are interrelated, but there doesn't seem to be any
    > easy way to get them to talk to one another.


    Let me see if I can clear this up for you. What you refer to as "the html
    view of the page layout" is referred to in ASP.Net as a "Page Template." An
    ASP.Net Page is a class, an object. Most classes you may have seen before
    are typically defined in a single file of code, such as the CodeBehind that
    ASP.Net uses for the Page Class definition. In ASP.Net, the Page class is
    what is referred to as a "Templated Control." A Templated Control consists
    of a class definition and a Template. The Template inherits the class.
    Inheritance is an object-oriented concept that means that a class has all
    the properties and functionality of another class (inherits it), and can
    have additional properties and functionality as well. The Page Template
    class inherits the CodeBehind class, so in fact, it actually IS the
    CodeBehind class, with the additional HTML and other code that it contains
    as well. So, it's not useful to think of the CodeBehind and the Page
    Template as 2 different entities. They are, in fact, 2 parts of the SAME
    entity.

    Now, you stated that you "added a function in the javascript" which doesn't
    make sense, as there is no javascript in a Page to start out with. So, I
    don't know what you were trying to say. But from your description, it sounds
    like you want to dynamically add a JavaScript to the page from an Event
    Handler during a PostBack. To do this, you would define the script using a
    string, and then use Page.RegisterStartupScript() to add the script to the
    page so that it runs the script when it loads.

    --
    HTH,
    Kevin Spencer
    ..Net Developer
    Microsoft MVP
    Big things are made up
    of lots of little things.

    "Alex" <> wrote in message
    news:...
    > Hi all,
    >
    > I'm writing a small web application which searches a database based on
    > a date field, and populates a datagrid control with the results. The
    > datagrid control has selection buttons added to it to view additional
    > details about the selected result (a second database query is
    > triggered).
    >
    > I want this second query to pop up in a new window, the way it would
    > if I used "window.open" in javascript. I've added a function in the
    > javascript to open the new window ("newpage"), but this function does
    > not appear to be visible to the c# code on the asp page.
    >
    > I must admit to being a little confused about the separation between
    > the c# code view of the asp page and the html view of the page layout
    > - these two things are interrelated, but there doesn't seem to be any
    > easy way to get them to talk to one another.
    >
    > To illustrate, this is the html view of the page Query.aspx:
    >
    > ---
    >
    > <%@ Page language="c#" Codebehind="Query.aspx.cs"
    > AutoEventWireup="false" Inherits="VideoSearch.WebForm1" %>
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    > <HTML>
    > <HEAD>
    > <title>WebForm1</title>
    > <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    > <meta name="CODE_LANGUAGE" Content="C#">
    > <meta name="vs_defaultClientScript" content="JavaScript">
    > <meta name="vs_targetSchema"
    > content="http://schemas.microsoft.com/intellisense/ie5">
    > <script>
    > function newpage(string url)
    > {
    > window.open(url, 'Session Detail', 'width=400,height=400,
    > toolbar=no');
    > }
    > </script>
    > </HEAD>
    > <body MS_POSITIONING="GridLayout">
    > <form id="Form1" method="post" runat="server">
    > <asp:Calendar id="Calendar1" style="Z-INDEX: 101; LEFT: 296px;
    > POSITION: absolute; TOP: 112px"
    > runat="server" Width="240px" Height="224px"></asp:Calendar>
    > <asp:DataGrid id="DataGrid1" style="Z-INDEX: 106; LEFT: 56px;
    > POSITION: absolute; TOP: 488px"
    > runat="server" Width="680px" Height="280px"
    > HorizontalAlign="Left" BorderColor="#999999" BorderStyle="Solid"
    > CellSpacing="2" BorderWidth="3px" BackColor="#CCCCCC"
    > CellPadding="4" ForeColor="Black">
    > <SelectedItemStyle Font-Bold="True" ForeColor="White"
    > BackColor="#000099"></SelectedItemStyle>
    > <ItemStyle BackColor="White"></ItemStyle>
    > <HeaderStyle Font-Bold="True" ForeColor="White"
    > BackColor="Black"></HeaderStyle>
    > <FooterStyle BackColor="#CCCCCC"></FooterStyle>
    > <Columns>
    > <asp:ButtonColumn Text="View Session"
    > ButtonType="PushButton" CommandName="Select"></asp:ButtonColumn>
    > </Columns>
    > <PagerStyle HorizontalAlign="Left" ForeColor="Black"
    > BackColor="#CCCCCC" Mode="NumericPages"></PagerStyle>
    > </asp:DataGrid>
    > <asp:Label id="Label2" style="Z-INDEX: 103; LEFT: 440px;
    > POSITION: absolute; TOP: 64px" runat="server"
    > Width="96px" Height="32px">To:</asp:Label>
    > <asp:Label id="Label1" style="Z-INDEX: 102; LEFT: 128px;
    > POSITION: absolute; TOP: 72px" runat="server"
    > Width="96px" Height="32px">From:</asp:Label>
    > <asp:Button id="Button1" style="Z-INDEX: 104; LEFT: 320px;
    > POSITION: absolute; TOP: 408px" runat="server"
    > Width="184px" Height="40px" Text="Search!"></asp:Button>
    > <asp:Label id="Label3" style="Z-INDEX: 105; LEFT: 128px;
    > POSITION: absolute; TOP: 24px" runat="server"
    > Width="280px" Height="24px">Search for video
    > records:</asp:Label>
    > <asp:Label id="errortext" style="Z-INDEX: 107; LEFT: 88px;
    > POSITION: absolute; TOP: 360px"
    > runat="server" Width="624px" Height="38px"></asp:Label>
    > </form>
    > </body>
    > </HTML>
    >
    >
    >
    >
    >
    >
    >
    >
    >
    > This is the button handler event for the selection buttons in the data
    > grid, which is in Query.aspx.cs:
    >
    > private void DataGrid1_SelectedIndexChanged(object sender,
    > System.EventArgs e)
    > {
    > DataGridItem sel = DataGrid1.SelectedItem;
    >
    > string segmentid = sel.Cells[2].Text;
    >
    > newpage("SearchResults.aspx?seg=" + segmentid);
    > }
    >
    >
    > ---
    >
    >
    > Can I access the javascript function "newpage" from the c# source like
    > this?
    > Is there a better way to do this?
    >
    > Any help would be greatly appreciated.
    >
    > Cheers,
    >
    >
    > Alex.
    > Remove ernie and bert from email address to reply.
    Kevin Spencer, Feb 13, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Support
    Replies:
    4
    Views:
    1,418
    Scott Allen
    Mar 24, 2005
  2. Terry Holland
    Replies:
    1
    Views:
    422
    bruce barker
    Mar 25, 2009
  3. Scamps

    Help: Getting two controls to talk etc.

    Scamps, May 5, 2005, in forum: ASP .Net Building Controls
    Replies:
    6
    Views:
    117
    Scamps
    May 12, 2005
  4. Raj
    Replies:
    0
    Views:
    155
  5. Phrogz
    Replies:
    4
    Views:
    227
    Austin Ziegler
    Sep 6, 2006
Loading...

Share This Page