master page problem - asp.net

<%# Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
<link href="CSS_Styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function callAlert(msg) {
alert(msg);
}
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ContentPlaceHolder ID="ScriptManager" runat="server">
</asp:ContentPlaceHolder>
<div class="container">
<div class="header">
<asp:LoginStatus ID="LoginStatus1" runat="server"
ForeColor="White"
CssClass="signin" Font-Size="Small"/>
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
CssClass="register"
ForeColor="White"
NavigateUrl="~/login.aspx" Font-Size="Small">Register</asp:HyperLink>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/account.aspx"
ForeColor="White"
CssClass="myaccount" Font-Size="Small">My Account</asp:HyperLink>
<asp:HyperLink ID="HyperLink5" runat="server"
NavigateUrl="~/fleaMarket/fleaMarketAccount.aspx"
ForeColor="White"
CssClass="fleaaccount" Font-Size="Small">Flea Account</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server"
NavigateUrl="~/admin/access/access_rule_summary.aspx"
ForeColor="White"
CssClass="myaccount" Visible="false" Font-Size="Small">Admin</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server"
NavigateUrl="~/report.aspx"
ForeColor="White"
CssClass="myaccount" Visible="false" Font-Size="Small">Report</asp:HyperLink>
</LoggedInTemplate>
</asp:LoginView>
<br />
<div id="CartAr">
<asp:Panel ID="Panel2" runat="server" Width="300px" Height="82px" BackColor="#ffffff">
<asp:Image ID="imgShpngCrt" runat="server" ImageUrl="~/Images/cart image1.jpg" Width="90px" Height="82px" CssClass="fltlft1" />
<asp:LoginView ID="LoginView2" runat="server">
<AnonymousTemplate>
<asp:Label ID="Label2" runat="server"
ForeColor="Black"
CssClass="" Font-Size="Small">Welcome!Guest.
</asp:Label>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:Label ID="Label2" runat="server"
ForeColor="Black"
CssClass="" Font-Size="Small">Welcome! <asp:LoginName ID="LoginName2" runat="server" />
</asp:Label>
</LoggedInTemplate>
</asp:LoginView><br />
<div style="float:left; font-size:small;">
<asp:Label ID="lblCartItem" runat="server" Text="Items in your cart :" ForeColor="Black" Font-Size="Small"></asp:Label>
</div>
<asp:UpdatePanel ID="UpdatePanelMaster" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
<div style="float:left; font-size:small;">
<asp:Label ID="lblcartitemcount" runat="server" Text="hahahah"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="#336699" CssClass="textdeco" Font-Size="Small">View Cart</asp:LinkButton>
</asp:Panel>
</div>
<!-- end .header --></div>
<div id="navPos">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<asp:HyperLink ID="Home" runat="server" NavigateUrl="~/index.aspx">Home |</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="Products" runat="server" CssClass="MenuBarItemSubmenu">Products</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Groceries" runat="server">Groceries</asp:HyperLink></li>
<li><asp:HyperLink ID="DepartmentalItems" runat="server">Departmental Items</asp:HyperLink></li>
<li><asp:HyperLink ID="Electronics" runat="server">Electronics</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Mobiles" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=mobiles">Mobiles</asp:HyperLink></li>
<li><asp:HyperLink ID="Laptops" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=computers">Laptops & Computers</asp:HyperLink></li>
<li><asp:HyperLink ID="Accessories" runat="server">Accessories</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="Kitchen" runat="server">Kitchen Items</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink6" runat="server">Home Appliances</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink7" runat="server">Fasion</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="AboutUs" runat="server" NavigateUrl="~/Restaurant.aspx">| Restaurant Offers |</asp:HyperLink></li>
<li><asp:LinkButton ID="cmdMedicine" runat="server">Buy Medicines |</asp:LinkButton></li>
<li><asp:HyperLink ID="FleaMarket" runat="server" NavigateUrl="~/fleaMarket/fleaBazaar.aspx">Flea Market |</asp:HyperLink></li>
<li><asp:HyperLink ID="SellItems" runat="server" NavigateUrl="~/fleaMarket/hostItem.aspx">Sell Items |</asp:HyperLink></li>
<li><asp:HyperLink ID="WhyUS" runat="server">Why Us |</asp:HyperLink></li>
<li><asp:HyperLink ID="Payment" runat="server">Payment |</asp:HyperLink></li>
<li><asp:HyperLink ID="Contact_Us" runat="server" NavigateUrl="~/ContactUs.aspx">Contact Us</asp:HyperLink></li>
</ul>
</div><br /><br />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div class="footer">
<asp:TextBox ID="txtSubscribe" runat="server"></asp:TextBox>
<asp:Button ID="cmdSubscribe" runat="server" Text="Subscribe" /><br />
<div style="text-align:center; font-size:small;">
About Us |Payment Options |<a href="#">Terms &
Conditions</a> |Return Policy |Privacy Policy ©TriceDeals.Com
2011.
</div>
<!-- end .footer --></div>
<!-- end .container --></div>
<asp:ContentPlaceHolder ID="AfterFooter" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight: "SpryAssets/SpryMenuBarRightHover.gif" });
</script>
</form>
</body>
</html>
this is my master page...i have a drop down navigation in my site which i have placed in master page...so now the problem is "the dropdown property of the navigation menu works properly in some of the pages and does not work in some oter...why does this happen??if i do not use the master page the menu work in all the pages.

You must use the tilde(~) to get the root-directory of your application, because some page might be in sub-directories and therefore have another relative path to the Styles/Scripts than other pages(#Aristos solution only works for first-level subdirectories).
You can use ~ only on server-controls, so add a runat=server on your link-tags:
<link runat="server" href="~/CSS_Styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<link runat="server" hef="~/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
To get the correct reference to your script-files you have to add ScriptReferences:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/SpryAssets/SpryMenuBar.js" />
</Scripts>
</asp:ToolkitScriptManager>

Related

Why is my entire page reloading instead of just the Update Panel reloading?

Using master and detail pages, I have a ScriptManager in my MasterPage and an UpdatePanel in my detail page.
The UpdatePanel refreshes on a timer tick (every second)
In the UpdatePanel is an image which is a live view of an HMI process.
(btw using Chrome) "Normally" everything works fine - the image is refreshed to give a reasonably uptodate view of the HMI and is flicker free, but quite often the whole page shudders as it is refreshed in its entirety.
There's no logic behind it. The page is definitely doing a full refresh - the menu bar at the top contained in the MasterPage is also refreshed.
This "shuddering" may go on for several seconds (the page being refreshed every second) and then calms down only to be repeated sometime later on.
Can anyone please explain to me what may be happening?
The following code and screen shots, show the reason for the flicker - the image, for some reason is not displayed for a split second.
This is how the screen looks immediately prior to refresh (notice the time in the title bar)
And when it flickers, the main image is missing :
and then a split second later (less than a second) the correct image appears (notice the time in the title bar is one second later).
Now this is NOT because the web page is not begin asked to display an image - if no image is returned from the WCF service,a default image is shown instead. For some reason, the webpage is simply not displaying the actual image. The web page is requested to refresh once a second, but the flicker (it happens very, very quickly) indicates that in between refreshes, the whole page (including top nav bar)is refreshed (minus the image). So it appears, the page is refreshing every 1/2 second.
And this happens on only some PCs every so often (random x seconds). I'm watching the page on a remote machine and this hasn't missed a beat, whilst my PC is frequently experiencing the shakes.
Also the Image ALWAYS flickers in I.E. despite partial rendering.
Code samples:
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="PracticonWebMimic.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - Practicon Factory View</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="true">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<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>
<a class="navbar-brand" runat="server" href="~/">Practicon Factory View</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" id="mimicList" visible="false"
href="~/RestrictedAccess/MimicList.aspx">Views</a></li>
<li><a runat="server" id="mimicListArchive" visible="false"
href="~/RestrictedAccess/MimicList.aspx?archive=<%= DateTime.Now.Ticks %>">Archive Views</a></li>
<!-- <li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li> -->
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<!-- <li><a runat="server" href="~/Account/Register">Register</a></li> -->
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - Practicon Factory View</p>
<asp:Label id="lbError" runat="server" Text=""></asp:Label>
</footer>
</div>
</form>
</body>
</html>
Details Page
<%# Page Title="Factory View" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MimicDetails.aspx.cs" Inherits="PracticonWebMimic.MimicDetails" %>
<%# Register Assembly="TimePicker" Namespace="MKB.TimePicker" TagPrefix="MKB" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<link href="/Content/PrBlueTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.css">
<script src="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
});
function InitializeRequest(sender, args) { }
function EndRequest(sender, args) {
// after update occur on UpdatePanel re-init the DatePicker
$('.ui-datepicker').datetimepicker({
inline: true,
showOtherMonths: true,
showOn: 'focus',
showButtonPanel : true,
dateFormat: "dd/mm/yy",
nextText: ">>",
prevText : "<<",
timeFormat: "HH:mm:ss",
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
});
}
</script>
<asp:FormView ID="mimicDetail" runat="server"
ItemType="PracticonWebMimic.Models.Mimic" SelectMethod ="GetMimic"
RenderOuterTable="false">
<ItemTemplate>
<div>
<h2>
<asp:Label ID="lblActive_MimicDetails" runat="server" Visible="true"/>
<%#:Item.MimicName %>
</h2>
</div>
<br />
<table>
<tr>
<td>
<asp:UpdatePanel ID="upMimic_MimicDetails" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Label ID="lbConditionName_MimicDetails" runat="server" CssClass="btn-primary" Visible="False"/>
<asp:Panel ID="pnMimic" runat="server" style="margin-bottom: 2px">
<%-- Mimic Image ------------------------------------------------------------------------------------------------------------------------------- --%>
<img id="imMimic_MimicDetails" runat="server" src="./Assets/Images/running.jpg"/>
</asp:Panel>
<br />
<h4><asp:Label id="lbDirection_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label> </h4>
<%-- Action Buttons starts here ------------------------------------------------------------------------------------------------------------------------------- --%>
<asp:Table class="tbActionButtonBar" runat="server" CssClass="prTable">
<asp:TableRow >
<asp:TableCell>
<asp:Table class="tbActionButtonBar" runat="server">
<asp:TableRow >
<asp:TableCell >
<asp:ImageButton id="btnRestart_MimicDetails" runat="server" onclick="imgRestart_Click" Width="50" ToolTip="Restart playback from beginning." />
<asp:ImageButton id="btnStop_MimicDetails" runat="server" onclick="imgStop_Click" Width="50" ToolTip="Stop playback and show the LIVE Factory View." />
<asp:ImageButton id="btnRewind_MimicDetails" runat="server" onclick="imgRewind_Click" Width="50" ToolTip="Rewind the animation" />
<asp:ImageButton id="btnPlay_MimicDetails" runat="server" onclick="imgPlay_Click" Width="50" ToolTip="Start playback of animation from current time." />
<asp:ImageButton id="btnFForward_MimicDetails" runat="server" onclick="imgFForward_Click" Width="50" ToolTip="Fast-forward through animation." />
<asp:ImageButton id="btnPause_MimicDetails" runat="server" onclick="imgPause_Click" Width="50" ToolTip="Pause playback of animation." />
</asp:TableCell>
<asp:TableCell>
<asp:ImageButton id="btnTrends_MimicDetails" runat="server" Width="50" ToolTip="Show the Trends for the current Factory View" />
</asp:TableCell>
<asp:TableCell>
<asp:ImageButton id="btnConditionMonitoring_MimicDetails" runat="server" Width="50" ToolTip="View Condition Monitoring for this Factory View." />
</asp:TableCell>
<asp:TableCell>
<h5><asp:Label ID="lbStatus_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label></h5>
</asp:TableCell>
<asp:TableCell>
<h5><asp:Label ID="lbSession_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label></h5>
</asp:TableCell>
<asp:TableCell>
<asp:Button ID="btnSession_MimicDetails" runat="server" Text="Reconnect" CssClass="btn-default" onclick="btnSession_TrendDetails_Click"> </asp:button>
</asp:TableCell >
</asp:TableRow>
</asp:Table>
</asp:TableCell >
</asp:TableRow>
</asp:Table>
<%-- DateTime control starts here ------------------------------------------------------------------------------------------------------------------------------- --%>
<asp:Table id="tbActionDateBar_MimicDetails" runat="server" CssClass="prBlueTable">
<asp:TableRow>
<asp:TableCell >
<asp:Label Text="FROM : " runat="server" id="lbFrom_MimicDetails"></asp:Label>
<asp:TextBox type="text" id="txtStartDate_MimicDetails" runat="server" OnTextChanged="txtStartDate_MimicDetails_TextChanged" />
<asp:Label id="lbFromDate_MimicDetails" runat="server"/>
</asp:TableCell><asp:TableCell>
<asp:CheckBox Text=" End date? " runat="server" id="chkEndDate_MimicDetails" AutoPostBack="true" OnCheckedChanged="chkEnableEndDate_CheckedChanged"></asp:CheckBox>
</asp:TableCell><asp:TableCell >
<asp:Label Text="TO : " runat="server" ID ="lbTo_MimicDetails"></asp:Label>
</asp:TableCell><asp:TableCell>
<asp:TextBox type="text" id="txtEndDate_MimicDetails" runat="server" OnTextChanged="txtEndDate_MimicDetails_TextChanged"/>
<asp:Label id="lbEndDate_MimicDetails" runat="server"/>
</asp:TableCell><asp:TableCell>
<asp:CheckBox Text="Auto-restart?" runat="server" id="chkAutoRewind_MimicDetails" OnCheckedChanged="chkAutorewind_MimicDetails_CheckedChanged"></asp:CheckBox>
</asp:TableCell></asp:TableRow></asp:Table><asp:Timer ID="tmrMimic_MimicDetails" runat="server" Interval="1000" OnTick="MimicTimer_Tick"> </asp:Timer>
<asp:Label ID="lbServiceResponse_MimicDetails" runat="server" CssClass="btn-default" Text="" ></asp:Label><br />
<asp:Label id="lbRefreshRequested_MimicDetails" runat="server" Text=""></asp:Label>
<asp:Label id="lbRefreshed_MimicDetails" runat="server" Text=""></asp:Label><br />
<asp:Label ID="lbServiceAddress_MimicDetails" runat="server" Text=""></asp:Label><br/>
<asp:Label ID="lbError_MimicDetails" runat="server" Text=""></asp:Label>
<asp:Label ID="lbSessionID_MimicDetails" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tmrMimic_MimicDetails" EventName="Tick"/>
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
</asp:Content>
The solution is to disable hardware acceleration in the browser.

How to set the asp.net website screen compatible to any screen resolution

I have a asp.net website. I need to use it in various computers at various screen resolution. How can I make my screen size compactible with various screen resolution.pls give a sln, this is my code.
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; height: 100%">
<br />
<asp:Button ID="Button1" runat="server" BackColor="#5E4AB5" Text="ITEM REPORT"
Width="200px" Font-Bold="True" ForeColor="White" onclick="Button1_Click" />
<asp:Button ID="Button2" runat="server" BackColor="#5E4AB5" Text="INVOICE"
Width="200px" Font-Bold="True" ForeColor="White" />
<asp:Label ID="Label1" runat="server" ForeColor="#3399FF" Text="Label"></asp:Label>
<br />
<br />
<br />
<asp:Image ID="Image1" runat="server" Height="115px"
ImageUrl="~/images/logo.png" Width="250px" />
<br />
<asp:Label ID="Label2" runat="server" BackColor="#FF6600" Font-Bold="True"
Font-Size="X-Large" ForeColor="#990000"
Text=" PRODUCT MANAGEMENT SYSTEM- HOME"></asp:Label>
<br />
<asp:ImageButton ID="ImageButton1" runat="server" Height="36px"
ImageUrl="~/images/newlogo.jpg" PostBackUrl="https://www.somatco.com"
Width="34px" />
</div>
</form>
</body>
</html>

Apply css to divs inside the DataList in asp.net

I am confused if we can apply css to divs that are inside the DataList.I have a stylesheet and a aspx page that is inheriting a master page.The master page has a contentplaceholder.And the content placeholder is where i have defined my DataList.Now i have many divs inside the datalist that needs styling.How do i give them style form stylesheet NOT from the aspx page itself like <div style=" height:200px " >.It works but i need to define the css in the stylesheet not in the aspx.
Here my datalist
<asp:Content ID="Content1" ContentPlaceHolderID="ccont" Runat="Server">
<div id="ccont">
<asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down" runat="server">
<ItemTemplate>
<div id="lft_c">
<div id="lft_c_top">
<asp:Image runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ipath")%>' Height="250px" Width="300px" />
<br/>
</div>
<div class="lft_c_down">
<b>Product Name:</b>
<asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"products") %>' runat="server" />
<br/>
<b>brand:</b>
<asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
<br/>
<b>Price:</b>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
As you can see i have a div at the starting of the contentplaceholder whose id is ccont and i can apply css there from stylesheet.Its not working for the divs inside the datalist.
EDIT
Here's my css
#lft_c_down
{
background-color:Aqua;
color:Red;
}
DataList's Default rendered html is Table. That is why your css is not working. If you dont want table style, Try Repeater this css will work.
Please try this.
Place a ContentPlaceHolder in the Head section of your Masterpage like this;
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ccont" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Then, in the Webform, put the link to the external CSS file in head sections placeholder like this;
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="24857957.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ccont" runat="server">
<div id="ccont">
<asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down" runat="server">
<ItemTemplate>
<div id="lft_c">
<div id="lft_c_top">
<asp:Image runat="server" ImageUrl='http://placehold.it/140x140' Height="140px" Width="140px" />
<br/>
</div>
<div class="lft_c_down">
<b>Product Name:</b>
<asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"product") %>' runat="server" />
<br/>
<b>brand:</b>
<asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
<br/>
<b>Price:</b>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</asp:Content>

A page can have only one server-side Form tag

i added a page with html code to a master page and i got that mistake when i launched the page. i wonder what i did wrong!??!
<%# Page Title="" Language="C#" MasterPageFile="~/YourGuruMaster.master" AutoEventWireup="true" CodeFile="YourGuru.aspx.cs" Inherits="YourGuru" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.style3
{
width: 114px;
}
.style4
{
width: 293px;
}
.style5
{
width: 126px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<form id="form1" runat="server">
<div align="center">
<p>
<asp:TextBox ID="Question" runat="server" style="margin-left: 0px" Width="584px"></asp:TextBox>
</p>
</div>
<div align="center">
<table style="width: 553px">
<tr>
<td class="style3">
<asp:Button ID="Ask" runat="server" Text="שאל" Width="50px" />
</td>
<td class="style4">
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
&nbsp &nbsp &nbsp
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
&nbsp &nbsp &nbsp
<asp:DropDownList ID="DropDownList3" runat="server">
</asp:DropDownList>
</td>
<td class="style5">
<asp:Button ID="Answer" runat="server" Text="ענה" Width="50px" />
</td>
</tr>
</table>
</div>
</form>
</asp:Content>
ASP.NET Web Forms won't let you put more than one form tag in a page - your master page contains that form tag, so this:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<form id="form1" runat="server">
<div align="center">
will cause problems as it's trying to add a form tag. You don't need this form here anyways as the form tag in your master page is quite adequate.
<head runat="server">
<title></title>
</head>
<body style="direction:rtl;width:100%;background-color:#808080">
<form id="frmLevel2" runat="server">
<div dir="ltr" style="width:1000px;">
<asp:Button ID="btnExit" runat="server" OnClick="btnExit_Click" Text="خروج" />
</div>
<div>
<asp:GridView ID="GVLevel2" runat="server" Font-Names="Times New Roman" Font-Size="9pt" Width="700px" AllowPaging="True" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal">
<AlternatingRowStyle BackColor="#F7F7F7" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<SortedAscendingCellStyle BackColor="#F4F4FD" />
<SortedAscendingHeaderStyle BackColor="#5A4C9D" />
<SortedDescendingCellStyle BackColor="#D8D8F0" />
<SortedDescendingHeaderStyle BackColor="#3E3277" />
</asp:GridView>
</div>
<div>
<asp:Label ID="erorlabel" runat="server"></asp:Label>
<asp:Label ID="lblresult" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
My Error is " A page can have only one server-side Form tag. " too
i don't have master page

Error Message, "The Controls collection cannot be modified because the control contains code blocks"

I'm receiving this error on a page that previously worked fine, in fact the only change I've made to the page recently was to add another asp:TextBox and asp:RequiredFieldValidator control.
The page already had numerous ASP.NET controls on it, so I cannot see why these extra controls would make a difference, anyway I shall post the code below and hopefully you can see what the error is:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="MeetingGenerator.ascx.cs"
Inherits="usercontrols_MeetingGenerator" %>
<%# Register TagPrefix="cc1" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="width:498px;height:425px;background-color:#033b2a;text-align:center;padding-top:20px;">
<asp:Label ID="lblDone" CssClass="done" runat="server"></asp:Label>
<asp:Panel id="pnlAddReport" runat="server">
<div>
<img src="../images/banners/add-meeting.png" alt="Add Report" />
</div>
<p>
<asp:ValidationSummary ID="ValidationSummary" CssClass="validationsummary" runat="server" />
<asp:TextBox ID="txtTitle" BorderStyle="None" CssClass="watermark"
Width="250px" Height="22px" runat="server"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" TargetControlID="txtTitle" WatermarkCssClass="watermark"
WatermarkText=" Meeting title" runat="server"></cc1:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="rfvTitle" ControlToValidate="txtTitle" Text=""
ErrorMessage="Please enter the title" Display="None"
InitialValue="" runat="server"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvTitle1" ControlToValidate="txtTitle" Text=""
ErrorMessage="Please enter the title" Display="None"
InitialValue=" Meeting title" runat="server"></asp:RequiredFieldValidator>
</p>
<p>
<asp:TextBox ID="txtDate" BorderStyle="None" CssClass="watermark"
Width="250px" Height="22px" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="ceDate" TargetControlID="txtDate" Format="dd/MM/yyyy" runat="server">
</cc1:CalendarExtender>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" TargetControlID="txtDate" WatermarkCssClass="watermark"
WatermarkText=" Meeting Date" runat="server"></cc1:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="rfvDate" ControlToValidate="txtDate" Text=""
ErrorMessage="Please select the meeting date" Display="None"
InitialValue="" runat="server"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvDate1" ControlToValidate="txtDate" Text=""
ErrorMessage="Please select the meeting date" Display="None"
InitialValue=" Meeting Date" runat="server"></asp:RequiredFieldValidator>
</p>
<p>
<asp:TextBox ID="txtMeetingTime" BorderStyle="None" Width="250px" Height="22px" MaxLength="5"
runat="server"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="tweMeetingTime" TargetControlID="txtMeetingTime" WatermarkCssClass="watermark"
WatermarkText=" Time (HH:MM)" runat="server"></cc1:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtMeetingTime" Text=""
ErrorMessage="Please enter the meeting time" Display="None"
InitialValue="" runat="server"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" ControlToValidate="txtMeetingTime" Text=""
ErrorMessage="Please enter the meeting time" Display="None"
InitialValue=" Time (HH:MM)" runat="server"></asp:RequiredFieldValidator>
</p>
<p>
<asp:TextBox ID="txtLocation" BorderStyle="None" CssClass="watermark"
Width="250px" Height="22px" runat="server"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender3" TargetControlID="txtLocation" WatermarkCssClass="watermark"
WatermarkText=" Location" runat="server"></cc1:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="rfvLocation" ControlToValidate="txtLocation" Text=""
ErrorMessage="Please enter the location" Display="None"
InitialValue="" runat="server"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvLocation1" ControlToValidate="txtLocation" Text=""
ErrorMessage="Please enter the location" Display="None"
InitialValue=" Location" runat="server"></asp:RequiredFieldValidator>
</p>
<p>
<asp:ImageButton ID="btnAddMeeting" ImageUrl="/images/buttons/addmeeting-btn.gif" runat="server" OnClick="btnAddMeeting_Click" />
</p>
<p>
</p>
</asp:Panel>
</div>
<%# Master Language="C#" MasterPageFile="/masterpages/Master.master" AutoEventWireup="true" %>
<asp:content ContentPlaceHolderId="additionalhead" runat="server">
</asp:content>
<asp:content ContentPlaceHolderId="additionalbody" runat="server">
<umbraco:Macro Alias="AddMeeting" runat="server"></umbraco:Macro>
</asp:content>
<asp:content ContentPlaceHolderId="bodyContent" runat="server">
</asp:content>
<%# Master Language="C#" AutoEventWireup="true" %>
<!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><umbraco:Item field="title" runat="server"></umbraco:Item></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jQueryString-2.0.2-Min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/Styles.css" />
<link rel="stylesheet" type="text/css" href="/css/Layout.css" />
<link rel="stylesheet" type="text/css" href="/css/Forms.css" />
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#uploadAgenda').hide();
$('#uploadMinutes').hide();
$('#<%=txtSearchEAA.ClientID%>').val('Search EAA');
var st = $.getQueryString({ ID:"search" });
if (st != '') {
$('#<%=txtSearchEAA.ClientID%>').val(st);
};
$('#<%=txtSearchEAA.ClientID%>').click(function() {
$('#<%=txtSearchEAA.ClientID%>').val('');
});
});
</script>
<script type="text/C#" runat="server">
protected void btnSearch_Click(object sender, EventArgs e)
{
Response.Redirect("/members/search-results?search=" + txtSearchEAA.Text);
}
</script>
<asp:ContentPlaceHolder id="additionalhead" runat="server"></asp:ContentPlaceHolder>
<umbraco:Item field="AdditionalHead" runat="server"></umbraco:Item>
</head>
<body style="background-color:#e5e5e5;">
<script runat="server">
protected void btnLogout_Click(object sender, EventArgs e)
{
FormsAuthentication.SignOut();
Response.Redirect("/login");
}
</script>
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="additionalbody" runat="server"></asp:ContentPlaceHolder>
<div class="wrapper">
<div class="content">
<div class="banner">
<div class="bannerSearchSpacer">
<h1><span>EAA</span></h1>
</div>
<div class="aboutEAA">
</div>
<div class="bannerSearchAligns">
<div class="searchbox">
<asp:TextBox ID="txtSearchEAA" CssClass="watermark"
Width="155px" runat="server"></asp:TextBox>
</div>
<div class="searchButton">
<asp:ImageButton ID="imbSearch" ImageUrl="/images/buttons/go.gif" OnClick="btnSearch_Click" runat="server" />
</div>
<div style="clear:both;"></div>
</div>
<div class="loginBox">
<dl>
<dt>Hello</dt>
<dd><umbraco:Macro Alias="MemberName" runat="server"></umbraco:Macro></dd>
<dt>Arena</dt>
<dd><umbraco:Macro Alias="MemberArena" runat="server"></umbraco:Macro></dd>
</dl>
<div><asp:ImageButton ID="btnLogout" ImageUrl="/images/buttons/logout.gif" runat="server" OnClick="btnLogout_Click" /></div>
</div>
<div style="clear:both;"></div>
</div>
<div id="contentarea">
<div class="menuLeft">
<div class="menuPlaceholder">
<umbraco:Macro Alias="DynamicMenu" runat="server"></umbraco:Macro>
</div>
</div>
<div class="mainBody">
<asp:ContentPlaceHolder id="bodyContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</form>
<umbraco:Macro Alias="MemberAnalytics" runat="server"></umbraco:Macro>
</body>
</html>
Try changing <%= to <%# within your jQuery script. Check out this article
It was sorted by removing the code blocks from the jQuery selectors and changing them to name*= selectors instead. Changing <%= to <%# did not solve the problem, hopefully the selector change will work for other people.

Resources