Here is my code, but it doesn't work (code behind gets empty string):
`
<head id="Head1" runat="server">
<title>Pass Javascript Variables to Server</title>
<script type="text/javascript"> // Second Step
function f() {
$("[id$='inpHide']").val("My JavaScript Value");
}
</script>
</head>
<body onload="SetHiddenVariable()">
<form id="form1" runat="server">
<div>
<input id="inpHide" type="hidden" runat="server" />
<asp:Button ID="btnJSValue" Text="Click" runat="server" OnClientClick="f"/>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
</body>
`
There were couple of issues in your code. The parenthesis were missing while calling f function in onClientClick and if the element has id you can just use the id to select it with #
<head id="Head1" runat="server">
<title>Pass Javascript Variables to Server</title>
<script type="text/javascript"> // Second Step
function f() {
$("input[id*='inpHide']").val("My JavaScript Value");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="inpHide" type="hidden" runat="server" />
<asp:Button ID="btnJSValue" Text="Click" runat="server" OnClientClick="f()"/>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
</body>
Your <input> tag needs a name attribute, or it won't be posted.
The response from Sean McMillan is right, but I think you also need to change this :
<asp:Button ID="btnJSValue" Text="Click" runat="server" OnClientClick="f"/>
to
<asp:Button ID="btnJSValue" Text="Click" runat="server" OnClientClick="f();"/>
Related
Call me a noob, but I am terrible at styling. Not my forte. But anyways, on my CSS page I need to have my MasterPage Navigation bar be on the left side.
But when I click on the link to bring me to different page, it has to show up in the middle with the navigation on the left still.
Is this more then just styling? If it is, please help.
Here is my asp code:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="~/MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Travis's Master Page = Resume Information</title>
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="Stylesheet" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="header" >
<asp:Image ID="Image1" runat="server" Height="99px"
ImageUrl="./Pictures/city2.jpg" Width="70px" />
</div>
<div id="sidebar" >
<asp:HyperLink ID="Home" runat="server"
NavigationUrl="./Default.aspx" CssClass="link">Home</asp:HyperLink>
<br /><br />
Education
<asp:HyperLink ID="Proficiencies" runat="server"
NavigationUrl="./Default3.aspx" CssClass="link">IT Proficiencies</asp:HyperLink>
<br /><br />
<asp:HyperLink ID="Involvement" runat="server"
NavigationUrl="./Default4.aspx" CssClass="link">Community Involvement</asp:HyperLink>
<br /><br />
<asp:HyperLink ID="References" runat="server"
NavigationUrl="./Default5.aspx" CssClass="link">References</asp:HyperLink>
<br /><br />
</div>
<div id="main">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="message">
<asp:Label ID="lblMessage" runat="server" Text="This is a Label" CssClass="label"></asp:Label>
<br />
</div>
</div>
</form>
</body>
</html>
And laugh if you want, but this is about as far as i can get with styling.
Body
{
}
Aside
{
}
Footer
{
}
Any help with this will be greatly appreciated. I know this is probably just very basic stuff, but I would like a helping hand.
Thanks!
EDIT: Right now, as it currently stands, it is all on the left side. The information that is entered in on other pages still shows up on the navigation bar. I can't get it to show up in the middle.
the fix would be to use floats:
set your sidebar to float:left.
set your main to float:right:
after your main div add: <div style="clear: both;"></div>
this should do the trick.
here is a very very simple jsfiddle that demostrates it:
http://jsfiddle.net/LM3xp/
The following code compiles, but doesn't work. As far as I know data-binding expressions allow any valid C# code in them. So what am I doing wrong here?
<asp:Panel CssClass='<%# ("my-class") %>' runat="server" ID="myPannel">
Blah
</asp:Panel>
<% this.myPannel.DataBind(); %>
I am not getting any errors. It just doesn't render the class attribute whatsoever. I tried without the parenthesis with the same bad luck.
Please note, I need an expression to be evaluated in CssClass attribute and I am expecting the result of that expression to be assigned to the class attribute. This is why I emphasized this by enclosing the string into parenthesis.
Try this:
<html>
<head runat="server">
<title></title>
<script runat="server">
protected void
Page_Load(object sender, EventArgs e)
{
this.myPannel.DataBind();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel CssClass='<%# ("my-class") %>'
runat="server"
ID="myPannel">
Blah
</asp:Panel>
</form>
</body>
</html>
Or just switch the order of your inline code snippets:
<body>
<% this.myPannel.DataBind(); %>
<form id="form1" runat="server">
<asp:Panel CssClass='<%# ("my-class") %>'
runat="server"
ID="myPannel">
Blah
</asp:Panel>
</form>
</body>
Or simply use:
<% this.myPannel.CssClass = "my-class";%>
<form id="form1" runat="server">
<asp:Panel
runat="server"
ID="myPannel">
Blah
</asp:Panel>
</form>
In all three cases, you have to make sure that the control property is updated before the actual inline code of the control is being processed in the page's life cycle.
This may seem like a simple question, but I have googled the crap out of it and can't find any clues.
Here is a basic page (trimmed down substantially for demo purposes)
<%# Master Language="C#" AutoEventWireup="true" CodeFile="NUBrand.master.cs" Inherits="nuservices_NUBrand" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="language" content="en" />
<script type="text/javascript">
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua);
if (isiPad == false) { // viewport tag breaks ipad portrait... don't use it if it's an ipad
document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0">');
}
</script>
<%--<!--[if gte IE 9]><!-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascript/jquery-2.0.0.min.js"><\/script>')</script>
<!--<![endif]-->--%>
<%--js--%>
<script src="resources/js/jquery.stayInWebApp.js"></script>
<script src="resources/js/global.js"></script>
<%--css--%><link href="resources/css/bootstrap-custom.css" rel="stylesheet" />
<link href="resources/css/bootstrap-custom.css" rel="stylesheet" />
<link href="resources/forms.css" rel="stylesheet" />
<link href="resources/css/normalize.css" rel="stylesheet" />
<link href="resources/css/global.css" rel="stylesheet" />
<link media="all and (max-width: 768px)" rel="stylesheet" type="text/css" href="resources/css/mobile.css" />
<script src="resources/js/modernizr.js"></script>
<asp:ContentPlaceHolder ID="cphHead" runat="server" />
</head>
<body>
<div id="container">
<header id="mainHead">
</header>
<div id="pageHeader">
<div id="breadcrumb">
<asp:ContentPlaceHolder ID="cphHeaderLinks" runat="server" />
</div>
<div class="container-fluid">
<form id="Form1" runat="server" name="form1">
<asp:ContentPlaceHolder ID="cphBodyWithForm" runat="server" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
<asp:ContentPlaceHolder ID="cphInputForm" runat="server" />
</form>
<div id="pageChildren">
</div>
</div>
</div>
<footer id="mainFooter">
</footer>
</div>
<asp:ContentPlaceHolder ID="cphPageScripts" runat="server" />
</body>
</html>
If the content is not important, let me know and I can remove that too for the readers sake.
In the main part of the body I have three content placeholders
<asp:ContentPlaceHolder ID="cphBodyWithForm" runat="server" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
<asp:ContentPlaceHolder ID="cphInputForm" runat="server" />
I am using cphBody for most of my pages if that matters, the other ones are there for legacy reasons.
An example page that does not work in IE9 (but works fine in Chrome) looks like this:
<asp:Content ContentPlaceHolderID="cphBody" runat="Server">
<div class="row-fluid span12">
<div class="span7">
<%--validation summary--%>
<div class="row-fluid">
<div class="span12">
<asp:ValidationSummary ID="ValidationSummary2" runat="server" HeaderText="You must provide:"
ForeColor="#BF2E1A" />
</div>
</div>
<%--career week date--%>
<div class="row-fluid">
<div class="span6">
<span>Career Week Date:<%= UtilsWww.RequiredAsterisk %></span>
</div>
<div class="span6">
<asp:DropDownList runat="server" ID="inDate">
<asp:ListItem Text="" />
<asp:ListItem Text="February" />
<asp:ListItem Text="May" />
<asp:ListItem Text="August" />
<asp:ListItem Text="November" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ErrorMessage="Career Week date" ID="RequiredFieldValidator4"
ControlToValidate="inDate" Display="Dynamic" Text="X" EnableClientScript="True" />
</div>
</div>
<%--Contact Email--%>
<div class="row-fluid">
<div class="span6">
<span>Contact's email:<%= UtilsWww.RequiredAsterisk %></span>
</div>
<div class="span6">
<asp:TextBox runat="server" ID="txtContactPersonEmail"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ErrorMessage="Contact Person's Email"
ID="RequiredFieldValidator3" Display="Dynamic" ControlToValidate="txtContactPersonEmail"
ToolTip="A contact person email must be provided!">X</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator runat="server" ErrorMessage="Valid Email Address"
ID="RegularExpressionValidator1" Display="Dynamic" ControlToValidate="txtContactPersonEmail"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ToolTip="Email addresses must conform to internet email standards!">X</asp:RegularExpressionValidator>
</div>
</div>
<div class="row-fluid">
<asp:LinkButton ID="Linkbutton1" runat="server" CssClass="formSubmitButton" OnClick="Linkbutton1_Click">
Submit<img src="resources/images/icn_getstarted.png" alt="submit" class="btn-arrow"/>
</asp:LinkButton>
</div>
</div>
</div>
<div class="span5">
</div>
</asp:Content>
The codebehind for this example page does this:
protected void Linkbutton1_Click(object sender, EventArgs e)
{
this.Validate();
if (!this.IsValid) return;
...Do some other Stuff...
}
This is the line that is where all my problems are happening:
if (!this.IsValid) return;
In Chrome, that statement does not return, everything is valid, it does it's thing.
In IE9, that line hits the return statement and I am left sad and confused.
So what do you think is happening here? Where can I look (I have tried fiddler, following in the IE dev tools to debug the js, it gets confusing, I have compared they code in the 'broken pages' to the few that do actually work in IE9, no real difference)? I would love to get an answer like "Oh add this and everything will be great!", but I don't see that happening. So I am asking where to look for solutions to this, I am completely lost.
To give credit where credit is due, see the comments on the question. We arrived at the answer from there, so I will post it here.
There were a couple of javascript errors being thrown on the page (in unrelated libraries that we're being pulled in). Chrome obviously did not have an issue with this, but IE did. I correct the js error and the pages worked fine again. woot!
I am pretty new to ASP.NET. I need to create a show/hide panel in ASP.NET that holds only text. The panel needs to have sliding effect. I can do with with postback. Is there any built-in control that can do this without postback.
Also, the text "Show" should change to "Hide" without postback.
EDIT: Forgot to mention that I have several such panels in my application.
The ASP.Net Ajax Control Toolkit has the accordian control that has customizable themes and effets, the whole library is well worth a look at.
Have you looked into jQuery?
http://api.jquery.com/toggle/
you can try like this....
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function Show1_onclick() {
document.getElementById('Panel1').style.display ='block';
document.getElementById('Panel2').style.display ='none';
document.getElementById('Hidden1').value = 'Panel1';
}
function Show2_onclick() {
document.getElementById('Panel1').style.display ='none';
document.getElementById('Panel2').style.display ='block';
document.getElementById('Hidden1').value = 'Panel2';
}
function StartUpScript()
{
if (document.getElementById('Hidden1').value == 'Panel1')
{
document.getElementById('Panel1').style.display ='block';
document.getElementById('Panel2').style.display ='none';
}
else if (document.getElementById('Hidden1').value == 'Panel2')
{
document.getElementById('Panel1').style.display ='none';
document.getElementById('Panel2').style.display ='block';
}
}
// -->
</script>
</head>
<body onload="StartUpScript()">
<form id="form1" runat="server">
<div>
<input id="Show1" language="javascript" onclick="return Show1_onclick()" type="button"
value="Show1" />
<input id="Show2" language="javascript" onclick="return Show2_onclick()" type="button"
value="Show2" />
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
<table id="Table1">
<tr>
<td style="width: 95px">
table1<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click1" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">
<table id="Table2">
<tr>
<td style="width: 99px">
table2<br />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Click2" />
</td>
</tr>
</table>
</asp:Panel>
<input id="Hidden1" runat="server" type="hidden" />
</div>
</form>
</body>
</html>
I am developing a C#/SQL VS 2008 website application and I'm trying to set breakpoints in my site.master file--is there a way to do this? The contents of this file are:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Forms Authentication, Authorization, and User Accounts</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">User Account Tutorials</span><br />
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:ContentPlaceHolder>
</div>
<div id="navigation">
<asp:ContentPlaceHolder ID="LoginContent" runat="server">
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
Welcome back,<asp:LoginName ID="LoginName1" runat="server" />
</LoggedInTemplate>
<AnonymousTemplate>
Hello, stranger!
</AnonymousTemplate>
</asp:LoginView>
<br />
<br />
</asp:ContentPlaceHolder>
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Logout.aspx" />
<ul>
<li>
<asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
</li>
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkMenuItem" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
<asp:Repeater ID="submenu" runat="server" DataSource="<%# ((SiteMapNode) Container.DataItem).ChildNodes %>">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkMenuItem" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
</div>
</form>
</div>
</body>
</html>
My site.master.cs file contents:
public partial class Site : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
You can set breakpoints in the code-behind, and javascript debugging will be as good (or bad) as always. The master page is just another aspx page; nothing differs.
You should put the breakpoint in your code behind. i.e. PageLoad.
So in your case the code behind file is: Site.master.cs
The code behind of my masterpages are mostly empty (like you have). Its main purpose is to define your website's structure and it contains the place holders for you "real content".
Scenarios where you might want to put some logic in your Master page's code-behind is for instance when you want to generate a Google-maps javascript (coming from the database) at the bottom of every page of your website.
You can put breakpoint at the first '{' of the PageLoad method.