Results 1 to 9 of 9

Thread: CSS and VB Code

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Oct 2000
    Location
    Chesterfield, UK
    Posts
    298

    CSS and VB Code

    I am using css to format my webpage, but all of the code on the page is displayed via my "code behind". So when I the page runs, the code has already run and my css doesn't seem to format my page correctly.

    I did find something that basically allowed me to put code in the code behind, that added HTML to the beginning so it would ensure that my css and javascript files would run correctly.

    Hope you can help.



    Cheers


    Matt

  2. #2
    PowerPoster hellswraith's Avatar
    Join Date
    Jul 2002
    Location
    Washington St.
    Posts
    2,464
    OK, there are really two issues here.

    First, and you really need to look at this, is that you are creating HTML in your codebehind. There is VERY few reasons to do this, and when you do, you lose the whole benefit of seperation of code and content. Why are you building HTML in your code behind? I can probably show you a different way.



    With that said:
    You need to include a 'class=' attribute to the html tag you want to format.

    So, lets say that you are outputing this string of HTML:
    Code:
    <b>H</b>ello everyone.  I am glad to see you.<br>
    You want to format that string based of of your CSS, you would need to do something like this:
    Code:
    <div class="MyStyle"><b>H</b>ello everyone.  I am glad to see you.<br></div>
    In your CSS sheet, you need to create a class called MyStyle that it matches up to.
    Code:
    .MyStyle
    {
           ...Formatting here.....
    }

  3. #3

    Thread Starter
    Hyperactive Member
    Join Date
    Oct 2000
    Location
    Chesterfield, UK
    Posts
    298
    I am generating the tables from the codebehind, which I are displaying information from a database. That is the only html code I am writing with in the codebehind.

    I have been using :

    VB Code:
    1. Response.Write"<td class='mystyle'>" & DataPulledFromTheDatabase & "</td>"

    So when the page is displayed it looks shabby, then after a split second the text is formatted, but it is visible to the eye and I wouldn't give that to my dog, nevermind a customer.

    VB Code:
    1. .MyStyle ' Will never work
    2. {
    3.        ...Formatting here.....
    4. }
    5.  
    6. Body ' Does work
    7. {
    8.        ...Formatting here.....
    9. }


    In the above, the actual 'body' formatting does work, but runs after my 'codebehind ' code has already been processed by the server, thus, the time delay on formatting, whereas the custom one 'MyStyle' has more chance of running than a one legged dog.

    Any Ideas?

    Regards,


    Matt

  4. #4
    PowerPoster hellswraith's Avatar
    Join Date
    Jul 2002
    Location
    Washington St.
    Posts
    2,464
    Here is the deal, you should be using the table control, not building a table in a html string in your code behind. It isn't that hard to use, and seperates content from code. This is no longer ASP, it is a whole new ball game.

    Also, look at the data repeater control and the datagrid control in addition to the table control. These have EVERY bit of functionality you require, you just have to devote a little time in learning them.

    If you post the code you are actually using in your code behind, I can help you get started on changing to the asp.net way....

    If you want a quick example, I have a sample project I created for another person to show them the basics of the table control. The cool thing about using the controls is when they are rendered, they include all the styling:
    http://www.variantx.com/StudyGroupFi...03_Meeting.zip

  5. #5

    Thread Starter
    Hyperactive Member
    Join Date
    Oct 2000
    Location
    Chesterfield, UK
    Posts
    298
    First of all thank you for the suggestion.

    Here is the code from my codebehind -

    VB Code:
    1. Public Class _default1
    2.     Inherits System.Web.UI.Page
    3.  
    4. #Region " Web Form Designer Generated Code "
    5.  
    6.     'This call is required by the Web Form Designer.
    7.     <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
    8.  
    9.     End Sub
    10.  
    11.     Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
    12.         'CODEGEN: This method call is required by the Web Form Designer
    13.         'Do not modify it using the code editor.
    14.         InitializeComponent()
    15.     End Sub
    16.  
    17. #End Region
    18.  
    19.     Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    20.         Dim objFSO, objFolder, objSubFolder, objFile, objFileProp As Object ' Create Object Variables
    21.         Dim strURIFolder, strPhysicalFolder, strExtension As String ' Create String Variables
    22.         Dim strFile, strFileType, strFileIcon As String ' Create String Variables
    23.         Const strImagePath As String = "../images/" ' Create Constant For The Image Directory Path
    24.  
    25.         strURIFolder = Request.ServerVariables("SERVER_NAME") & Mid(Request.CurrentExecutionFilePath, 1, Len(Request.CurrentExecutionFilePath) - Len(Trim(LCase(Right(Request.CurrentExecutionFilePath, Len(Request.CurrentExecutionFilePath) - InStrRev(Request.CurrentExecutionFilePath, "/"))))))
    26.         strPhysicalFolder = Mid(Request.PhysicalPath, 1, Len(Request.PhysicalPath) - Len(Trim(LCase(Right(Request.PhysicalPath, Len(Request.PhysicalPath) - InStrRev(Request.PhysicalPath, "\")))))) & "root\"
    27.  
    28.         objFSO = Server.CreateObject("Scripting.FileSystemObject") ' Initialize The File System Object
    29.         objFolder = objFSO.GetFolder(strPhysicalFolder) ' Set The Start Folder For The System Object
    30.  
    31.         Response.Write("<table border='1' width'100%' id='tblFolders'>")
    32.         Response.Write("<tr>")
    33.         Response.Write("<td colspan='3'>Folder Listing</td>")
    34.         Response.Write("</tr>")
    35.  
    36.         If Request.QueryString("subfolder") = "" Then ' If QueryString 'subfolder' String Is Empty
    37.  
    38.             If objFolder.Subfolders.Count > 0 Then
    39.  
    40.                 Response.Write("<tr>")
    41.                 Response.Write("<td colspan='2'>Folder Name</td>")
    42.                 Response.Write("<td>&nbsp;</td>")
    43.                 Response.Write("</tr>")
    44.  
    45.                 For Each objSubFolder In objFolder.Subfolders ' Traverse Through The File System
    46.  
    47.                     If Not Left(objSubFolder.Name, 1) = "_" Then ' Use The Left Function To Avoid Interation Through FrontPage Extension Folders
    48.  
    49.                         ' Display Result On The WebPage
    50.                         Response.Write("<tr>")
    51.                         Response.Write("<td colspan='2'><a href='" & "http://" & strURIFolder & "?subfolder=" & objSubFolder.Name & "\" & "'>" & " " & StrConv(objSubFolder.Name, VbStrConv.ProperCase) & "</a></td>")
    52.                         Response.Write("<td><IMG id=imgFolder name=" & objSubFolder.Name & " alt='" & StrConv(objSubFolder.Name, VbStrConv.ProperCase) & " (Folder)" & "' src='" & strImagePath & "folder16.png' border=0>" & "</td>")
    53.                         Response.Write("</tr>")
    54.  
    55.                     End If ' If Not Left(objSubFolder.Name, 1) = "_" Then
    56.  
    57.                 Next ' Find Next File
    58.  
    59.             Else ' If objFolder.Subfolders.Count > 0 Then
    60.  
    61.             End If ' If objFolder.Subfolders.Count > 0 Then
    62.  
    63.         Else ' If Request.QueryString("subfolder") = "" Then
    64.  
    65.             ' If The QueryString 'subfolder' Has A Value, Set The objFolder Object To The Full Path
    66.             objFolder = objFSO.GetFolder(strPhysicalFolder & Request.QueryString("subfolder"))
    67.  
    68.             If objFolder.Subfolders.Count > 0 Then
    69.  
    70.                 Response.Write("<tr>")
    71.                 Response.Write("<td colspan='2'>Folder Name</td>")
    72.                 Response.Write("<td>&nbsp;</td>")
    73.                 Response.Write("</tr>")
    74.  
    75.                 For Each objSubFolder In objFolder.Subfolders ' Traverse Through The File System
    76.  
    77.                     If Not Left(objSubFolder.Name, 1) = "_" Then ' Use The Left Function To Avoid Interation Through FrontPage Extension Folders
    78.  
    79.                         ' Display Result On The WebPage
    80.                         Response.Write("<tr>")
    81.                         Response.Write("<td colspan='2'><a href='" & "http://" & strURIFolder & "?subfolder=" & Request.QueryString("subfolder") & objSubFolder.Name & "\" & "'>" & " " & StrConv(objSubFolder.Name, VbStrConv.ProperCase) & "</a></td>")
    82.                         Response.Write("<td><IMG id=imgFolder name=" & objSubFolder.Name & " alt='" & StrConv(objSubFolder.Name, VbStrConv.ProperCase) & " (Folder)" & "' src='" & strImagePath & "folder16.png' border=0>" & "</td>")
    83.                         Response.Write("</tr>")
    84.  
    85.                     End If 'If Not Left(objSubFolder.Name, 1) = "_" Then
    86.  
    87.                 Next ' For Each objSubFolder In objFolder.Subfolders
    88.  
    89.             Else ' If objFolder.Subfolders.Count > 0 Then
    90.  
    91.             End If ' If objFolder.Subfolders.Count > 0 Then
    92.  
    93.         End If ' If Request.QueryString("subfolder") = "" Then
    94.  
    95.         Response.Write("<table>")
    96.  
    97.         Response.Write("Files")
    98.  
    99.         For Each objFile In objFolder.Files ' Traverse Through The File System
    100.  
    101.             'Get The Extension Of objFile
    102.             strExtension = Trim(LCase(Right(objFile.Path, Len(objFile.Path) - InStrRev(objFile.Path, "."))))
    103.  
    104.             ' Avoid Displaying Irrelevant Information
    105.             If Not Left(objFile.Name, 1) = "~" And Not Left(objFile.Name, 1) = "_" And Not LCase(objFile.Name) = "default.aspx" Then
    106.  
    107.                 ' Get The File Name Minus The Extension And Full System Path
    108.                 strFile = Mid(objFile.Path, InStrRev(objFile.Path, "\") + 1, InStrRev(objFile.Path, ".") - InStrRev(objFile.Path, "\") - 1)
    109.                 ' Convert The File Name To "Proper Case"
    110.                 StrConv(strFile, VbStrConv.ProperCase)
    111.  
    112.                 objFileProp = objFSO.GetFile(objFile.path)
    113.  
    114.                 'Start Of Extension Selection
    115.                 Select Case strExtension
    116.  
    117.                     Case "doc"
    118.                         strFileType = "Word Document"
    119.                         strFileIcon = "word16.png"
    120.  
    121.                     Case "xls"
    122.                         strFileType = "Excel Document"
    123.                         strFileIcon = "excel16.png"
    124.  
    125.                     Case "pdf"
    126.                         strFileType = "Adobe Acrobat File"
    127.                         strFileIcon = "pdf16.png"
    128.  
    129.                     Case Else
    130.  
    131.                         GoTo InvalidFile
    132.  
    133.                 End Select ' Select Case strExtension
    134.  
    135.             End If ' If Not Left(objFile.Name, 1)........
    136.  
    137.             'Display The Results On The Web Page
    138.             Response.Write("<IMG id=imgText name=" & strFile & " alt='" & StrConv(strFile, VbStrConv.ProperCase) & " (" & StrConv(strFileType, VbStrConv.ProperCase) & ")" & "' src='" & strImagePath & strFileIcon & "' border=0>" & " ")
    139.             Response.Write("<A HREF='" & "http://" & strURIFolder & "root/" & Request.QueryString("subfolder") & (objFile.Name) & "'>" & StrConv(strFile, VbStrConv.ProperCase) & "</A>" & "<BR>")
    140.             Response.Write(objFileProp.Size)
    141.  
    142. InvalidFile:
    143.  
    144.         Next ' For Each objFile In objFolder.Files
    145.  
    146.         ' Set Objects To Nothing
    147.         objFSO = Nothing
    148.         objFolder = Nothing
    149.         objFileProp = Nothing
    150.  
    151.     End Sub
    152.  
    153. End Class

    Regards,


    Matt

  6. #6
    PowerPoster hellswraith's Avatar
    Join Date
    Jul 2002
    Location
    Washington St.
    Posts
    2,464
    Your code looks like ASP code that was dropped into .Net. I am not going to be able to spend the time to convert it all, I have other projects. You should really start with a good asp.net book that includes vb.net help in it.

    First of all, don't use the File System object anymore...please....
    Use the System.IO namespace to do file and folder work.

  7. #7

    Thread Starter
    Hyperactive Member
    Join Date
    Oct 2000
    Location
    Chesterfield, UK
    Posts
    298
    I wouldn't expect you to convert the code, I was just looking for suggestions and a start point, and that is what you have given me, so thanks for your help.


  8. #8
    PowerPoster hellswraith's Avatar
    Join Date
    Jul 2002
    Location
    Washington St.
    Posts
    2,464
    Ok, here is a tip then to help you get started.

    ANYWHERE you see HTML code mixed with your vb code, you are doing something wrong. No if's and's or but's about it. Just consider that a rule. I have found no reason yet that you HAVE to have html code in your vb code. I have found it easier on occasion, but that isn't the norm, it is a BIG exception.

    Example:
    Code:
    Response.Write("<IMG id=imgText name=" & strFile & " alt='" & StrConv(strFile, VbStrConv.ProperCase) & " (" & StrConv(strFileType, VbStrConv.ProperCase) & ")" & "' src='" & strImagePath & strFileIcon & "' border=0>" & " ")
    Should be turned into an image control on the page, and you just set the properties of the image control to the same things you are doing above. Whats easier to read in code, your code above, or this:
    Code:
    myimage.Name = strFile
    myimage.Text = StrConv(strFile, VbStrConv.ProperCase) & " (" & StrConv(strFileType, VbStrConv.ProperCase) & ")" 
    'The Text property above is a guess.  I can't remember what it is exactly right now.
    myimage.Src = strImagePath & strFileIcon
    myimage.Border = 0
    Better yet, you can set the controls border to 0 with a property in the designer, and limit out that line all together. The name can also be changed out with a common one. Now we are down to 2 lines of easily manageable code....starting to understand? I would much rather go in and fix my version than your big string version.

  9. #9

    Thread Starter
    Hyperactive Member
    Join Date
    Oct 2000
    Location
    Chesterfield, UK
    Posts
    298
    Yeah, I think I got it now, I guess I have to stop thinking in terms of asp and think the .NET way, I got a couple of asp.net and vb.net books over the weekend and I am starting to get the jist of it.

    Thanks once again.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width