Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > Help: getting javascript & c# to talk together in asp.net web application

Reply
Thread Tools

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

 
 
Alex
Guest
Posts: n/a
 
      02-13-2004
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>
<aspataGrid 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>
</aspataGrid>
<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.
 
Reply With Quote
 
 
 
 
Tommy
Guest
Posts: n/a
 
      02-13-2004
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 <(E-Mail Removed)> wrote in message news:<(E-Mail Removed)>. ..
> 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>
> <aspataGrid 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>
> </aspataGrid>
> <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.

 
Reply With Quote
 
 
 
 
Kevin Spencer
Guest
Posts: n/a
 
      02-13-2004
> 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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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>
> <aspataGrid 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>
> </aspataGrid>
> <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.



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Web Application and Windows Application working together Terry Holland ASP .Net 1 03-25-2009 01:47 PM
VOIP-Buster nummbers free with Talk-Talk? PavaRodney UK VOIP 4 01-01-2007 12:37 PM
Change to Talk Talk Bob B Wireless Networking 2 08-24-2006 09:19 AM
Skype and Talk Talk Sacred UK VOIP 9 08-01-2006 08:57 PM
Unable to post to talk.origins - but talk.atheism ok Rolf Computer Support 2 04-09-2006 09:48 AM



Advertisments