472,791 Members | 1,456 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,791 software developers and data experts.

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

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.
Nov 18 '05 #1
2 2762
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 <al*******@bertmelix.com.au> wrote in message news:<f7********************************@4ax.com>. ..
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.

Nov 18 '05 #2
> 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" <al*******@bertmelix.com.au> wrote in message
news:f7********************************@4ax.com... 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.

Nov 18 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: PHPkemon | last post by:
Hi there, A few weeks ago I made a post and got an answer which seemed very logical. Here's part of the post: PHPkemon wrote: > I think I've figured out how to do the main things like...
6
by: Angelos Karantzalis | last post by:
Hi y'all ... I'm a bit puzzled here about .NET class instancing under COM+ Issue 1: I've a COM+ component, let's call it ... COMDbWrapper that initializes itself from an xml file. The data...
2
by: Melba | last post by:
Hi everybody !! I need to know when my HTML page is being printed. I know there are some events (onbeforeprint and onafterprint), but they are firing befor the printing and if someone cancels the...
4
by: johkar | last post by:
When the output method is set to xml, even though I have CDATA around my JavaScript, the operaters of && and < are converted to XML character entities which causes errors in my JavaScript. I know...
136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
16
by: pamelafluente | last post by:
I am still working with no success on that client/server problem. I need your help. I will submit simplified versions of my problem so we can see clearly what is going on. My model: A client...
0
by: gunimpi | last post by:
http://www.vbforums.com/showthread.php?p=2745431#post2745431 ******************************************************** VB6 OR VBA & Webbrowser DOM Tiny $50 Mini Project Programmer help wanted...
1
by: Webstorm | last post by:
Hi, I hope someone can help me sort this out a bit, Im completely lost. Here is the page I am working on: http://www.knzbusinessbrokers.com/default.asp I have 3 search critera that I need to...
53
by: souporpower | last post by:
Hello All I am trying to activate a link using Jquery. Here is my code; <html> <head> <script type="text/javascript" src="../../resources/js/ jquery-1.2.6.js"</script> <script...
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: lllomh | last post by:
How does React native implement an English player?
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.