.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”.

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

ASP.NET: How to Integrate Both Google Checkout and PayPal In 3 Steps

Trying to get Google Checkout and PayPal to work with a custom .NET site or solution has been a problem for as long as they’ve been around.¬†If you don’t know what you’re doing, it can be a daunting task, and sometimes even if you do know what you’re doing! Well, I am going to take the guesswork out of this chore once and for all, as I have recently discovered the ultimate way to integrate these payment gateways into your website.

If you’re saying, “Wait a second, haven’t you already written an article on this?” you are correct. However, the solution I present to you here is infinitely simpler and requires fewer moving parts. The only reason I didn’t take the previous article down is because it does present interesting information about nesting MasterPages.

The Solution

In their documentation, PayPal and Google Checkout both mention that you must put their code into your site exactly as they have it, using the HTML forms they way they have structured them. This is not true. There are only a few bits of information that are required, and so long as they are present in an acceptable fashion, your pass-off to these gateways will work smoothly and flawlessly.

  1. Get rid of your form tags. That’s right. Lose the form tags. You will only need your <form runat="server"> tag, no more nested HTML forms. W3C compliancy, here we come! However, don’t lose the information contained in your old <form> tag attributes. You’ll still need some of that.

  2. Create image buttons for Google Checkout and PayPal. While they don’t have to be image buttons (for functionality’s sake), both Google and PayPal will get upset if you have standard buttons instead of their images as checkout buttons. It is in this button where the magic happens – the button has a property called PostBackURL. This is where you will put the action string from your form. For instance, PayPal’s PostBackURL value is “https://www.paypal.com/us/cgi-bin/webscr&#8221;. Google’s will be “https://checkout.google.com/cws/v2/Merchant/%5Byour merchant number]/checkoutForm”. You can put both Google’s and PayPal’s buttons next to each other. Here is some sample code:
    <asp:imagebutton id="btnSubmitPaypal" runat="server" imageurl="/images/checkout-paypal.gif" alternatetext="Purchase Using Paypal" postbackurl="https://www.paypal.com/us/cgi-bin/webscr" />

  3. Create your hidden inputs to transfer information to PayPal and Google Checkout (from the same page, no extra postbacks!). However you dynamically create your hidden input tags, keep doing it. Just keep this in mind: Google Checkout and PayPal have no tags in common except one, the “item_name_x” (where “x” is a number) tag. If this is the same for both Google Checkout and PayPal, leave it alone and only have one! If you must have two (as I do), make sure you put Google’s tags before PayPal’s. This is important because Google reads the first tags that match what it’s looking for and ignores everything else. PayPal will take the last tag that matches its requirements.

    I mention this because Google Checkout has an “item_description_x” attribute that will take additional information about the item where PayPal does not, meaning that PayPal users have to cram all the info about their product into the “item_name_x” tag. Thus, if you change the order, Google will display double information (PayPal’s “item_name_x” plus their own “item_description_x” tag) and PayPal will display only what you want to transfer to Google Checkout (the last “item_name_x” tag).

  4. BONUS: Hook up Google Analytics. For those advanced users who want to hook up their Google Analytics, you still can using this method. The asp:button element has an attribute called OnClientClick. Put the following as the value for this attribute in your Google Checkout image button: setUrchinInputCode();

For those looking for some sample code on how to dynamically generate your input tags, simply create a literal somewhere on the page and populate it with the following function:

Public Function CreateCheckoutTag(ByVal att As String, ByVal value As String) As String
		Dim input As String = "<input type=""hidden"" name=""" & att & """ value=""" & CleanText(value) & """ />"
		Return input
	End Function

Where the CleanText(value) function cleans any possible special characters from the value. Not necessary, but recommended.And that’s it! Three or four easy steps and you’re ready to use both Google Checkout and PayPal Website Payments on your website! I hope this saves someone 60 or 70 hours of their life, as it would have mine had I known about it three years ago ūüôā

kick it on DotNetKicks.com

February 27, 2008 Posted by | ASP.NET, Google, MasterPages, PayPal, Tips & Tricks, UpdatePanel | 52 Comments

ASP.NET and AJAX: Error Making Forms Visible With UpdatePanel

While converting a site to a MasterPage-driven site, I ran across an issue involving UpdatePanels, Panels and Forms. The scenario is that in my MasterPage, I have an UpdatePanel that wraps my ContentPlaceHolder, thereby applying the AJAX functionality to all pages associated with that MasterPage. The content page in question has a panel that is invisible until a button is pressed. The contents of the panel are two non-server forms for PayPal and Google Checkout. Before I converted the site to MasterPages and AJAX, the functionality performed correctly, but afterwards, the site would hang (ie, not complete the server side action), and the browser would produce the Javascript error:

“Unknown runtime error”

I tried many different combinations of contents for the panel, but the only one that seemed to produce the error was whenever a form was present inside the panel. This was very frustrating, as no one around the internet community really seemed to have run across this error, and modifying the MasterPage to account for this single scenario would be a nightmare.

A working solution I came up with for this rare error is to wrap your content (on your .aspx page) with another UpdatePanel and set your triggers to post back when the button is pressed. While the client may have to suffer another postback, it’s not as bad as a total loss of functionality.

If you can find a more elegant solution to this problem, I would love to hear it!

EDIT (2/29/08): I believe the error occurs¬†whenever you are using nested HTML forms within your runat=”server”. If you’re looking to post to another form, please see my article on integrating PayPal and Google Checkout.

January 18, 2008 Posted by | AJAX, ASP.NET, Errors, Google, Javascript, MasterPages, PayPal, UpdatePanel | Leave a comment

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: Dynamically Adding Controls

I am currently undergoing an upgrade on a legacy project trying to bring it into the “Web 2.0 AJAX” era and ran into a problem with dynamically uploading user controls. My perusings of the internet led me to a four-part series by Dave Reed (part of the ASP.NET team) entitled Truly Understanding Dynamic Controls. Even though it was written in 2006 (oh-so-long-ago), I believe that it is a must-read for any ASP.NET developer, even if you think you know how dynamic controls work.

Thanks so much for this article, Dave! It has truly been a lifesaver!

January 4, 2008 Posted by | AJAX, ASP.NET, Tips & Tricks | Leave a comment

Javascript: jQuery. Interesting.

I do not know Javascript at all. I know, I know, you say, “How can you consider yourself a real developer and not know any Javascript?” Well, I don’t not know Javascript; I can work within it. I just couldn’t create a document using it.¬†This is probably due to the paradigm of “Javascript is evil” being pounded into my head during my nascent developer years.

Regardless, I would at some point like to learn. For those who are like me and don’t know any Javascript, maybe this is the place to start: jQuery. While it is in no way close to actual Javascript syntax, it is somewhat similar to .NET syntax, which should probably help reduce the learning curve a bit. Basically it’s a library that enables you to circumvent common Javascript pitfalls while providing you with the ability to code more while actually writing less.¬†It has some built in functions and abilities, and appears as though it will simplify the application of true AJAX.

Sound interesting? I thought so.

December 11, 2007 Posted by | AJAX, Javascript, Tips & Tricks | | 1 Comment

ASP.NET: (FREE!) Online Image Editor For Your Site

While reading my regular CodeProject newsletter this morning, I came across an interesting article about an open-source .NET image editor (implementing AJAX) that can be implemented into your website! I have not tried to use it yet, but I most likely will in an upcoming site that I am building.  From the demo version, it appears to have all the basic functionality a regular, non-power user would need to upload and edit pictures for a photo gallery (something that will be necessary in my next project, also open-source and found on CodeProject). Again, I have not tried this yet, but when I do, I will post my experience here, of course.

Wouldn’t it be nice to create a fully-functional,¬† powerful, feature-rich site in about a day just by dropping in programs like these into a masterpage?¬†I have a feeling that may be the direction people are going, but then again, that’s a great feature of .NET, too.¬† Mmmm, plug and play.

If you have used any of the software above, please let me know your reaction!

November 6, 2007 Posted by | AJAX, ASP.NET, Tips & Tricks | Leave a comment

ASP.NET and AJAX: UpdatePanelPopupExtender Is An Awesome Tool

Supposing that your site is set up for ASP.NET and AJAX, adding a popup panel to any control is a snap, thanks to Raj Kaimal’s UpdatePanelPopupExtender¬†(UPPE).¬† Normally I am not one for taking other people’s code or user controls, but I was in a bind and needed something like this very quickly, and it worked amazingly well.¬† Essentially, the UPPE acts as a method to hide and show a details or “extra info needed” panel using AJAX.¬† You can even easily attach it to command buttons in GridViews!

It is very easy to install: simply drop the DLL in your /bin/ directory and reference it, and then add it to your toolbox (second section). Then drop it where you want it, usually at the bottom of the page because during runtime its page location¬†will be determined dynamically.¬† Here’s code that I used to make it work on the .aspx page:


<cc1:updatepanelpopupextender id="uppeDetails" runat="server" targetcontrolid="upDetails" offsetx="0" offsety="0" CalloutColor="#7C6F57" CalloutBorderColor="Black" AutoPostBack="True">
 <div style="display:none;">
  <asp:updatepanel id="upDetails" runat="server">
  <contenttemplate>
<!-- ENTER WHATEVER YOU WANT HERE -->
  <div class="popup-details">
  <h3>Inventory Notes: </h3>
  <asp:textbox id="txtInventoryNotes" runat="server" textmode="multiLine" rows="5"></asp:textbox>
  <p><asp:button runat="server" id="btnSaveNotes" text="Save and Close" onclick=btnSaveNotes_Click> <asp:button runat="server" id="btnCancelNotes" text="Cancel"></p>
  </div>
<!-- END -->
  </contenttemplate>
  </asp:updatepanel>
 </div>

The necessary parts of the above code are the <div style="display: none;">, which ensures that the panel is hidden from the get-go, the autopostback="true" property in the control declaration, and the fact that it is referencing an update panel within your hidden div. Anything else is pretty much optional, and you can put anything in there, too.

Once you have that set up, you have a few steps in your code-behind to set up (all control names reference the controls from the above example). First, import the library (Imports Flan.Controls). Then in your Page_Load event, you need to reference the “close” button for your UpdatePanel, like so: UpdatePanelPopupExtender.RegisterCloseControl(btnCancelNotes, upDetails)

Then the last step is to have the control show up where you want it to, usually next to the button that says “Edit” or “See Details” or whatever, and to do that, just put the following code in that control’s Click event: uppeDetails.ShowAt(yourControl). And that’s it!

If you want to wire it to a control in a GridView, it is a little trickier, but not because of the UPPE. Rather, you need to dynamically locate the control to wire the UPPE to. Here’s how you do it using the “SelectedIndexChanging” event of a GridView:

Protected Sub gvExisting_SelectedIndexChanging(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.GridViewSelectEventArgs)
		Dim ctl As Control = CType(gvExisting.Rows(e.NewSelectedIndex).Cells(10).Controls(0), Control)	'Cells(10) is the location of my CommandField column
		gvExisting.SelectedIndex = e.NewSelectedIndex
		txtInventoryNotes.Text = gvExisting.DataKeys(e.NewSelectedIndex).Values(1)
		uppeDetails.ShowAt(ctl)
	End Sub

What I did in the above example is figure out exactly which cell was clicked, then pull the datakey from the GridView (which happens to contain the info I want) and then setting the textbox in my UPPE to that information, then showing the UPPE.

It’s all very easy to do, and extremely helpful for UI. You can have entire detail panels just pop up for editing, take care of business, then disappear again. No more need for separate detail pages, just use an UpdatePanelPopupExtender!

Here’s the download location for the UpdatePanelPopupExtender and sample code.

kick it on DotNetKicks.com

October 31, 2007 Posted by | AJAX, AJAX Toolkit, ASP.NET, GridView, Tips & Tricks | | Leave a comment

ASP.NET/MySQL Open Source Forum Software: Does It Exist?

I’ve been looking for a decent open source forum in ASP.NET that hooks up to a MySQL database, but it looks like there’s a serious dearth in the area of free ASP.NET forum software period!¬† So far I have found two. ¬†

  • YetAnotherForum¬†is an open-source¬†app written in .NET (C#), but does not hook up to a MySQL server. I looked through the source code and started getting dizzy, as it’s very convoluted. Should I wish to customize it, it looks like I would have to take many hours to decipher what goes where and is called by what all over the place.¬† However, I’ve never really considered what goes into the making of forum software, so maybe this is just par for the course. I may end up sucking it up and going with this software, but I won’t like having two databases (MSSQL and MySQL).
  • The second .NET forum app I found was dnfBB. This is more of a plain-Jane-looking forum, but with some CSS, I’m sure I’d be able to fix it up.¬† It supposedly hooks up to MySQL (and Firebird and MSSQL). I say “supposedly” because I could not get this forum to install on my machine, and it’s not really open source.¬† I can’t really say much about it other than I couldn’t get it to work, as I received an error message during installation.

If I can’t find some good .NET forum software soon, I may have to lower myself to implementing some sort of…sigh…PHP forum software (of which there are many).¬† It would be a little weird running PHP and .NET simultaneously in the same site, but if I can’t come up with anything else, that might have to do. I certainly don’t have the time (nor the desire) to write forum software myself, although I probably could. Reinventing the wheel is not much fun.

Has anyone else “deigned” to mix PHP in their site with .NET simply because the right .NET software wasn’t out there? Am I killing my credibility for even suggesting this? ūüôā

October 12, 2007 Posted by | AJAX, ASP.NET, Forums, MySQL | , | 2 Comments

ASP.NET and AJAX Toolkit: Is Anyone Else Having Problems With the Accordion Control?

Ever since version 10301 of the AJAX Toolkit, the Accordion control has been acting a little wonky for me, but only in certain circumstances.¬† The recent release of the AJAX Toolkit still has not addressed this issue.¬† I’ve posted about it in the ASP.NET forums¬†hoping that someone will get back to me or that they will at least address the issue.¬† I’m not the only one having problems, but apparently I’m the only one having this particular problem: basically, my Accordion control’s headers’ text is set at text-indent: -5000px to make the text not appear on the page so I can replace it with a background image. Pretty standard procedure. But when using the versions of the ASP.NET AJAX Toolkit later than 10301, when the user clicks on a header to get the content in the AccordionPane, all the background images for the headers disappear and the text returns. It’s a really weird bug that I don’t think they’ve quite figured out how to fix, but I am confident that they will. Check the link above for my full code.

When they figure out what’s wrong and fix it, you’ll see it here.

EDIT 10/15/07: I’ve been informed of a work-around for those who like workarounds.¬†Click the link above to my post to the ASP.NET forums and read the thread.¬† It’s definitely a workaround and a bit kludgy, but it will work.

October 10, 2007 Posted by | Accordion, AJAX, AJAX Toolkit, ASP.NET, Bugs | Leave a comment