473,395 Members | 1,872 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 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 2815
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: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

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.