Question

Locked

Using Javascript in ASP.NET/VB.NET

By srbonton ·
My task is to create a dynamic widget. A part of the widget is creating tabs. Once the widget is rendered on the client side it should display the layout. Part of the layout is creating a tab control that displays dynamic data. Please find a copy of the code pasted below.
The final step is to implement the inline Javascript so that it gives the behavior and format the tab control accurately. How do I do this?


----------------------------------------------------------------------------------------------------------------------------------------
Public Sub GenerateBullets(ByVal ID As Int64)
Try

Dim BulletList As List(Of FlexOffers.Entities.Content)
Dim LongReview As List(Of FlexOffers.Entities.Content)
LongReview = p.Content.GetContentByTransactionID(ID, ConfigurationManager.AppSettings("TrackURL"), 36)

BulletList = p.Content.GetContentByTransactionID(ID, ConfigurationManager.AppSettings("TrackURL"), 34)
LongReview = p.Content.GetContentByTransactionID(ID, ConfigurationManager.AppSettings("TrackURL"), 36)

JavaCode.Append("document.write('<div style=""width:100%"">');")

If BulletList.Count > 0 Then

With JavaCode

.Append("document.write('")
.Append("<table cellspacing=""0"" cellpadding=""0"" border=""0"" width=""100%"" style=""font-family:Arial, Helvetica, sans-serif;"">")
.Append("<tbody>")
.Append("<tr>")
.Append("<td width=""140"" style=""text-align:left; vertical-align:top; padding-right:10px;"">")
.Append("<a href=""" & strLink & """ target=""_blank"">")
If BulletList(0).Image.ID > 0 Then
.Append("<img alt=""Apply Now"" title=""Apply Now"" src=""http://content.linkoffers.net/SharedImages/Products/" & BulletList(0).ProductID & "/" & BulletList(0).Image.ID & "." & BulletList(0).Image.Extension & """ border=""0"" style=""border-color:#cccccc; border-style:solid; border-width:1px;"">")
Else
.Append("<img alt=""Apply Now"" title=""Apply Now"" src=""http://content.linkoffers.net/SharedImages/image_replace.gif"" border=""0"" style=""border-color:#cccccc; border-style:solid; border-width:1px;"" >")
End If
.Append("<\/a>")
.Append("<table border=""0"" align=""center"" cellpadding=""0"" cellspacing=""0"">")
.Append("<tr>")
.Append("<td colspan=""2""> </td>")
.Append("<\/tr>")
.Append("<tr>")
.Append("<td style=""padding-top:2px; padding-right:5px; padding-bottom:2px; padding-left:5px; width:60px; text-align:left; font-weight:bold; font-size:12px; background-color:#eeeeee; border-color:#cccccc; border-width:1px; border-style:solid;"">Intro Rate<\/td>")
.Append("<td style=""padding-top:2px; padding-right:5px; padding-bottom:2px; padding-left:5px; width:80px; text-align:left; font-size:12px; background-color:#ffffff; border-top-color:#cccccc; border-top-width:1px; border-top-style:solid; border-bottom-color:#cccccc; border-bottom-width:1px; border-bottom-style:solid; border-right-color:#cccccc; border-right-width:1px; border-right-style:solid;"">No Introductory Rate Available <\/td>")
.Append("<\/tr>")
.Append("<tr>")
.Append("<td style=""padding-top:2px; padding-right:5px; padding-bottom:2px; padding-left:5px; width:60px; text-align:left; font-weight:bold; font-size:12px; background-color:#eeeeee; border-bottom-color:#cccccc; border-bottom-width:1px; border-bottom-style:solid; border-left-color:#cccccc; border-left-width:1px; border-left-style:solid; border-right-color:#cccccc; border-right-width:1px; border-right-style:solid;"">APR<\/td>")
.Append("<td style=""padding-top:2px; padding-right:5px; padding-bottom:2px; padding-left:5px; width:80px; text-align:left; font-size:12px; background-color:#ffffff; border-bottom-color:#cccccc; border-bottom-width:1px; border-bottom-style:solid; border-right-color:#cccccc; border-right-width:1px; border-right-style:solid;"">24.50%*<\/td>")
.Append("</tr>")
.Append("<tr>")
.Append("<td style=""padding-top:2px; padding-right:5px; padding-bottom:2px; padding-left:5px; width:60px; text-align:left; font-weight:bold; font-size:12px; background-color:#eeeeee; border-bottom-color:#cccccc; border-bottom-width:1px; border-bottom-style:solid; border-left-color:#cccccc; border-left-width:1px; border-left-style:solid; border-right-color:#cccccc; border-right-width:1px; border-right-style:solid;"">Fee</td>")
.Append("<td style=""padding-top:2px; padding-right:5px; padding-bottom:2px; padding-left:5px; width:80px; text-align:left; font-size:12px; background-color:#ffffff; border-bottom-color:#cccccc; border-bottom-width:1px; border-bottom-style:solid; border-right-color:#cccccc; border-right-width:1px; border-right-style:solid;"">$150**<\/td>")
.Append("</tr>")
.Append("</table>")
.Append("<\/td>")
.Append("');")
.Append("document.write('")
.Append("<td style=""vertical-align:top;"">")
.Append("<span style=""display:block; text-align:left; vertical-align:top; padding-bottom:10px;"">")
.Append("<a href=""" & strLink & """ style=""font-size:16px; font-weight:bold;"" target=""_blank"">")
.Append(Replace(BulletList(0).ProductName, "'", "\'"))
.Append("<\/a>")
'If BulletList(0).Product.Name <> BulletList(0).Program.Name Then
.Append("<span style=""font-size:11px; color:#999999;""> - ")
.Append("By " & Replace(BulletList(0).Program.Name, "'", "\'"))
.Append("<\/span>")
'End If
.Append("<\/span>")
.Append("<ul style=""margin:0; padding-left:15px; font-size:12px; padding-bottom:10px;"">")
.Append("');")

For Each Bullet As FlexOffers.Entities.Content In BulletList

.AppendLine("document.write('<li style=""padding-bottom:5px;"">" & (Replace(Replace(Replace(Bullet.Content, vbCrLf, ""), "?", "'"), "'", "\'")) & "</li>');")

Next

.Append("document.write('")
.Append("</ul>")
.Append("<span style=""display:block; font-size:14px; font-weight:bold;"">")
'.Append("»")
Try
If BulletList(0).Product.LinkText.Length > 0 Then
.Append("<a href=""" & strLink & """ target=""_blank"">" & BulletList(0).Product.LinkText & "</a>")
Else
.Append("<a href=""" & strLink & """ target=""_blank"">Apply Now</a>")
End If
Catch ex As Exception
.Append("<a href=""" & strLink & """ target=""_blank"">Apply Now</a>")
End Try
.Append("<\/span>")

If Len(BulletList(0).Product.Terms) > 0 Then
.Append("<span style=""display:block; font-size:11px; padding-top:10px; width:150px;"">")
.Append("<a href=""#"" onClick=""window.open(\'")
.Append(BulletList(0).Product.Terms)
.Append("\',\'\',\'scrollbars=yes,width=600,height=400\');"" class=""off4"" >Terms and Conditions<\/a>")
.Append("<\/span>")
End If
.Append(" ")


'This is end of tab control


.Append("<\/td>")
.Append("<\/tr>")
.Append("<\/tbody>")
.Append("<\/table>")
'This is beginning of tab control
'This is the Javascript Code for Tab Control


.Append(" ")


.Append("<style type=""text/css"">html, body, h1, h2, p, ul, ol, li, pre {")
.Append("margin: 0;padding: 0;")
.Append("}")
.Append("ul")
.Append("{")
.Append("list-style-type: none;")
.Append("}")
.Append("code")
.Append("{")
.Append("font-size: 100%;color: #666;")
.Append("}")
.Append("body")
.Append("{")
.Append("background: url(bg.gif) 50% 0 repeat-y #F5F5F5;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: small;color: #333; ")
.Append("}")
.Append("#km-wrapper")
.Append("{")
.Append("width: 768px;margin: auto;background: #fff;")
.Append("}")
.Append("#km-wrapper-inner")
.Append("{")
.Append("padding: 40px 20px;")
.Append("}")
.Append("h1.km-def")
.Append("{")
.Append("margin: 0 0 20px 0;color: #000;")
.Append("}")
.Append("h2.km-def")
.Append("{")
.Append("font-size: 100%;margin: 30px 0 20px 0;color: #000;")
.Append("}")
.Append("p.km-def")
.Append("{")
.Append("margin: 0 0 20px 0;line-height: 140%;")
.Append("}")
.Append("ul.km-def, ol.km-def")
.Append("{")
.Append("margin: 0 0 20px 0;")
.Append("}")
.Append("ul.km-def, ol.km-def li")
.Append("{")
.Append("margin-left: 40px;line-height: 140%;")
.Append("}")
.Append("ul.km-def")
.Append("{")
.Append("list-style-type: square;")
.Append("}")
.Append("pre.km-def")
.Append("{")
.Append("font-size: 100%;color: #999;margin: 0 0 20px 0;border: 1px solid #ccc;padding: 5px 10px;")
.Append("}")
.Append("a.km-def")
.Append("{")
.Append("text-decoration: none;font-weight: bold;border-bottom: 1px solid #ccc;color: #666;")
.Append("}")
.Append("a.km-def:hover")
.Append("{")
.Append("background: #F3F3F3;color: #000;border-bottom: 1px solid #000;")
.Append("}")
.Append(".new")
.Append("{")
.Append("background: url(n_eng.gif) 100% 0 no-repeat;padding-right: 25px;")
.Append("}")
.Append("img.km-def")
.Append("{")
.Append("border: 2px solid #ccc;")
.Append("}")
.Append("h1")
.Append("{")
.Append(" position: relative;overflow: hidden;left: -15px;")
.Append("}")
.Append("h1 span")
.Append("{")
.Append("display: block; position: absolute; top: 0; left: 0; z-index: 1")
.Append("}")
.Append("h1, h1 span")
.Append("{")
.Append("width: 294px;height: 109px;background-image: url(logo.gif);")
.Append("}")
.Append("div.demolayout")
.Append("{")
.Append(" width: 100%;margin: 0 0 20px 0;")
.Append("}")
.Append("ul.demolayout")
.Append("{")
.Append("list-style-type: none; width: 100%;float: left;background: url(pixel.gif) bottom left repeat-x;")
.Append("}")
.Append("ul.demolayout li")
.Append("{")
.Append("margin: 0 2px 0 0;float: left;")
.Append("}")
.Append("ul.demolayout a")
.Append("{")
.Append("float: left;display: block;padding: 4px 8px; border: 1px solid #ccc;border-bottom: 0;color: #666;background: #eee;text-decoration: none;font-weight: bold;")
.Append("}")
.Append("ul.demolayout a:hover")
.Append("{")
.Append(" background: #fff;")
.Append("}")
.Append("ul.demolayout a.active")
.Append("{")
.Append(" background: #fff;padding-bottom: 5px;cursor: default;color: #00f;")
.Append("}")
.Append(".tabs-container")
.Append("{")
.Append("clear: left;border: 1px solid #ccc;border-top: 0;padding: 20px 8px 0 8px;")
.Append("}")
.Append("#demo h2")
.Append("{")
.Append("font-size: 100%;margin: 0 0 20px 0;")
.Append("}")
.Append("</style>")


.Append("<div id=""demo"" class=""demolayout"">")

.Append("<ul id=""demo-nav"" class=""demolayout"">")
.Append("<li class=""democlass""><a href=""#tab1"">Review</a></li>")
.Append("<li><a href=""#tab2"">Rates & Fees</a></li>")
.Append("<li><a href=""#tab3"">Rewards</a></li></ul>")

'This is the review tab
.Append("<div class=""tabs-container"">")
.Append("<div class=""tab"" id=""tab1"">")
.Append("<h2>Review</h2>")
.Append("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nisl elit, facilisis nec vestibulum aliquam, adipiscing ac lectus. Praesent libero ipsum, volutpat eu porta vel, molestie ut purus. Donec et lorem a justo pellentesque feugiat eu eget diam. Aliquam non interdum leo. Sed auctor tortor ac mauris ullamcorper placerat. Praesent sit amet arcu ac nisiinterdum pellentesque et consequat metus. Ut eget mauris nisl. Aenean mattis sem eget dolor blandit vitae mollis elit faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></div>")


'This is the Rates and Fees tab
.Append("<div class=""tab"" id=""tab2"">")
.Append("<h2>Review</h2>")
.Append("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nisl elit, facilisis nec vestibulum aliquam, adipiscing ac lectus. Praesent libero ipsum, volutpat eu porta vel, molestie ut purus. Donec et lorem a justo pellentesque feugiat eu eget diam. Aliquam non interdum leo. Sed auctor tortor ac mauris ullamcorper placerat. Praesent sit amet arcu ac nisiinterdum pellentesque et consequat metus. Ut eget mauris nisl. Aenean mattis sem eget dolor blandit vitae mollis elit faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></div>")


'This is the Rewards tab
.Append("<div class=""tab"" id=""tab3"">")
.Append("<h2>Rewards</h2>")
.Append("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nisl elit, facilisis nec vestibulum aliquam, adipiscing ac lectus. Praesent libero ipsum, volutpat eu porta vel, molestie ut purus. Donec et lorem a justo pellentesque feugiat eu eget diam. Aliquam non interdum leo. Sed auctor tortor ac mauris ullamcorper placerat. Praesent sit amet arcu ac nisiinterdum pellentesque et consequat metus. Ut eget mauris nisl. Aenean mattis sem eget dolor blandit vitae mollis elit faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></div>")

.Append("</div></div>")
.Append("');")

End With

Else

With JavaCode

.Append("document.write('")
.Append("<div class=""topbar"">")
'.Append(";")

'.Append("document.write('")
.Append("<table width=""100%"" border=""0"" cellspacing=""0"" cellpadding=""0"">")
.Append("<tr>")
.Append("<td>")
.Append("<font face=""Arial, Helvetica, sans-serif"" size=""3"">")
.Append("<b>     <\/b>")
.Append("<\/font>")
.Append("<\/td>")
.Append("<\/tr>")
.Append("<\/table>")
.Append("');")

End With

End If

JavaCode.Append("document.write('</div>');")


If Request.QueryString("T") IsNot Nothing Then
If Request.QueryString("T") = "1" Then
JavaCode = JavaCode.Replace("http:", "https:")
End If
End If


Response.ContentType = "text/javascript"

Response.Write(JavaCode.ToString)
Catch ex As Exception
Response.End()
End Try

End Sub-------------------------------------------------------------------------------

This conversation is currently closed to new comments.

2 total posts (Page 1 of 1)  
| Thread display: Collapse - | Expand +

All Answers

Share your knowledge
Back to Software Forum
2 total posts (Page 1 of 1)  

Related Discussions

Related Forums