I am a new one to ASP.NET and currently learning from the book "Beginning ASP.NET with Visual Studio 2015" by William Penberthy. In the chapter 7 about layout with master pages I created a custom master page WebForms with stylesheet RentMyWrox and moved the inline style for various controls of the page ManagedItems.aspx to RentMyWrox.css. This cause the layout to mess up.
When I switched back to default master page and added the inline style to default Site.css stylesheet the layout was displayed correctly. I downloaded the source code for the book and it has the same issue. Could anyone explain, what is the problem?
My custom master page WebForms.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="WebForms.master.cs"
Inherits="RentMyWrox.WebForms" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Content/RentMyWrox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="header">
</div>
<div id="nav">
Navigation content here
</div>
<div id="section">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
Footer content here
</div>
</form>
</body>
</html>
Stylesheet for custom master page RentMyWrox.css
body {
font-family: verdana;
}
#header {
background-color:#C40D42;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:750px;
float:left;
padding:10px;
}
#footer {
background-color:#C40D42;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.dataentry input{
width: 250px;
margin-left: 20px;
margin-top: 15px;
}
.dataentry textarea{
width: 250px;
margin-left: 20px;
margin-top: 15px;
}
.dataentry label{
width: 75px;
margin-left: 20px;
margin-top: 15px;
}
#fuPicture {
margin-top: -20px;
margin-left: 120px;
}
Page ManagedItems.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/WebForms.Master" AutoEventWireup="true" CodeBehind="ManageItem.aspx.cs" Inherits="RentMyWrox.Admin.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<div class="dataentry">
<asp:Label ID="Label1" runat="server" Text="Name"
AssociatedControlID="tbName"></asp:Label>
<asp:TextBox ID="tbName" runat="server"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label ID="Label2" runat="server" Text="Description"
AssociatedControlID="tbDescription"></asp:Label>
<asp:TextBox ID="tbDescription" runat="server"
TextMode="MultiLine" Rows="5"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label ID="Label3" runat="server" Text="Cost"
AssociatedControlID="tbCost"></asp:Label>
<asp:TextBox ID="tbCost" runat="server"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label runat="server" Text="Item Number" AssociatedControlID="tbItemNumber"/>
<asp:TextBox runat="server" ID="tbItemNumber" /> </div> <div class="dataentry">
<asp:Label runat="server" Text="Picture" AssociatedControlID="fuPicture" />
<asp:FileUpload ID="fuPicture" ClientIDMode="Static" runat="server" />
</div>
<div class="dataentry">
<asp:Label runat="server" Text="Acquired Date" AssociatedControlID="tbAcquiredDate"/>
<asp:TextBox runat="server" ID="tbAcquiredDate"/>
</div>
<asp:Button Text="Save Item" runat="server" OnClick="SaveItem_Click" />
</div>
</asp:Content>
This is how it should look according to the book
This is how it actually looks like
The source code can be downloaded at http://media.wiley.com/product_ancillary/27/11190774/DOWNLOAD/RentMyWrox_Chapter7_CSharp..zip
Is the code attached/linked the "before" or "after" modification code?
My recommendation is to use the tools of your browser to check if the CSS file was actually loaded. In Chrome, you can press F12 and then click on the "Sources" tab. This will show you what is loaded down the left, I'm guessing your CSS file is not there.
If that's the case, it might be your reference in your master file.
Currently you have it as:
But that link is not a valid link from your manageitem.aspx page which is inside the 'Admin' folder.
Instead, try "~/Content/RentMyWrox.css" - this should map the proper path from the root of your application, rather than relative to whichever child page is loading the master.
Related
I have a listview that repeats horizontally, and it displays 20 images. With my screen resolution, there's space for 5 images/row, so I should see 4 rows.
Unfortunately, it is currently showing one long row with all 20 images. It's also displaying the horizontal scrollbar.
My question: how can I limit the space to my screen resolution so that I see the 4 rows with images and no horizontal scrollbar? Everything should be displayed within the screen. If anything, there should be a vertical scrollbar to scroll down.
I added some CSS to limit the size of the body to 100%, but nothing changed. I also set the div within <body> to 100%, but didn't do anything either.
Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body, html
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width:100%">
<asp:DataList id="DataListImages" RepeatDirection="Horizontal" RepeatLayout="Table"
RepeatColumns="0" runat="server">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<AlternatingItemStyle BackColor="Gainsboro">
</AlternatingItemStyle>
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div style="width: 192px; height: 162px"></div>
<asp:Image runat="server" id="ProductImage"
AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>'
ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
First off, this is a DataList - you need to fix that.
You need to take a look at the ListView GroupTemplate:
Using GroupTemplate in ASP.Net ListView Control(Tiled Display)
You may want to pay attention to the dimensions of the images and the file sizes from a performance point of view.
Here's a sample of using ListView GroupPlaceHolder to achieve a certain layout:
<asp:ListView ID="galleryView" runat="server" OnPagePropertiesChanging="ChangePage"
GroupPlaceholderID="groupPlaceHolder" ItemPlaceholderID="itemPlaceholder"
GroupItemCount="5">
<LayoutTemplate>
<div ID="groupPlaceHolder" runat="server"></div>
</LayoutTemplate>
<GroupTemplate>
<div ID="itemPlaceholder" runat="server"></div>
</GroupTemplate>
<ItemTemplate>
<asp:Image runat="server" id="ProductImage"
AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>'
ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' />
</ItemTemplate>
<GroupSeparatorTemplate>
<div id="Div1" runat="server">
<div style="clear:both"><br /></div>
</div>
</GroupSeparatorTemplate>
</asp:ListView>
<div style="clear:both; padding-top:8px; padding-left:8px;">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="galleryView" PageSize="40">
<Fields>
<asp:NumericPagerField ButtonCount="20" />
</Fields>
</asp:DataPager>
</div>
opc web trend (asp.net) controls are not displayed and showing Cross marks when configured with IIS7. Working fine in visual studio but when i publish this with IIS, it just shows cross marks. Below is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication7._Default" %>
<%# Register assembly="OPCWebTrends" namespace="OPCWebTrends" tagprefix="cc1" %>
<%# Register assembly="OPCWebControls" namespace="OPCWebControls" tagprefix="cc2" %>
<%# Register assembly="Dart.PowerWEB.LiveControls" namespace="Dart.PowerWEB.LiveControls" tagprefix="cc3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="z-index: 1; left: 10px; top: 15px; position: relative; height: 616px; width: 1298px; background-color: #FFCC99">
<br />
<br />
<div style="border-style: outset; border-width: inherit; border-color: #0000FF; height: 435px">
<cc1:OPCWebTrend ID="OPCWebTrend2" runat="server" Height="379px" Width="490px" />
<cc2:OPCWebRefresh ID="OPCWebRefresh1" runat="server">
</cc2:OPCWebRefresh>
</div>
<br />
<br />
<br />
</div>
</form>
</body>
</html>
I have kept Iframe inside updtae panel but then also it flickers every time it reload. I think I can use javascript to load my content of Iframe in order to make it flicker free.Is this way correct? If yes, then How can I do it? And if not, then What should I do?
This is the code
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div style="width:100%; height: 195px; margin-left: -7px;">
<asp:PlaceHolder ID="ContentPlaceHolderChatRequest" runat="server">
<iframe id="iframe1" frameborder="0" style=" width: 379px;
height:110%;" src="frmChatRequest.aspx"
scrolling="no" runat="server">
</iframe>
</asp:PlaceHolder>
<div></div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I have a simple .aspx page and a textbox which I want to maske It using jquery.maskedinput-1.3.js and my page .aspx code is as follows , the issue is on first page load I the textbox is masked , but after an asyncPostback the masked input plugin is not working ! how can I make the masked input plugin working ? thx in advance .
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
<script type='text/javascript'>
jQuery(function ($) {
$("#txtMembershipCode").mask("999-9999-999-9999");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="float: right" id="exDiv">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float: right; width: 120px; font-family: Tahoma">
membership Code :</div>
<div style="float: left">
<asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" ClientIDMode="Static"
dir="ltr"></asp:TextBox>
</div>
<div style="font-family: Tahoma; float: left">
<asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
<div style="font-family: Tahoma; float: right">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="Images/484.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
I have tried many different ways on the web but none of them are working !
Here is one way of solving this -
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
<script type='text/javascript'>
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
init();
}
function init() {
$("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
}
$(function() { // DOM ready
init();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="float: right" id="exDiv">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float: right; width: 120px; font-family: Tahoma">
membership Code :</div>
<div style="float: left">
<asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" dir="ltr"></asp:TextBox>
</div>
<div style="font-family: Tahoma; float: left">
<asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
<div style="font-family: Tahoma; float: right">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="Images/484.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
This approach uses the Sys.WebForms.PageRequestManager JavaScript class and is possible because you have a Script Manager on your .aspx page. Basically after every async postback the init() function will be called.
Notice the init() function is also called in DOM ready. This allows you to do everything to the DOM you need done again after content has changed during the async postback. I have used this technique before using various jQuery plugins including this one.
I used function pageLoad
<script type='text/javascript'>
function pageLoad() {
$("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
}
</script>
using VS 2010, C#, asp.net
I have timer control in my master page and I want to access it from my master page .cs file
But it didn't work, even when I used this code
((System.Web.UI.Timer)this.FindControl("Timer1")).Enable = false;
it look like VS don't know what is tiemr control ?!!!
please advice,
my first try was just,
Timer1.Enable=false;
and it didn't work and got this in when I run the web
"Compiler Error Message: CS1061: 'System.Web.UI.Timer' does not contain a definition for 'Enable' and no extension method 'Enable' accepting a first argument of type 'System.Web.UI.Timer' could be found (are you missing a using directive or an assembly reference?)"
here is my asp.net code
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Ads_master.master.cs" Inherits="Ads_master" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title>Every200</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 22%;
}
.style2
{
width: 263px;
}
.style3
{
width: 49px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="title">
<h1 style="font-family: Tahoma">
EVERY200.com
</h1>
<p style="color: #FFFF66; font-weight: 700; font-family: Tahoma;"> stop hunt cents, start hunt dollars</p>
</div>
<div class="loginDisplay">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<table class="style1">
<tr>
<td class="style2">
</td>
<td class="style2">
</td>
<td class="style2">
<asp:Label ID="Label_counter" runat="server" Font-Bold="True"
Font-Size="XX-Large" Text="0"></asp:Label>
<asp:Label ID="Label_message" runat="server" Font-Bold="True"
Font-Size="Medium"></asp:Label>
<asp:Label ID="AdsCaptchaHolder" runat="server" Visible="False"></asp:Label>
</td>
<td class="style3" style="text-align: left">
</td>
<td class="style3" style="text-align: left">
<asp:Button ID="Button_verify" runat="server" BackColor="#0033CC"
BorderStyle="Solid" Height="100%" onclick="Button1_Click" Text="Verify"
Visible="False" Width="100%" />
</td>
<td class="style3" style="text-align: left">
</td>
<td>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="http://images.neobux.com/imagens/banner5.gif"
PostBackUrl="http://www.neobux.com/?r=amrosama77" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="10000" ontick="Timer1_Tick">
</asp:Timer>
</div>
<div class="clear hideSkiplink">
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer" align="left">
</div>
</form>
</body>
</html>
try this,
Timer tm = Master.FindControl("Timer1") as Timer;tm.Enabled = false;
If you have added timer control in Master Page file, you can access timer control directly in Masterpage code behind file.
Please refer below code:
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<asp:Timer runat="server" id="Timer1">
</asp:Timer>
</asp:ContentPlaceHolder>
Code behind file :(.cs file)
Timer1.Enabled = false;
Please check if you have added the ScriptManager code.
Hi,
Please try this code and check.
((Timer)this.FindControl("timer1")).Enabled = false;