well, I am facing a problem in accessing label control of master page in its code behind file when i build solution it give error:
"the name 'lbllogin' does not exist in current context"
can anyone tell me how can i resolved this issue ....
this is my masterpage.master file 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>My WebSite</title>
<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function mainmenu() {
$(" #nav ul ").css({ display: "none" });
$(" #nav li ").hover(function () {
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}
, function () {
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function(){
mainmenu();
});
</script>
<link rel="stylesheet" type="text/css" href="~/Styles/StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>Review
<ul>
<li>Coffee</li>
<li>Coffee Shops</li>
<li>Coffee Brands</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
<li>Management</li>
<ul>
<li>Coffee</li>
<li>Users</li>
</ul>
</ul>
<div id="login" align="right">
<asp:Label ID="lbllogin" runat="server" Text="" ForeColor="White"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="White" OnClick="LinkButton1_Click" >LinkButton</asp:LinkButton>
</div>
</div>
<div id="content_area">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved.</p>
</div>
</div>
</form>
</body>
</html>
and this is my code behined
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Masterpage : MasterPage
{
//protected global::System.Web.UI.WebControls.Label lbllogin;
//protected global::System.Web.UI.WebControls.LinkButton LinkButton1;
protected void Page_Load(object sender, EventArgs e)
{
lbllogin.Text = "error";
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
}enter code here
}
Try accessing control using 'This' keyword..
e.g
This.lbllogin.Text = "error";
Hope this helps..
Related
I'm using two asp.net ckeckboxes (chk1, and chk2) in a Web Forms project with MasterPage, and I'd like when I click over chk1, the chk2 becomes disable and viceverse without refreshing the entire page, so I'm using updatepanel to achieve this, I just implement the CheckedChanged event on the chk1 and put its AutoPostBack attribute to "true", and everything is ok.
The problem is when I try to implement the bootstrap-switch plugin (the two checkboxes seems like bootstrap-switch perfectly), but the problem is that when I click on the chk1, then the CheckedChanged is not fired, so the enable property of the chk2 is not affected.
I think the problem is when the user clicks on the chk1, in fact the click happens over the span's element's of the bootstrap-switch instead of the chk1 itself.
Please help, sorry for the english.
Update 1:
This is the source code of the page when it is running (right click on the browser), so you can see the bootstrap-switch libraries needed are present:
<html lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
- Mi aplicación ASP.NET
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/bootstrap-switch/bootstrap3/bootstrap-switch.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
<form method="post" action="./Test" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="h5sbkKDqDt9VeL5xnED+gV4kWiRKNFZBx2sOsl8K60EaOVXCuj7iQZJ3QAjjzsLsrj7CnOY8SUD81Mv51jUBYfWpQL0EHuQO3uPa8Yczm/eLjURJjkDTB57Iw5RJUitxpbKigIF0l4NevEGllIgA8hU3zjrDgSCrPtUA3qs7CJO+/ukopmdmKjOkgTjjWniVywgiMskpJEGPl3fzldVSaqkj8Ikbh+OElJUyureaFxNDS7bLq90ZhlVeNNZxorYyvtaj1HxMgniGxdfx0eClL+RD3ksd+mO6kkzV8mSXx+ykvf+A3Z2gcV0wjAcfpc09oxBF8vvsEtwBbJ+WbDlZLnGqn5W7GAFmmqD2l3e8AAFO6Sh0++Ivr057G/pw+FyebisB2dEOZeb2KZbNxL9/imrP/bBFcKrcyPeGiRUaXtjd7VPTXnD8Vox3T97yjv4P" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Error al cargar el marco de trabajo de cliente ASP.NET Ajax.');
//]]>
</script>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<script src="Scripts/bootstrap-switch.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl09', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$chk1','MainContent_chk1'], [], 90, 'ctl00');
//]]>
</script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Nombre de la aplicación
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Acerca de</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Registrarse</li>
<li>Iniciar sesión</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="col-sm-2">
<input id="MainContent_chk1" type="checkbox" name="ctl00$MainContent$chk1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$chk1\',\'\')', 0)" class="BSswitch" data-size="mini" data-on-text="Si" data-off-text="No" /><label for="MainContent_chk1">Check 1</label>
</div>
<div id="MainContent_UpdatePanel1">
<input id="MainContent_chk2" type="checkbox" name="ctl00$MainContent$chk2" /><label for="MainContent_chk2">Check 2</label>
</div>
<hr />
<footer>
<p>© 2016 - Mi aplicación ASP.NET</p>
</footer>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="3l2FbHNq3NkXeXDBNuO5RZ4xOmC254tC8PhZRAdihltuEWASclMPM3jqhsB2rrjNHLrlioMYf4cBMhfvlMRCUVMkZXg6Bmvc06rKj2GCmkK97sprq9puXxVbM2rKg+DDwC9aG2lPJIcCLM1viuOkLw==" />
</div></form>
<script>
$("[class='BSswitch']").bootstrapSwitch();
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"41bd03d14e3342bebd4c2f830342b157"}
</script>
<script type="text/javascript" src="http://localhost:30137/825094549df74919a4a0dc141549d775/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
And now this is the Test.aspx file:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestBSswitch.Test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="col-sm-2">
<asp:CheckBox ID="chk1" AutoPostBack="true" Text="Check 1" OnCheckedChanged="chk1_CheckedChanged" runat="server" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="chk2" Text="Check 2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chk1" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
And now this is the Test.aspx.cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestBSswitch
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
chk1.InputAttributes.Add("class", "BSswitch");
chk1.InputAttributes.Add("data-size", "mini");
chk1.InputAttributes.Add("data-on-text", "Si");
chk1.InputAttributes.Add("data-off-text", "No");
chk2.InputAttributes.Add("class", "BSswitch");
chk2.InputAttributes.Add("data-size", "mini");
chk2.InputAttributes.Add("data-on-text", "Si");
chk2.InputAttributes.Add("data-off-text", "No");
}
protected void chk1_CheckedChanged(object sender, EventArgs e)
{
if (chk1.Checked)
{
chk2.Enabled = false;
}
else
{
chk2.Enabled = true;
}
}
}
}
In the last file I have posted: "Test.aspx.cs", in the Page_Load event I have to add that attributes manually to the "chk1" in order to obtain the "switch" effect, because if I put that attributes ("data-size", "data-on-text", "data-off-text", and "class") in the aspx editor then it does not work at runtime, and if I delete that lines of code then the CheckedChanged works, but the style of the switch does not work.
Hope I have explain me in more detail, any question please ask me.
I just had to figure out a similar situation. Since bootstrap-switch prevents the CheckedChanged event from firing, I would recommend using jquery and the switchChange event provided by bootstrap-switch instead, like so:
$('#<%= chk1.ClientID%>').on('switchChange.bootstrapSwitch', function (event, state) {
if (state) { //if chk1's switch is set to true
$('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', true);
}
else {
$('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', false);
}
});
I have the following function and a label and I want to set the label as abc.
<asp:Label ID="title" runat="server"></asp:Label>
protected void setTitle()
{
title.Text = "abc";
}
When i execute the function, at the association line I get this:
Object reference not set to an instance of an object.
Does somebody knows why?
LATER EDIT: see my comment below
I found this recommendation and it's still not working. It throws the same exception. Why?
protected void Page_Load(object sender, EventArgs e)
{
Page.LoadComplete += new EventHandler(Page_LoadComplete);
}
void Page_LoadComplete(object sender, EventArgs e)
{
setTitle();
}
Complete aspx
<%# Page Language="C#" AutoEventWireup="true" Inherits="......." CodeBehind="....aspx.cs" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css"/>
</head>
<body>
<div id="left"><img src="Imagini/Left_01.jpg" alt="" /></div>
<form id="form1" runat="server">
<div id="left_edge"><img src="Imagini/LeftEdge.jpg" alt="" /></div>
<div id="questions">
<div id="top"></div>
<div class="clear"></div>
<div class="row">
<h1>
<asp:Label ID="title" runat="server" Text=""></asp:Label>
</h1>
</div>
<div class="clear"></div>
</div>
<div id="right_edge"><img src="Imagini/rightedge_04.jpg" alt="" /></div>
</form>
<div id="right"><img src="Imagini/right_05.jpg" alt="" /></div>
</body>
</html>
i have a website with master pages and content pages. the code for master page is:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.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 runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
<form id="form1" runat="server">
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
And my content pages are like:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>
Now, the tabs renders perfectly but the text used inside tabs or section is displayed back again in each tab content.
Screenshot of how it is rendering:
And here is the rendered HTML:
<!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><title>
</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>
<body style="height: 800px">
<form method="post" action="TopDeals.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />
</div>
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<input name="ctl00$SearchBox" type="text" id="SearchBox" />
<input type="submit" name="ctl00$Search" value="Search" id="Search" />
</li>
</ul>
</div>
<div>
Top deals page.
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
Anyone can tell what I am doing wrong here?
The behavior that you are seeing is as per jQuery tabs - you are not using it correctly.
One of the typical use case scenario will have markup such as:
<div id="tabs">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
</ul>
<div id="tabs-1">
Tab 1 Content
</div>
<div id="tabs-2">
Tab 2 Content
</div>
</div>
Note local referencing href on li and corresponding tab content div (with same id).
In case, URLs are used then jquery tabs will create the content div automatically and load them using AJAX (see content via AJAX exaple - http://jqueryui.com/demos/tabs/#ajax).
This is the case with your code, you are using urls - jquery is loading the url content in a tab. So, for first tab, you can see the content of TopDeals.aspx page - and this page use the same master and hence the tab markup appears in the content div.
EDIT: work-around
Firstly, opening a new page via tab is frowned upon by usability experts - check http://www.useit.com/alertbox/tabs.html! However, to achieve what you want, you need to set the href of active tab to a local link.
For example, in master page
<div id="TopNav">
<ul>
<li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li>
<li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li>
<li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
<div id="TabContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
Notice the placement of content placeholder. Now, in each page, you have to adjust the active's tab href accordingly. For example, in TopDeals.aspx, you have to add following line in say page_load or page_prerender:
Tab1.HRef = "#TabContent";
Instead of using hard-coded tab ids etc, I would suggest to use a Repeater in master page and populating it from code-behind. That way, you can expose ActiveTab property in master page (set by content pages) that will adjust href of the correct tab.
Finally last part is tab navigation: see this FAQ from jquery tabs so that when other tab is clicked, browser will open that page (instead of content getting loaded via AJAX).
EDIT: It appears that above FAQ has been removed by jquery team. To follow the tab URL, one needs handle select event - e.g.
$('.tabs').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
location.href = url; // follow url
return false; // to disable default handling
}
});
I have been working in ASP.NET Web Applications (not MVC) for a while at work. I really would like to use the twitter bootstrap framwork. I think it looks great and has a lot of the work already taken care of for you. I cannot seem to get it to work with ASP server controls. I know that the css is probably trying to change the asp:Button tag to an HTML tag. I just have no idea how to get these to work together. I get the following error.
Warning 2 //file location : ASP.NET runtime error: The base class includes the field 'btnTest', but its type (System.Web.UI.HtmlControls.HtmlButton) is not compatible with the type of control (System.Web.UI.WebControls.Button). //File location 21 1 FalconFutbolClub
When rendering the site to debug, I get the following error:
Control 'mainContentHolder_btnTest' of type 'Button' must be placed inside a form tag with runat=server.
I think it would be really annoying to try to manage postbacks with javascript. I really would just like to use regular ASP server controls, hence the whole reason of using ASP.NET Web Applications. Please help.
EDIT: Code. Here is the master page and my default.
Master Asp:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="FalconFutbolClub.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Falcon Futbol</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="What's in your toybox?">
<meta name="author" content="Pure Parties">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<style>
body {
padding-top: 85px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<asp:ContentPlaceHolder ID="headerContentHolder" runat="server" />
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Falcon Futbol</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div span="12">
<asp:ContentPlaceHolder ID="mainContentHolder" runat="server" />
</div>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 2000
})
</script>
</body>
</html>
Master C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace FalconFutbolClub
{
public partial class SiteMaster : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
Default aspx:
<asp:Content ID="content1" ContentPlaceHolderID="headerContentHolder" runat="server">
<script type="text/javascript">
</script>
</asp:Content>
<asp:Content ID="content2" ContentPlaceHolderID="mainContentHolder" runat="server">
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Falcon Futbol</h1>
<p>Event registration forms can be filled out here.</p>
<asp:Label ID="clickedTest" runat="server" />
</header>
<div class="span12">
<blockquote>
<p>Event registration form 1.</p>
<small>March 17, 2012</small>
</blockquote>
<div class="span4">
<asp:Button id="btnTest" runat="server" onclick="btnForm1_Click" Text="test" />
</div>
</div>
</div>
</asp:Content>
Default C#:
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.IO;
namespace FalconFutbolClub
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnForm1_Click(object sender, EventArgs e)
{
clickedTest.Text = "Clicked!";
}
}
}
Looks like you answered this yourself! Just to follow up on it - normally just after the body tag of a masterpage you would have a form tag:
<body>
<form id="form1" runat="server" >
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<!-- omitted code from above -->
</div>
</div>
</form>
</body>
I may be asking the impossible but let me set out my problem:
I have a menu in a MasterPage which uses images and mouseover mouseout events for design purposes.
On one of the menu options I need to display a set of sub menus options on the click of the parent menu item. The menu item itself also needs to navigate to a specified url.
I was originally trying to use an AJAX accordion panel but as I only had one accordion panel it was always displaying the sub menu items and was not collapsing.
I have also tried putting the options in a div and setting the display via javascript. This worked but then was overwritten once the page navigation postback occurred.
Here is the source:
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %>
<%# Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var revert = new Array();
var inames = new Array('home', 'whoweare', 'whatwedo','ourapproach', 'ourvalues', 'contact');
// Preload
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = "images/"+inames[i]+"2.jpg";
}
}
function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num) {
if(document.images) document.images[inames[num]].src = revert[num];
}
function ShowHide(elementId)
{
var element = document.getElementById(elementId);
if(element.style.display != "block")
{
element.style.display = "block";
}
else
{
element.style.display = "none";
}
}
function UpdateText(element)
{
if(element.innerHTML.indexOf("Show") != -1)
{
element.innerHTML = "Hide Details";
}
else
{
element.innerHTML = "Show Details";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
<uc1:LeadHeader ID="LeadHeader" runat="server" />
</asp:ContentPlaceHolder>
<div id="nav">
<div class="menu-item">
<a href="Default.aspx">
<img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)"
class="right" /></a>
</div>
<div class="menu-item">
<a href="AboutUs.aspx">
<img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)"
onmouseout="out(1)" class="right" /></a>
</div>
<%-- <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true"
TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" >
<Panes>
<cc1:AccordionPane runat="server">
<Header>--%>
<div class="menu-item">
<a href="WhatWeDo.aspx">
<img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)"
onmouseout="out(2)" class="right" onclick="ShowHide('divDetails');UpdateText(this);" /></a></div>
<%--/Header>
<Content>--%>
<div id="divDetails" style="display:none;">
Management Development<br />
Leadership Development<br />
Personal Development<br />
Team Building & Facilitation<br />
One to One Coaching
</div>
<%-- </Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
--%>
<div class="menu-item">
<a href="OurApproach.aspx">
<img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)"
onmouseout="out(3)" /></a>
</div>
<div class="menu-item">
<a href="OurValues.aspx">
<img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)"
onmouseout="out(4)" /></a>
</div>
<div class="menu-item">
<a href="ContactUs.aspx">
<img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)"
onmouseout="out(5)" /></a>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
<uc2:LeadFooter ID="LeadFooter" runat="server" />
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
If I read this correctly you need the nav buttons to direct you to another page and open a sub-menu to display further options.
The easiest way to do this would be to create the entire sub menu on the master page and hide it in your global style sheet. Each page could then contain a line of css to show the appropriate panel no JavaScript required.
A more efficient way would be to use this.Master.Page.FindControl("myPanelId") to manupulate the necessary item server-side.
I can't visualize exactly what you are doing but I have used jQuery accordion menus to do something similary. My server side code built a nested unordered list with links and the appropriate images. I let the hover event switch the accordion panel so that I could still click on any of the links to go to the corresponding page. If this is closer to what you want I can give you a general idea of the code / css necessary.
Hope that helps.