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

  • Thread starter Thread starter Alex
  • Start date Start date
A

Alex

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.
 
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 said:
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.
Click to expand...
 
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.
Click to expand...

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 said:
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.
Click to expand...
 
Back
Top