I am not particularly proficient in ASP, so I might be missing something obvious here. I have a series of webpages that are using a wizardstep in asp to process. In the HTML markup that is returned there are some issues that have been brought to my attention to do with accessibility. The problem is that basically the HTML table returned is using attributes, rather than css style to display the data. I cannot see anywhere in the asp code where these attributes are being specified so I am unable to amend them. Would anyone be able to point me in the right direction?
Cheers.
<form id="form1" runat="server">
<h2><span style="font-size:90%;">
Code of Conduct for Members</span></h2>
<div style="text-align: center">
<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false" width="550px" ActiveStepIndex="0" OnFinishButtonClick="Wizard1_FinishButtonClick">
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
<!-- <h2> -->
<span style="font-size:110%;position:relative;">Introduction</span></h2>
<p >
<span style="font-size:90%;">
This is from the iframe within this webpage: http://www.leicestershire-fire.gov.uk/cfa/complaints_members.shtml
Basically I can see this on the generated page as:
<table cellspacing="0" cellpadding="0" border="0" id="Wizard1" style="width:550px;border-collapse:collapse;">
<tr style="height:100%;">
<td align="left" valign="top" style="background-color:White;border-color:White;border-style:Solid;">
It looks like you are using an old version of ASP.NET, which is notorious for using inline styles instead of css classes.
There are two possible solutions:
Upgrade to ASP.NET 4. Search this page for "wizard": http://msdn.microsoft.com/en-us/library/s57a598e.aspx. This is preferable, although upgrading may alter the look and feel of your other pages and components. There are ways of making it backwards-compatible (see TargetFramework)
Install a CSS Adapter: http://www.asp.net/CssAdapters/ - as you can see though, this hasn't been updated since 2006.
You may also find this page useful so you can see an example of what the issue is and how they solve it with CSS Adapters: http://www.asp.net/cssadapters/Membership/CreateUserWizard.aspx
Related
I am working on an ASP.NET VB.NET Web Application. I inherited a bunch of forms from another application we have in house. I'm running into a very strange problem when working on the Login page.
This is an abbreviated version of my code:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<table>
<tr>
<td>
<span id="Span1" runat="Server" style="Color: Red"></span>
</td>
</tr>
<tr>
<td>
<asp:Login ID="Login1" runat="server">
<LayoutTemplate>
<table>
<tr>
<td>
<span id="Span1" runat="Server" style="Color: Red"></span>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:login>
</td>
</tr>
</table>
</asp:Content>
I have a <span id="span1"> that is located inside my web form, within the Content part of the page. I can easily access this in my CodeBehind, and do whatever I want to do with it. However, if i move that span and put it inside the <asp:login> part of the page, it doesn't seem to recognize it, it won't let me access it in code behind, it gives me a squiggly blue line and says
span1 is not declared. It may inaccessible due to protection level
This bit is from the top of the webform in designer
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="_Default" MasterPageFile="~/Site.master" %>
This bit is from the Login.aspx.vb page
Partial Class _Default
Just to say it again, id="span1" works perfectly fine where it is shown in the code above, but when I move it inside the I cannot reference it anymore. Since I'm talking about this issue, for that matter I cannot add any new controls inside because I am not able to reference any other controls in vb.net. (this form was pretty much copied from another project, everything works properly I'm just not sure why I'm having this strange issue)
I noticed that a lot of people have similar issues, but in my case I'm working with <asp:login> and I'm really not sure how it's affecting my controls.
EDIT: <span id="Span1" runat="Server" style="Color: Red"></span>
You need to use FindControl on the Login1 Control
HtmlGenericControl hgc = Login1.FindControl("Span1") as HtmlGenericControl;
hgc.InnerText = "Span Found";
VB
Dim hgc As HtmlGenericControl = CType(Login1.FindControl("Span1"),HtmlGenericControl)
hgc.InnerText = "Span Found"
As per my comments, and as requested by the OP...
You're hitting a problem with the naming container.
When the <span runat="server"> is outside of the <asp:Login><LayoutTemplate> it exists as an object within the page, which you can reference directly.
As soon as it's moved within that <LayoutTemplate> it becomes a child of the <asp:Login> control instead.
So to access the control, you can use the following...
CType(Logon1.FindControl("span1"), HtmlGenericControl).InnerHtml = "hello"
The FindControl will bring back an object, but it needs to be "boxed" into the correct type before you can access the InnerHtml property
to access a control on server side, you must include the "runat='server'" attribute on a tag. That's what tells .NET that any given control is supposed to be worked with on the server side as well as the front-end.
Do note that it will change the ID produced in the rendered HTML
<span id="span1" runat="server"></span>
EDIT Final: Just in case someone else sees this behavior, I wanted to explain my work around. I was using a placeholder on my Master page for the webform described below. I added a server control to the placeholder in the Master page OnInit event. Through a process of elimination, I figured out that the behavior described below only happens when I add this server control to the Master page.
titlebarPlaceHolder.Controls.Add(sctitlebar)
I re-wrote the Master Page to not need the server control added and the behavior described below went away. I have no idea what caused it. It was a simple server control, but this is my work around.
EDIT 2: The same behavior happens when the container is a table in the repeater control:
<asp:Repeater ID="rptAuditList" runat="server">
<ItemTemplate>
<tr class="odd">
<td><asp:LinkButton ID="lnkOpenAudit" runat="server" Text='<%# Eval("auditname") %>'></asp:LinkButton> </td>
</tr>
</ItemTemplate>
</asp:Repeater>
Here is the HTML output:
<td>Demo PreClose July 2012 </td>
EDIT: In my testing I just noticed that if I run the extact same control OUTSIDE of a MasterPage, it worked correctly, but if I run it inside a MasterPage, it behaves in the way described below.
I have tried this with a Repeater, DataList and Listview and the results are always the same.
Here is the HTML:
<asp:ListView ID="lvwAuditList" runat="server" >
<LayoutTemplate>
<ul><li runat="server" id="itemPlaceholder"></li></ul>
</LayoutTemplate>
<ItemTemplate>
<li><asp:LinkButton ID="lnkAudit" runat="server" Text='<%# Eval("auditname") %>' >
</asp:LinkButton></li>
</ItemTemplate>
</asp:ListView>
Here is the output:
<ul>
<li>Demo PreClose July 2012</li>
<li><a id="contentMain_lvwAuditList_lnkAudit_1" href="javascript:__doPostBack('ctl00$contentMain$lvwAuditList$ctrl1$lnkAudit','')">Demo PostClose Audit June 2012</a></li>
</ul>
The first row always has an extra href="" added. I have never seen this behavior before. I have stripped down the html and code behind to its most basic, yet I still get this extra href="". The code behind just sets the datasource and binds it, nothing else.
Thank you.
If you are using the first list tag as a placeholder and replacing the content in the code behind I would use a slightly different approach adding an ASP.NET PlaceHolder inside the list tag as follows:
<ul><li><asp:PlaceHolder runat="server" ID="itemPlaceholder" /></li></ul>
I have experienced some unusual artefacts appearing in Response code when using ASP.NET tags in a manner for which they were not particularly intended. This may well be causing your problem as well!
I am designing a master page of a website, which i am designing in asp.net web forms. Like the website :
http://bayyinah.com/dream./
I have worked up some stuff and below is the image, of how my website really looks now :
i have to make a footer and a menu, using jquery like the one in http://bayyinah.com/dream./
And here is my html of master page :
<%# Master Language="C#" AutoEventWireup="true" CodeFile="LeaveManagementSystemMasterPage.master.cs" Inherits="LeaveManagementSystemMasterPage" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="Stylesheet" type="text/css" href="Menu.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;height:100%">
<tr>
<td>
<table width="100%" style="background-color: #202020">
<tr>
<td>
<asp:Image runat="server" ImageUrl="~/Images/LeaveImage.PNG"/>
</td>
<td width="100%">
</td>
</tr>
</table>
<%-- Provide header in the cell--%>
</td>
</tr>
<tr>
<td>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="100%" MaximumDynamicDisplayLevels="10" CssClass="MenuBar">
<StaticMenuStyle CssClass="StaticMenuItem" />
<StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
<StaticSelectedStyle CssClass="StaticSelectedStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
</asp:Menu>
</td>
</tr>
<tr>
<td>
content here.
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<%--Footer would be provided here--%>
<td >
footer here
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Note that the website is the same website which i had mentioned in my previous questions :
Styling a data drive menu control in asp.net
Issue in creating a data driven menu in asp.net
If you're looking for general advice then Stack Overflow is the wrong place to look. I suggest that you check out the faq to determine what kind of questions to ask.
That being said, I do have some advice for you. I would ditch IE8 for development. Learn to develop on Chrome (or Firefox with Firebug) and then see if it works on other browsers. At the rate that IE8 is dropping, it will only be a concern for another year or two. Since it seems that you're learning web development for fun or a hobby, I don't think it's worth the pain. You can bring up the developer tool in Chrome by hitting F12. Learn to use these kinds of tools.
As for web forms, they can sometimes be difficult to handle. Learning the MVC architecture will help you loads to know how to program web sites. That's not to say you won't encounter web forms in the workplace. I personally rarely deal with web forms.
It seems that you're having problems understanding CSS. I suggest that you learn about the Box Model. The Mozilla Developer Network and w3schools are great resources to get you started. Don't be surprised if w3schools sometimes gives you bad advice. It helped me learn a great deal when I was starting out but it's not a place to go to for best practices.
If anyone else has any more advice to add feel free. I'm still a novice in my Senior year at College. Also feel free to correct me.
I have a Web Content Form containing a Div and various Server controls like DropDownList. When I run the application, it runs well without any errors, but when I view the HTML source, the Server controls are red underlined. On bringing the mouse over, say, DropDownList, a tooltip warning is displayed:
DropDownList is not a known element. This can occur if there is a compilation error in a website.
Edited
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="contentReportSchemesMenu.aspx.cs" Inherits="contentReportMenu" Title="Reports Menu" %>
<asp:Content ID="ContentReportMenu" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="divMenu" class="divMenu" runat="server">
<table id="tblMenuLayout" class="Options" runat="server">
<tr>
<td colspan="2" class="Top">Scheme Reports Menu</td>
<td></td>
</tr>
<tr>
<td class="Left">Report Type</td>
<td class="Right">
<asp:DropDownList ID="ddlReportType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlReportType_SelectedIndexChanged"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="Left">Select District</td>
<td class="Right">
<asp:DropDownList ID="ddlDistrict" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlDistrict_SelectedIndexChanged" Enabled="False"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="Left">Select Block</td>
<td class="Right">
<asp:DropDownList ID="ddlBlock" runat="server" AutoPostBack="true" Enabled="False" OnSelectedIndexChanged="ddlBlock_SelectedIndexChanged"></asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" Enabled="False" />
</td>
<td></td>
</tr>
</table>
</div>
</asp:Content>
A quick Google search soon found the solution: Delete the files from “C:\Documents and Settings[Username]\Application Data\Microsoft\VisualStudio\9.0\ReflectedSchemas” folder (or “…\VisualStudio\8.0\…” if running Visual Studio 2005) in Windows XP. In Windows 7 it is under "C:\Users{User Profile}\AppData\Roaming\Microsoft...etc". Remember also the "VisualStudio" part of the path will be different depending on the version installed.
I closed Visual Studio (always a good ideas for changes that will affect the IDE), deleted the files then re-opened the project. The warnings were gone.
I found references to this solution at:
http://forums.asp.net/t/1205528.aspx
http://blogs.msdn.com/mikhailarkhipov/archive/2005/04/21/410557.aspx
FYI, the search term I used in Google was “element is not supported”.
I don't know why this happens but I do know there are some flakey domain profile things happening in the network environmnet.
You're receiving this error because the table is running at the server, but the tr and td elements are not. When you specify runat="server" on a table element, it expects child elements to run at the server as well.
There are two easy ways to verify this:
Remove runat="server" from the table declaration;
Take the DropDownList(s) outside of the table
Try one of these two options, and see if it fixes the problem.
EDIT
Make sure that the ContentPlaceHolderID on the content form matches the ID of the corresponding content area in the master page. If that doesn't fix your problem, try creating a new content form, applying the advice above, and add a control to the form in the content area. If there are no errors, then you know the issue is somewhere in your markup.
Try deleting the schema cache. To do this, close Visual Studio and delete all of the files in the following directory:
C:\Users\USERNAME\AppData\Roaming\Microsoft\VisualStudio\10.0\ReflectedSchemas
Once the files have been deleted, open Visual Studio again and the problem should be fixed.
You said that "when I view the HTML source, the Server controls are red underlined", but HTML source can not contains such elements like DropDownList because this is the ASP.NET control which is generated as HTML Select tag. Considering that common solution with schema cleanup is not helped you perhaps a problem is in an other place... I'll try to assume that you are opening ASPX/ASCX file itself using some third party editor which is not aware of ASP.NET controls, am I right?
I've just started tinkering with the ASP:Login control, and want to edit its appearance. So I did the following:
<asp:login ID="login" runat="server" onauthenticate="Authenticate">
<LayoutTemplate>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
</LayoutTemplate>
</asp:login>
Despite the fact that I have no <table> tag anywhere in the document, once I preview the page and view the source, it very clearly shows a <table> there. Ah! How in the world do I prevent this crazy behavior, or am I forced to use tables for layout instead of CSS?
You can set it not to use tables without third party extensions, just make sure you use the
<LayoutTemplate>
</LayoutTemplate>
For laying out your HTML/form inside the control, then set the attribute on the Login that controls the outer table to false.
RenderOuterTable="false"
That's it, no tables :)
You can use the CSS Friendly control adapter for the login control to change it.
http://www.asp.net/CSSAdapters/Membership/Login.aspx
There's a number of things you can do.
The easiest would be to use the Css Control Adapters toolkit's version of the Login control, although it hasn't been updated in a while and I haven't used it recently, so maybe it's not a great option anymore, I'm not sure.
Otherwise you could try creating your own ITemplate and setting it as the property of the LayoutTemplate for the Login control.
Alternately you could rewrite the generated HTML with an IHttpHandler, or even redo it on the client with something like jQuery dom replacement.