Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Thursday, January 20, 2011

Render ASP Control To HTML String

Every now and then, you may come across the need to convert an ASP.NET control to html. For instance, if you were drafting an HTML email with your site, you may create the content of the email with .NET controls, then convert it to html to place into the body of the message.

I recently ran across the need to convert an asp hyperlink control to its html equivalent as part of a function used in creating a GridView.

My gridview contained an Eval and Function:
<div style="font-style: italic; font-size: 11px;">
Answered by <%#ShowName(Eval("faq_author"))%>
</div>


So, I attempted to use the function ShowName plant a control itself in the gridview:
Public Function ShowName(ByVal thisID As Integer) As HyperLink
Dim thisAuthor As New FaqAuthor(thisID)
Dim thisLink As New HyperLink()
thisLink.Text = thisAuthor.Name
thisLink.NavigateUrl = thisAuthor.ProfileURL
Return thisLink
End Function


Unfortunately, this doesn't work out like you'd hope:


But, there's an easily solution to change that System.Web.UI.WebControls.HyperLink into an actual html hyperlink. Using the IO.StringWriter class and HtmlTextWriter class, we can execute the .RenderControl function that can be found in nearly .NET control that renders into an HTML element.

My final ShowName function should look like this:
Public Function ShowName(ByVal thisID As Integer) As String
Dim thisAuthor As New FaqAuthor(thisID)
Dim thisLink As New HyperLink()
thisLink.Text = thisAuthor.Name
thisLink.NavigateUrl = thisAuthor.ProfileURL
Dim myStringWriter As New IO.StringWriter()
Dim myHtmlWriter As New HtmlTextWriter(myStringWriter)
thisLink.RenderControl(myHtmlWriter)
Return myStringWriter.ToString
End Function


And it works perfectly.
My gridview now shows hyperlink text that gives my users' name and links to their profiles.

Wednesday, December 1, 2010

CSS Consistency Issue between IE7 and IE8

While I was creating a short menu out of a bullet list, I observed an inconsistency in padding that surface between websites being viewing Internet Explorer 6 or 7 and Internet Exporer 8.

With IE 8, when I set the margins of my <ul> tags and my <li> tags to 0px, the bulleted list is still indented.


However, with IE 7 and 6, when I set the margins to 0px, the list lines up with the text above it.


From my research and testing, it would appear there is no way to correct for this.
It especially becomes a problem when developing in IE 8 and correcting the margin-left to -30px.
While IE 8 will show the text of the list left aligned with the rest of the text on the page, previous versions of the browser will bleed the list far left beyond the placement of the control's container.


To avoid this problem, the best practice going forward for the next couple years is either to account space for the list to be indented or avoid using lists.

    Friday, May 28, 2010

    How To Display HTML Code on a Website

    I used to think that the PRE html tag would let you type anything and show it as it appears in your source, but it seems like all the PRE tag does is allow you to type spaces without the web browser ignoring it.

    Anyways, you can show html code on your page without the browser attempting to render the html object, as shown in the picture below.



    All you have to do is change all of your tags brackets from <> to &lt; and &gt;.
    The letters lt and gt stand for less than and greater than, as in the convention use of the symbols. So, if you wanted to show someone how to make some text bold and some text italic underneath a picture, you could type:
    &lt;div&gt;&lt;img src="selfportrait.jpg" alt="A Picture Of Me By Me!" /&gt;&lt;/div&gt;
    &lt;div&gt;&lt;b&gt;My Self Portrait&lt;/b&gt; - &lt;i&gt;Created By Me&lt;/i&gt;&lt;/div&gt;

    And they would see:
    <div><img src="selfportrait.jpg" alt="A Picture Of Me By Me!" /></div>
    <div><b>My Self Portrait</b> - <i>Created By Me</i></div>


    Another little side note, in order to display &lt; without the browser turning it into a <, you can encode the ampersand the same way we encoded the bracket: &amp;lt;