.NET Discussion

.NET Issues, Problems, Code Samples, and Fixes

jQuery: Awesome

Back in the day, I discovered jQuery, but never really did anything with it. I always wanted to learn, but really never had the time. I do now. Let me tell you something:

jQuery is friggin awesome.

Let me preface with the fact that I know little to no JavaScript. I once wrote one function to add the current date to a textbox in JS and it took me around half the day. However, in that same amount of time about two weeks ago, I was able to nearly completely understand how jQuery works. After a week, I was helping out others with their problems.

Don’t get me wrong, jQuery can’t do everything, but it sure can do some powerful stuff. For instance, AJAX is a breeze. For one project I had to make an AJAX call to check to see if someone was posting a comment as someone else while logged in as themselves, so I had to write my AJAX function myself. It took me 53 lines of JS and maybe 3 days to get it working right (along with a TON of research). When I wanted to apply that same function to my new project, I thought I would give jQuery a chance.

Eight lines of code. Actually, technically one line of code because I broke it into several lines:

function MakeCall(url,doAsync,callback) {
$.ajax({
url: url,
async: doAsync,
dataType: "text",
success: callback
});
}

Of course I have to handle the “callback” in the function that’s calling the MakeCall() function, but the actual making the call has been reduced by 85%. And it’s easier to maintain and reuse! This isn’t all that jQuery is good for. I believe jQuery’s strongest feature is its document manipulation. If you want to change something, all you have to do is select the element or class and, well, change it. For instance, if you have a div with an id of “myDiv”, to change the CSS class on it, you just do:

$("#myDiv").addClass("someClass");

Really, that’s it. If you wanted to do that when something is clicked, you could do:

$("#myLink").click(function () { $("#myDiv").addClass("someClass"); });

No, for real. That’s all you have to do. You can also manipulate things on page load:

$.(document).ready( function () { //run functions here });

The last and I think one of the most important aspects of jQuery is that it is VERY well documented, VERY ardently followed, and VERY well supported. You can even get Intellisense in Visual Studio 2008! I couldn’t possibly go through all the cool stuff that jQuery can do. You’ll have to see for yourself. It truly is amazing, and it is, as I was told, “brain-dead-stupid easy to learn”.

Advertisements

June 12, 2009 Posted by | AJAX, CSS, Javascript, jquery, Tips & Tricks, Visual Studio.NET | 1 Comment

ASP.NET: Images in DropDownLists?

I am having a major dilemma; apparently there is no easy way to add images to list items in a DropDownList. This to me seems ludicrous. I would like my user to be able to pick an icon from a dropdown and afterwards be able to grab that value to update my database. I’ve seen it done elsewhere, I just don’t remember where. I’ve seen solutions like EasyListBox, but I’m not about to shell out $100 for this little bit of functionality, and I’ll be damned if I’m gonna stare at their advertisements in their demo version. I’ve also seen people suggest a DHTML (CSS/Javascript) solution from DynamicDrive.com, but I was unable to find any sort of applicable solution.

THERE MUST BE A WAY. Please help!

Status: Unsolved
Solution: None yet.

March 15, 2008 Posted by | ASP.NET, CSS, Javascript, VB.NET | | 3 Comments

ASP.NET: How to Convert Your Site To A MasterPage Site in 3 Steps

Once you have your design converted into HTML/CSS, why should you have to worry about breaking it every time you create a new page? Abstract yourself from this with MasterPages, while still enabling yourself to easily make design changes. MasterPages are wonderful for standardizing your site and your design, in addition to making it easier to maintain and to build new pages. They are a very powerful and easily customizable way to template your site. This article is for those who don’t have much or any experience with MasterPages or are converting an old ASP.NET site to a MasterPage-driven site. If this is you, don’t be afraid—You can do it in just three easy steps!

1. Create a new MasterPage

Right click your project, go to “Add” and then “New Item…” and select MasterPage. Name it something useful, like “main.master” and hit ok. You should be presented with a barebones XHTML skeleton. Notice that your skeleton has this tag in it: <asp:contentplaceholder id="ContentPlaceHolder1" runat="server" />. This is the location where your content will be loaded from your .aspx pages. Fill your new MasterPage with the XHTML that you wish to use on every page. If you want some things to change based on certain variables, you can do so in the codebehind. Treat the MasterPage like any other .aspx page. The only thing different about it (on a basic level) is that it does not contain your content, but rather what encompasses your content.

2. Link your old pages to your MasterPage in the Page Directive

In your <%@ Page directive, add the following attribute: MasterPageFile="~/YourMasterPage.Master"

3. Tell the MasterPage What Content Goes Where

If you only have one ContentPlaceHolder, you will add the following tag around all of your content in your .aspx pages: <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">Hello, World!</asp:Content>, where “ContentPlaceHolder1” is the ID of the placeholder in your MasterPage that you linked to in step 2. If you have more than one ContentPlaceHolder in your MasterPage, simply wrap the tags around the correlating content.

And that’s it! That’s really all there is to it! Just apply steps 2 and 3 to each of your .aspx pages. There is an optional step for those who may have changed their pages’ codebehind inheritance:

4. Change CodeFile Inheritance

Simply replace whatever inheritance you have with Inherits System.Web.UI.Page

Please read my articles ASP.NET: How To Easily Reference MasterPage Members and my ASP.NET and AJAX: So Freaking Easy series for more tips on how to get yourself set up even better using MasterPages.

kick it on DotNetKicks.com

January 11, 2008 Posted by | AJAX, ASP.NET, CSS, MasterPages | 2 Comments

ASP.NET AJAX Toolkit: ModalPopupExtender Issues in IE6

While working on my newest creation, PROUDWear Sports, I’ve run into a little snag trying to implement the ModalPopupExtender.  Of course it works fine in IE7 and FireFox, but in IE6, it just refuses to work correctly.  I’m pretty sure that I’ve implemented it correctly, but one can never be too sure. I watched the How Do I: Use the ASP.NET AJAX ModalPopup Extender Control video provided by Microsoft and followed it pretty much exactly, except including my own functionality (which is essentially nothing! Basically showing a picture in the hidden panel with a close button, that’s it.) and still it refuses to work in IE6.

I posted in the ASP.NET forums about my issue a few minutes ago, detailing my total problem (6th post down, you can find it by searching for “.NET Discussion”). If you don’t want to go there, basically what happens is in IE6, instead of properly displaying the chosen modal panel, it displays the panel inline with the rest of the page and then goes modal, rendering the page inaccessible to the user.

If anyone has any suggestions, please please let me know.  Thanks!

Status: Solved! (8/17/07)
Solution: Upgrade your AJAX Toolkit DLL. This version is not the newest version, but the ModalPopupExtender functions correctly in IE6 when this one is applied.  I am not using the latest version because the accordion control does not function correctly in the newer versions.  When they fix that, I will go to the newest version.

WHEW!

August 14, 2007 Posted by | AJAX, AJAX Toolkit, ASP.NET, Bugs, CSS, FireFox, IE6, IE7, ModalPopupExtender | 20 Comments

How To Color Code Your DataGrid/GridView/DataGridView

While working on my product hit tracking system, I had the idea of color coding my results based on the URL they were referred from.  Once I got started, I realized that it was easier than I thought. The solution is pretty straightforward, but I assume that it will help someone out who is looking for a way to manipulate data based on string content. 

Basically, before you bind your data to your datagrid/gridview/datagridview, cycle through all your records in search of a string. For instance, I searched for “google”, “yahoo”, and “msn.com” and subsequently surrounded that data with a respective “<span class=”google”>” or yahoo or msn.  The code is easy:

Dim dv As DataView = GetData(SQL) 'populate your dataview however you do it
  Dim row As DataRowView
  Dim i As Integer
  Dim cols As Integer = dv.Table.Columns.Count 'get the number of columns in your dataview
  For Each row In dv
   For i = 0 To cols - 1 'go through each cell and color code as necessary
    If InStr(row(i).ToString, "google") Then 'search for the term "google"
     row.BeginEdit()
     row(i) = "<span class='google'>" & row(i) & "</span>"
     row.EndEdit()
   ElseIf InStr(row(i).ToString, "yahoo") Then 'search for the term "yahoo"
     row.BeginEdit()
     row(i) = "<span class='yahoo'>" & row(i) & "</span>"
     row.EndEdit()
    ElseIf InStr(row(i).ToString, "msn.com") Then 'search for the term "msn.com"
     row.BeginEdit()
     row(i) = "<span class='msn'>" & row(i) & "</span>"
     row.EndEdit()
    End If
   Next
  Next

Then in your CSS stylesheet you define classes for .google, .yahoo, and .msn.  Easy! This technique can be applied to anything you want to do with the string value of each cell in your data set.

Anyone have a cool algorithm that does something similar to this? Please share!

EDIT (10/30/2007):

Today I was trying to use this technique, but hit a snag because my datasource was bound to a Generics list (ie, List(of T)), so I found another way to do it. It’s possible to use the RowDataBound event to iterate through the rows and cells to find what you need. Here’s an example that works for me:

Protected Sub gvExisting_RowDataBound(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
 	'8 is where inventory is kept, "stock" is the header text
 	If e.Row.Cells(8).Text &lt;> "0" And e.Row.Cells(8).Text &lt;> "Stock" Then  
	Dim str As String = "<span>" & e.Row.Cells(8).Text & "</span>"
 		e.Row.Cells(8).Text = str
 	End If
 End Sub

July 30, 2007 Posted by | ASP.NET, CSS, DataGridView, Google, MSN, Tips & Tricks, Yahoo | 1 Comment