Develop Reference

How to pass data between different c# and javascript

I have an ascx page with a div, when the div is clicked it calls a JS function and send an int
//HTML
<div style="float: right; margin-right: 150px;" class="innerDivStyle"
onclick="userStartExtend(2)">
<h1 style="margin-top: 50px">Product</h1>
</div>
//JavaScript function
function userStartExtend(num) {}
I need to use the num from userStartExtend function in a c# (file/page/code). I thought about querystring - set in javascript code and get in c# (possible?). Any other ideas ??
To make things clear : the c# code and javascript code dont share the same page.

What one normally does in a case where he wants to pass something from Javascript to .NET he uses eventHandlers, just don't forget to add attributes runat="server" id="DivId" and event handler OnServerClick="DivHandler".
Example:
<div runat="server" id="DivId" OnServerClick="DivHandler" style="float: right; margin-right: 150px;" class="innerDivStyle" onclick="userStartExtend(2)" >
<h1 style="margin-top: 50px">Product</h1>
</div>
then on C# side
public void DivHandler(object sender, EventArgs e)
{
//here sender is your <div> and e is data about 'click' event.
}
UPDATE: It appears that OnServerClick does not work properly ether. Here is workaround
HTML:
<div runat="server" id="DivId" OnServerClick="testMe('param1')" style="float: right; margin-right: 150px;" class="innerDivStyle" onclick="userStartExtend(2)" >
<h1 style="margin-top: 50px">Product</h1>
</div>
JavaScript:
function testMe(params) {
var btnID= '<%=MyButton.ClientID %>';
__doPostBack(btnID, params);
}
Server-side Page_Load:
string parameter = Request["__EVENTARGUMENT"];
if (parameter == "param1")
MyButton_Click(sender, e);

Make your div server side
<div id="serverSideId" runat="server" />
In your C# code, Page_PreRender should have this
int myValue = 2;
serverSideId.OnClientClick = "userStartExtend(" + myValue.ToString() + ")";

Add a hidden Field control in your use control
<asp:HiddenField ID="hdnval" runat="server" Value="" Visible="false">
update your javascript function as this
function userStartExtend(num) {
var myHidden= document.getElementById('<%= hdnval.ClientID %>');
if(myHidden)
{
myHidden.value=num;
}
}
Now use can access this server control at code behind

javascript show hide div

how to do show and hide div in javascript and simillarly in c# pageload how to call div based on id value.can any one help on this ?
<ul>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
</ul>
<div id="cat1">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>
<div id="cat2">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>
<div id="cat3">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>

To reference the div in C# codebehind, you will need to add a runat="server" attribute to the div. You can then reference it by ID in the Page_Load method. You should also set ClientIDMode="Static" for the div, to fix the ID for the div so that you can reference it in Javascript. Beware of ID collisions for static IDs.
Using strict Javascript, you can hide the div like this:
var elem = document.getElementById('cat1');
elem.style.display = 'none';
And you can show the div like this:
var elem = document.getElementById('cat1');
elem.style.display = 'block';
JQuery is probably a better way to go though than the getElementById approach:
$('#cat1').hide();
and
$('#cat1').show();

function showDiv()
{
// This is to show the div
document.getElementById('divId').style.display = 'block';
}
function hideDiv()
{
// This is to hide the div
document.getElementById('divId').style.display = 'none';
}
The code won't support, if the div has the runat property..
Hope this will help you..

How to show pop up div from server side on button click

I am working on Payment page and i want to show a popup for showing message your payment is processing. so for now i am using CustomValidator and Submit Button. and i want to show this popup when Args is valid. my code is.
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="" OnServerValidate="CustomValidator1_ServerValidate"
EnableClientScript="true" ValidationGroup="Authorize"></asp:CustomValidator>
<asp:Button ID="SubmitButton" runat="server" Text="Pay now" CausesValidation="true" CssClass="blue paynow" style="width:200px;"
ValidationGroup="Authorize" OnClick="SubmitButton_Click" OnClientClick="validate(ContentPlaceHolder1_chk_agree);" />

One better approach is to go with "updateProgress".
Place your submit button inside a updatePanel and place a loading gif image inside updateProgress which will show below loading image when payment progress is going on and will close automatically when payment is complete.
Loading ....
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/loadingNew.gif" AlternateText="Loading ..." ToolTip="Loading ..."/>
</ProgressTemplate>
</asp:UpdateProgress>

To show a message box after validation, you can do the following:
Add the following javascript to your <head>
<script language="javascript">
function SubmitButton_ClientClick()
{
bool isValid = Page_ClientValidate("Authorize"); //triggers validation
if (isValid)
{
alert('Your payment is processing');
}
return isValid;
}
</script>
Then, change your button like this:
<asp:Button ID="SubmitButton" runat="server" Text="Pay now" CausesValidation="true"
CssClass="blue paynow" style="width:200px;"
ValidationGroup="Authorize" OnClick="SubmitButton_Click"
OnClientClick="return SubmitButton_ClientClick();" />
An even better approach is to use a popup div - here is a very basic example:
Add this somewhere in your <body>
<div id="popup_box" style="height:300;width:300;position:absolute;top:150;left:350;border:3px solid red;background:#d8d8d8;display:none;">
<h1>Payment is processing</h1>
<button id="popupBoxClose" onclick="document.getElementById("popup_box").style.display = 'none';">Close</button>
</div>
And modify the SubmitButton_ClientClick like this:
function SubmitButton_ClientClick()
{
bool isValid = Page_ClientValidate("Authorize"); //triggers validation
if (isValid)
{
document.getElementById("popup_box").style.display = '';
}
return isValid;
}

Hide Panel in a datalist with Linkbutton and C# and javascript

I'm a new programmer, so any help or suggestions would be appreciated.
I have a datalist containing a link button that displays a row of data. The linkbutton, when clicked, should unhide a panel that contains a datalist (also containing a linkbutton), that displays more detailed information. The problem that I am having is that when I click on the summary linkbutton it will not fire the javascript to hide or show the details panel. I'm not getting any exceptions, my program builds and runs, so I'm not sure why the javascript won't fire. FYI, the DBClass and DbClass object are in-house classes, they work fine. Here is my code:
using System;
usingSystem.Collections;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Xml.Linq;
usingDBClass;
namespaceTimeLogging.pages
{
publicpartialclassdbEntry:System.Web.UI.Page
{
QueryClassqc=newQueryClass();
protectedvoidPage_Load(objectsender,EventArgse)
{
bindDlReportProjSum_devSummary();
}
//getsthelinkbuttonattributefortheemployeeidsothatitcanbeboundtothedatalist
protectedvoiddlReportProjSum_devSummary_OnItemDataBound(objectsender,DataListItemEventArgse)
{
if(e.Item.ItemType == ListItemType.Item
|| e.Item.ItemType == ListItemType.AlternatingItem)
{
DataListnestedDataList=(DataList)e.Item.FindControl("dlReportProjSum_devDetail");
LinkButtonlinkbtn=(LinkButton)e.Item.FindControl("lbReportProjSum_devSummary");
bindDlReportProjSum_devDetail(nestedDataList,linkbtn.Attributes["empid"]);
//Panelpan=(Panel)e.Item.FindControl("panReportProjSum_devDetail");
}
}
//hidesthedevedetailpanelonlinkbutttonclick
protectedvoiddlReportProjSum_devSummary_OnItemCommand(objectsender,DataListCommandEventArgse){
LinkButtonlb=(LinkButton)e.Item.FindControl("lbReportProjSum_devSummary");
Panelpan=(Panel)e.Item.FindControl("panReportProjSum_devDetail");
}
//thedatalistthatshowsasummaryofeachemployeewhohasworkedonaproject
protectedvoidbindDlReportProjSum_devSummary(){
DbClassdb=newDbClass();
DataTabledt=newDataTable();
stringsqlString=#"selectname,empid,sum(actualtime)astotal
fromTime_logging_vwProjDevDetail
whereprojid=1
groupbyempid,name";
db.OpenConnection();
db.Execute(sqlString);
dt=db.GetData.Table;
dlReportProjSum_devSummary.DataSource=dt;
dlReportProjSum_devSummary.DataBind();
db.CloseConnection();
db.Dispose();
}
//bindthenesteddatalistinthedevSummaryOnItemDataBoundevent
privatevoidbindDlReportProjSum_devDetail(DataListdl,stringdevEmpid)
{
DbClassdb=newDbClass();
DataTabledt=newDataTable();
stringsqlString=string.Format(#"selectDAYOF,ESTTIME,ACTUALTIME,NOTES,TASK
fromtime_logging_resourceswhere
projid=1andempid={0}",devEmpid);
db.OpenConnection();
db.Execute(sqlString);
dt=db.GetData.Table;
dl.DataSource=dt;
dl.DataBind();
db.CloseConnection();
db.Dispose();
}
////whenthedeveloperssummaryoftotalhoursonaprojectisclicked
protectedvoidlbReportProjSum_devSummary_Click(objectsender,EventArgse)
{
ClientScript.RegisterStartupScript(GetType(),"Javascript","HidePanel()",true);
}
}
}
ASPXpage////////////////////////////////////////////////////////////////////////////////
<%#PageLanguage="C#"AutoEventWireup="true"CodeBehind="dbEntry.aspx.cs"Inherits="TimeLogging.pages.dbEntry"%>
<%#RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="asp"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>UntitledPage</title>
<linkhref="../css/Main.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"language="javascript">
functionHidePanel()
{
alert("hello");
varpanel=document.getElementById('panReportProjSum_devDetail');
if(panel.style.display=='none')
{
panel.style.display='block';
}
else
{
panel.style.display='none';
}
}
</script>
</head>
<body>
<formid="form1"runat="server">
<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:PanelID="panMainReportsHolder"runat="server">
<asp:DataListID="dlReportProjSum_devSummary"runat="server"RepeatDirection="Vertical"
ShowFooter="False"ShowHeader="False"OnItemDataBound="dlReportProjSum_devSummary_OnItemDataBound"
OnItemCommand="dlReportProjSum_devSummary_OnItemCommand">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div>
<asp:LinkButtonID="lbReportProjSum_devSummary"OnClick="lbReportProjSum_devSummary_Click"
runat="server"empid='<%#DataBinder.Eval(Container.DataItem,"empid")%>'name='<%#DataBinder.Eval(Container.DataItem,"name")%>'
total='<%#DataBinder.Eval(Container.DataItem,"total")%>'CssClass="developerSummaryLinkButton"><%#DataBinder.Eval(Container.DataItem,"name")%>'stotalhoursspentdevelopingtheproject:<%#DataBinder.Eval(Container.DataItem,"total")%>
</asp:LinkButton>
<asp:PanelID="panReportProjSum_devDetail"runat="server">
<asp:DataListID="dlReportProjSum_devDetail"runat="server"RepeatDirection="Vertical"
ShowFooter="False"ShowHeader="False">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div>
<asp:LinkButtonID="LinkButton1"CssClass="developerDetailLinkButton"runat="server"
Enabled="false">Dateworked:<%#DataBinder.Eval(Container.DataItem,"dayof")%>task:<%#DataBinder.Eval(Container.DataItem,"task")%>numberofhoursworked:<%#DataBinder.Eval(Container.DataItem,"actualtime")%>anynotes:<%#DataBinder.Eval(Container.DataItem,"notes")%>
</asp:LinkButton>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:DataList>
</asp:Panel>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:DataList>
</asp:Panel>
</div>
</form>
</body>
</html>

You need to wire up your Linkbutton1 to fire the Javascript event. You can do this using the OnClientClick attribute like so:
<asp:LinkButtonID="LinkButton1"CssClass="developerDetailLinkButton"runat="server" Enabled="false" onclientclick="HidePanel();return false;"/>
The Return False prevents it from calling the server side event set in onclick (if there is one).
Read more about onclientclick hereenter link description here

jQuery in .net validate dropdownlist, fadein and fadeout panels

I have a dropdownlist control ddlAffilation, a panel pnlForms, a panel Complete, a button Submit, a button Return.
I have a validationcontrol on the dropdownlist.
here is my jquery code
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function () {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
});
</script>
I have 2 problems:
1) With this jQuery code, I can go back and forth (fade out pnlForms, fade in Complete when click on Submit and vice versa when click on Return) only when i don't choose any value in the dropdownlist box. If I choose any value in the dropdownlist, the Return button doesn't work.
2) The jquery code bypass the .net server validation control. I need the code not do anything if no value is selected from the dropdownlist. I have tried
var isValid = true;
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
isValid = false;
return false;
}
if (isValid == true) {
...
but it doesn't work. What's the best way to do this?
Thanks,
==================================================================================
I can't add an answer to my own question so I reply to John here:
Thanks John. I have my code like this and it solves problem 2.
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
alert('blah2');
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
However, problem 1 still exists. Let me clarify. I have a few textboxes, a dropdownlist and a submit button to collect feedback from the users. They are all in the panel pnlForms.
All controls can be empty except for the dropdownlist. We took care of this using your code and a server validation control.
when the users click the submit button, I want the pnlForms to fadeOut and a hidden panel called pnlComplete to fadeIn. The pnlComplete has a text saying thanks for the feedback and a button called Return that let the users send another feedback.
When the users click on the Return button, the opposite happens here. The pnlComplete fadeOut and the pnlForms fadeIn.
The Submit button works well but the Return button doesn't work at all. I set some alert() inside the Return.click(function but it doesn't hit.
Any ideas?
Here is the code of the whole page.
<%# Page Title="" Language="C#" MasterPageFile="~/Master.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="Server">
<asp:UpdatePanel ID="pnlForms" runat="server">
<ContentTemplate>
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<asp:TextBox ID="Name" runat="server" Width="150px"></asp:TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<asp:DropDownList ID="ddlAffilation" runat="server" Width="155px">
<asp:ListItem Text="--Select One--" Value="" Selected="True" />
<asp:ListItem>F</asp:ListItem>
<asp:ListItem>S</asp:ListItem>
<asp:ListItem>T</asp:ListItem>
</asp:DropDownList>
<em class="required">Required
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage=" - Please select your affiliation"
ControlToValidate="ddlAffilation" SetFocusOnError="True" ForeColor=""></asp:RequiredFieldValidator>
</em></li>
</ol>
</fieldset>
<div style="text-align: center;">
<asp:Button ID="Submit" runat="server" Text="Submit" OnClick="submit_Click" /></div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="Complete" style="display: none;">
<asp:UpdatePanel ID="pnlComplete" runat="server">
<ContentTemplate>
<p>Thank you</p>
<div style="text-align: center;">
<asp:Button ID="Return" runat="server" Text="Return" /></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="cpClientScript">
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
</asp:Content>

I'm not sure if I read your question right or not, but if your issue is that you don't want the jquery to continue firing and allow the form to submit if the dropdown is empty do this:
Instead of attaching a .click event to your button, attach a .submit event to your form. Then you want to use e.PreventDefault() to stop the main submit execution if its not valid
Eg:
$("#FORMNAME").submit(function(e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
// Submitting form...
}
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
Also, you should ALWAYS do server validation along with your client validation.. otherwise all someone has to do is directly submit / bypass your javascript checks
Edit for your edit:
Is the return button being created dynamically or is it there on page load? If its dynamic, its probably never getting assigned to in your jquery, as it doesn't exist when it runs.
Here is a quick test you could try:
var returnButton = $("#<%= Return.ClientID %>");
alert(returnButton.attr("id");
If you don't get back the ID of your return button, its not matching up in your code and thats why your click event isn't working. If thats the case, do a view source on your page and find out what the actual return button ID is set to (this is easier with FireBug or similar tool)

Adding this as a separate answer since its just a huge chunk of code that isn't exactly related to the original answer, but does work as intended. I took the code you gave and converted to basic html from asp.net, and it does work correct, does it work for you?
Could you try posting the output from the asp.net page instead of the code itself? Maybe something isn't being set right on the button element's ID.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" type="text/javascript"></script>
</head>
<body>
<div ID="Content1">
<div ID="pnlForms">
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<textbox ID="Name" runat="server" Width="150px"></TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<select ID="ddlAffilation" Width="155px">
<option Value="" Selected="True">--Select One--</option>
<option>F</option>
<option>S</option>
<option>T</option>
</select
</li>
</ol>
</fieldset>
<div style="text-align: center;">
<Button ID="Submit" Value="Submit" OnClick="submit_Click">Submit</Button></div>
</div>
<div id="Complete" style="display: none;">
<div ID="pnlComplete">
<p>Thank you</p>
<div style="text-align: center;">
<Button ID="Return" Value="Return">Return</Button></div>
</div>
</div>
</div>
<div ID="Content3">
<script type="text/javascript">
$(document).ready(function () {
$("#Submit").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#pnlForms").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#Return").click(function () {
$("#Complete").fadeOut('slow');
$("#pnlForms").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#ddlAffilation").val() == "") {
return false;
}
return true;
}
});
</script>
</div>
</body>
</html>