|
Just starting to familiarize myself with dotNet web design, and don't understand the behavior I'm getting with a Web Custom Control. To play around with custom controls, I decided to build a web site navigation control built around a table that's populated with the logo, and the common links in the web site. Then I just insert this control at the top of each page in the site, set one of the properties to indicate which link should be deactivated, and I've got a nice easy to maintain navigation control.
The funny behavior I get is when I set one of the controls properties in the designer... For some reason, all the rows and columns I added to the custom control in the constructor are duplicated in code on the form the control is in! What's that all about?
If that's not enough detail, here's a brief description of how I built the control... I added a web control project to my solution, and modified the template to use WebControls.Table as the base class. Then (here's where I might be going wrong) in the constructor, I added the rows and columns I wanted my control to have, and I also added the navigation links.
To use the control, I add it to the toolbox, and drag it onto the form I want to use it on. Then I have to set a property that deactivates the link for the current form, and for some reason, code is added to the form that duplicates the rows and columns I added in the constructor of the control!
|
|
|
|
|
Hi there,
That is because the Table.Rows property is defined as an inner default property of the Table class and the value of the Rows property is persisted in design mode when the control is changed. So after the control has been changed, the control designer TableDesigner redraws the appearance of the table, the rows property is now updated with the added rows in the constructor and it results in the duplication as you are seeing. In this case, you need to create your own custom control designer, the sample code looks something like:
[Designer(typeof(CustomTableDesigner))]
public class WebNavigator : System.Web.UI.WebControls.Table
{
public WebNavigator():base()
{
}
}
public class CustomTableDesigner : System.Web.UI.Design.ControlDesigner
{
public override string GetDesignTimeHtml()
{
WebNavigator table = (WebNavigator) Component;
if (table.Rows.Count==0)
{
TableRow row = new TableRow();
TableCell cell1 = new TableCell();
HyperLink link1 = new HyperLink();
link1.Text = "Home";
link1.NavigateUrl = "Home.aspx";
cell1.Controls.Add(link1);
row.Cells.Add(cell1);
TableCell cell2 = new TableCell();
HyperLink link2 = new HyperLink();
link2.Text = "About Us";
link2.NavigateUrl = "AboutUs.aspx";
cell2.Controls.Add(link2);
row.Cells.Add(cell2);
table.Rows.Add(row);
StringWriter sw = new StringWriter();
HtmlTextWriter tw = new HtmlTextWriter(sw);
table.RenderControl(tw);
return sw.ToString();
}
else
return base.GetDesignTimeHtml();
}
}
|
|
|
|
|
I tried that, but I still have the problem where the designer adds HTML code that duplicates the rows I added in the controls constructor!
I hope the code displays ok... 
<code>
... Here's the entry the designer adds initially...
<cc1:EngNavTable id="EngNavTable1" runat="server" MyLinkNumber="1">
... As soon as I modify an attribute in the custom control, all this gets added to the HTML file!
<asp:TableRow>
<asp:TableCell ColumnSpan="4" HorizontalAlign="Left" Text="<img src='images/agilityheader.jpg'>"></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell BackColor="LightBlue" Width="33%" HorizontalAlign="Center" Text="Transponder"></asp:TableCell>
<asp:TableCell BackColor="LightGreen" Width="33%" HorizontalAlign="Center" Text="Laser"></asp:TableCell>
<asp:TableCell BackColor="LightBlue" Width="33%" HorizontalAlign="Center" Text="Misc"></asp:TableCell>
<asp:TableCell BackColor="LightBlue" Width="33%" HorizontalAlign="Center" Text="<a href='http://www.agility.com'>Agility</a>"></asp:TableCell>
</asp:TableRow>
</cc1:EngNavTable></P>
</code>
|
|
|
|
|
Do you mean the duplication of the rows is that the html markups are added as soon as the control has been changed?
[DefaultProperty("Rows"), ParseChildren(true, "Rows") ...]
public class Table : WebControl
Looking at the code above, you will see that the Rows property of the control Table will be parsed by the page parser when the control is used declaratively on an ASP.NET page. It makes sure that the nested elements(rows) are in line with the count of the row collection of the control. So the html markups which are added should represent the Rows property of the control. For more information, you can see:
Control Parsing, ParseChildrenAttribute, and Control Builders[^]
Design-Time Support for Web Forms[^]
|
|
|
|
|
Is there any Calendar control tool in DHTML concepts... If not, i want to display Previous month , next month and present month calendars with complete Navigation buttons..
VenuGopal.A
|
|
|
|
|
|
I have to upload a image file from client side to server using ASP
Can any one help me
|
|
|
|
|
Hi Neeru:
If you are looking for 3rdParty Upload components, try here:
http://www.persits.com/ (ASPUpload)
For Native ASPUpload,
http://www.4guysfromrolla.com/ has an article which explains you to do the same with code example.
Deepak Kumar Vasudevan
Personal Web: http://vdeepakkumar.netfirms.com/
I Blog At: http://deepak.blogdrive.com/
|
|
|
|
|
I am trying to better understand CSS and am having problems. Maybe what I'm trying to do can't be done? Anyway, I am trying to recreate the look I've created at www.randommonkeyworks.com, and eliminating tables as much as possible. I finally saw the magic to 'div' tags, and their positioning tricks. But it appears they won't give me everything I want, unless I am overlooking something someone here may know.
I can see making the header a div, the sidebar a div, the footer a div, and the body a div, but then when I get to the purple frame I've placed along the top and left of the body, it blows up royally. Does anyone know any way to recreate that effect using only CSS?
(Even a bastardized conglomeration of a table inside of a div doesn't work, if I understand it correctly, as the div will not grow in height automatically unless there is text in it, and the top bar will not size right either. I won't go into much more details here, but I've tried.)
For a second question, how do you set up your navigation bar so that it is testable on your development hard drive, as well as on your actual site? What I mean is that if you use links like "/dir1/file1.html", in my case that would refer to "www.randommonkeyworks/dir1/file1.html", but on my development hard drive it refers to "D:\dir1\file1.html" (or something like that), so if the actual path is "D:\HtmlWork\Site3\dir1\file1.html", I can not test it on my development hard drive. And you have to use links like that on a navigation bar, because using relative links when your site has many subdirectories means that you have to massage the paths to the links on every page on a subdirectory basis, rather than just placing a chunk of code to absolute links. (That makes your site more brittle.) I've somewhat gotten around that with some JavaScript, but I want to know if there is a more elegant solution.
Thanks,
David
|
|
|
|
|
Question 1.
Could be achieved in many ways.
One way is to use the background property of the div.
eg:
BACKGROUND-POSITION: right top;
BACKGROUND-IMAGE: url(../library/images/RCorner.gif);
BACKGROUND-REPEAT: no-repeat
Question 2.
I recommend using relative links my friend. Makes you happier and life easier in the long term.
However, you could use some server side code to create the path to your files, reading the path form a config file. That would not work from html tough.
/M
|
|
|
|
|
1) I can only get that to work inside tables. If it is not inside a cell, the image will not extend to the other side of the window. (It won't extend down the entire length of the left side of the screen, either.)
2) The problem with relative links rears its ugly head when you go to insert a 'standard' header/sidebar, as was implemented on randommonkeyworks. If your 'common' stuff is in a 'common' subdirectory, the relative path to that subdirectory changes for each subdirectory on your site, keeping you from inserting the same relative links through shtml or whatever, unless you take other measures, as I have. I am wondering if there is a better way, though. As you indicated, with Javascript disabled, my way blows up.
(I don't have access to the server, but can do php on it, I believe. I just have not wanted to learn that in addition to everything else. But if I do that, the php won't work on my machine while testing the site, I believe. The Javascript seems to be the cleanest solution. Grrrrr...., unless I am wrong.)
David
|
|
|
|
|
David O'Neil wrote:
I don't have access to the server, but can do php on it, I believe. I just have not wanted to learn that in addition to everything else. But if I do that, the php won't work on my machine while testing the site, I believe.
why not? it's freeware... both server (Apache) and some PHP (e.g. PHP Triad http://sourceforge.net/projects/phptriad/[^] - all in one, even with DB, easy to set up - I used it while on high school... it sure won't be a problem for you  ).
David
|
|
|
|
|
1. ok, change the attribute:
BACKGROUND-REPEAT: no-repeat to BACKGROUND-REPEAT: repeat-x
2.
Well.. I am using a CSS-file. and the path is relative to that CSS-file.
In C# I am able to specify which CSS to use in my page with the following code.
in the client-page..
<br />
<link id="styleLink" type="text/css" rel="stylesheet" runat="server"></link><br />
in the Codebehind...
<br />
protected System.Web.UI.HtmlControls.HtmlGenericControl styleLink;<br />
private void Page_Load(object sender, System.EventArgs e)<br />
{<br />
string style = HttpContext.Current.Request.ApplicationPath + "/" + <br />
System.Configuration.ConfigurationSettings.AppSettings["GeneralStylePage"];<br />
style = style.Replace("//","/");<br />
styleLink.Attributes.Add("href", style);<br />
/Mattias
|
|
|
|
|
Mattias Olgerfelt wrote:
1. ok, change the attribute:
BACKGROUND-REPEAT: no-repeat to BACKGROUND-REPEAT: repeat-x
That will only repeat the background IN THE AREAS WHERE TEXT APPEARS. For this reason it won't work if you want the header to automatically expand itself to the right edge of the page. (If your line of text is: "My Text", and it is displayed in 10pt, the background will only be about 1" in width, and will end right after the final 't'.)
Mattias Olgerfelt wrote:
2.
I do not really understand what you are trying to do, and how it is different than my solution, or if it is better. What you imply is that you have a C# application running on your server, serving your pages, and that "ApplicationPath" gives you the root to the base directory of the site (I'm guessing). If I'm guessing correctly, that still doesn't explain how to overcome the problem I pointed out, in being able to test your site on your hard drive from any random subdirectory as you are designing it, and then having it work flawlessly upon moving it over to the final server location. (How does it know that the root isn't "D:\", but rather "D:\Documents\Work\PrototypeSite"? The code above does not seem to address that question.) But as I said, I cannot really understand what you are trying to do from the information you have given.
(In addition to that, I don't have access to the server, as I said, and I cannot run a C# application on it.)
Thank you for taking the time and trying to explain, though. I appreciate it.
David
|
|
|
|
|
David O`Neil wrote:
That will only repeat the background IN THE AREAS WHERE TEXT APPEARS. For this reason it won't work if you want the header to automatically expand itself to the right edge of the page. (If your line of text is: "My Text", and it is displayed in 10pt, the background will only be about 1" in width, and will end right after the final 't'.)
Well, that depends on what type of element you have... If you show me the code that is not working I will fix it for you...
About the path to stuff...
Aha, you want the the path to be relative but varying...
Ok.. here is what i sugest...
Add a container DIV to your page holding the menu.
Create a Javascritpt function that crates the meny...
Load the script in the page tag (onLoad="buildMenu();")
Something like this...
<br />
<style><br />
.menuItem { width: 100px; clear: both; float: left; BACKGROUND-COLOR: #FFF; border: #CCF; border: none; margin: 1px;}<br />
.menuMouseOver { width: 100px; clear: both; float: left; BACKGROUND-COLOR: #CCC; border: solid 1px #CCF; margin: 0; }<br />
.menuKeyDown { width: 100px; clear: both; float: left; BACKGROUND-COLOR: #444; border: solid 1px #CCF; margin: 0;}<br />
#menu { height: 200px; }<br />
</style> <br />
<script><br />
function initNavigation(sElementId, iLevel) {<br />
if (!document.getElementById) return;<br />
<br />
var sDir = '';<br />
var i;<br />
for (i=0; i<iLevel; i++) {<br />
sDir += '../';<br />
}<br />
var arrNav = new Array();<br />
arrNav[arrNav.length] = ['Main', sDir + './Page1.htm'];<br />
arrNav[arrNav.length] = ['Medit', sDir + './medit/Page1.htm'];<br />
<br />
var elm = document.getElementById(sElementId);<br />
for (i=0; i<arrNav.length; i++) {<br />
var r;<br />
r = document.createElement('span');<br />
r.className='menuItem';<br />
r.innerHTML = '<a href=\''+arrNav[i][1]+'\'>'+arrNav[i][0]+'</a>';<br />
r.onmouseover = function () { this.className = 'menuMouseOver'; }<br />
r.onmouseout = function () { this.className = 'menuItem'; }<br />
r.onmousedown = function () { this.className = 'menuKeyDown'; }<br />
r.onclick = function () { this.className = 'menuKeyDown'; document.location.href = this.childNodes[0].href; }<br />
elm.insertBefore(r,null);<br />
}<br />
}<br />
</script><br />
</HEAD><br />
<body onload="initNavigation('menu', 1)" ><br />
<form id=Form1 method=post runat="server"><br />
<div id="menuContainer"></div><br />
Level specifyes how deep the page is.
By the way...
I think that you realy shouldn't use absoulte path's to files and images. Instead use relative paths.
/M
|
|
|
|
|
I finally got the image to repeat, thanks to your prompting. I don't know what I was doing wrong earlier.
But just getting it to repeat doesn't solve the root problem, which is: "How would you create the purple border effect used on www.randommonkeyworks.com using only css elements?"
As for the paths: that is some great code you've posted, although I haven't tested it. (A 'for' loop end was sucked up by a "<".) But I don't see that it is any better than my solution, and it even appears that it will make loading pages more innefficient than my method, as there is a lot more computation that must take place.
And as for your belief that I should use relative paths: I would tend to agree, except that they get in the way of creating a site that is not brittle. You can see what I did to place the header and sidebar across all of the pages to my site, if you want. Here's a page I wrote up a while ago, briefly skimming the details. Of course, my css skills have improved since then, as well as some of my other skills, but I still can not see a simpler and easier to change method to accomplish what I have accomplished.
David
|
|
|
|
|
Hi...
There are some differences between your code and mine...
Mine is general, you don't have to maintain a root-path.
And it is a little easier to add events and styles to the elements in my code.
About the page load, you don't need to worry; it is a lot faster then the web browsers are rendering the page.
However… I have looked into making your page not using tables. Well it is possible but not with the exact look... There are differences between how tables (and table-cells) behaves and how div and span elements behave.
Here are some of them.
A table cell always fills out the rest of the cell if the table has a size and the rest of the cells have size. That is currently not possible using CSS. (Quite annoying actually).
It is not possible to align a span or div between each other in the way cells are aligned to each other.
A span or div does not change size like a table and cells changes size.
So, if you want this very dynamic behavior of changing size you are stuck to table.
However, I have made a little recoding of your page. You will find it here:
http://www.olgerfelt.se/MonkeyCode/Monkey.zip[^]
Note also that you have to replace the corner image to get the look you want.
/Mattias
|
|
|
|
|
Hi, again... corrected some small fuzzes... new version is downloadable...
/M
|
|
|
|
|
First, thank you, thank you, thank you, for taking the time to work on this and showing me something new. I really appreciate it.
I have been looking at it, and working with your first example, and just now looked at your second example. I'm trying to work out more futzes, and will get back with you on the results shortly. One thing I have noticed is that on your revision the corner jpg does not show up in Firefox, although I see Explorer presents yours very nicely. I'll explore this more deeply in a bit.
David
|
|
|
|
|
David O`Neil wrote:
One thing I have noticed is that on your revision the corner jpg does not show up in Firefox, although I see Explorer presents yours very nicely.
You can count with that IE is doing wrong and FF is correct...
/M
|
|
|
|
|
David O`Neil wrote:
One thing I have noticed is that on your revision the corner jpg does not show up in Firefox, although I see Explorer presents yours very nicely.
You can count with that IE is doing wrong and FF is correct... 
/M
|
|
|
|
|
This is what I got so far. My back hurts, my stomach is upset, and I'm otherwise very tired - all from working on this problem too hard. What I have works in Firefox, but not quite right in IE... Grrrrrr..... I'm going to take a nap!
Note that when the page is made narrow, the top words stay where you would expect them to stay. That was a big issue I had with part of your approach that absolute positioning seemed to fix.
David
|
|
|
|
|
Well,... almost. I've updated that last link again, but I am getting to issues that I can't figure out how to overcome.
The bottom footer: I have left it tucked inside the ContentContainer division, because if I don't, I can't get it even close to being below the ContentContainer material if the page becomes so long that the right scrollbar appears.
Also, my best efforts (the way I left it) resulted in the page working beautifully in Firefox, but the bottom scrollbar activates itself in IE, even though there is _nothing_ to the right of the screen! I believe this is because the ContentContainer's left margin is 120px, combined with a width of 100%. This also makes it so that the screen content doesn't wrap properly in IE (but it works wonderfully in Firefox, as I said).
Any ideas how to place the footer below the ContentContainer? Any idea how to get rid of the bottom scrollbar in IE without blowing everything else up?
I would love to have my site as clean as possible, but I'm beginning to suspect that it is just too much work to get this complicated of a style going.
Thanks,
David
(ps - The more I look at your JavaScript, the more I like it. Thanks.)
(pps - Even though Firefox renders it nicely, it does strange things when you highlight text by dragging the mouse over it. IE is much more predictable in that regard.)
|
|
|
|
|
12:32 am, CST: I'm giving up? Reposted best code so far in order to accomplish footer. Used a table. (Attempted it using only divs many, many times.) Gnnn. In addition, the solution appears different between Firefox and IE. In this case, I believe IE is correct for once.
David
|
|
|
|
|
hi, I am too tired to understand your first problem now, but I understand second one perfectly - I've run exactly to same problem. I've solved it with full path. And yes, it's ASP.NET solution, so I have base URI in config file. I think that best solution would be if HTML base tag could be applied localy. That's not the case, and convince W3C would take some time  Nah.. I've just looked at your JS - basicaly same idea as mine.
btw you can use some ideas from http://dnhsoftware.org/[^], if you like the layout. Not a single misused table there!
David
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
