Client-Side Validation and .NET 4.0

We are finally upgrading one of our main sites http://www.yellowpagesunited.com to the 4.0 .NET Framework. The original site was built way back in 2004 (yes, 10 years ago) with the 1.1 .NET Framework. The site has seen many faces since then, but we have never gotten around to updating the framework, until now. The site relies heavily on our business objects which are quite numerous and complex, and these were all written with the 1.1 version of .NET as well. Now that we are finally upgrading them to the 4.0 Framework, we can upgrade our external web site as well. I will be posting about this process from time to time, mainly when I overcome an obstacle that relates to the upgrade.

My first post will help you quickly resolve issues relating to client-side validations & autopostback actions in web forms. In the past I would do something like this:

<form id="frmContact" runat="server" onsubmit="return verify(this);">

 

That would work just fine with .NET 1.1 and any form controls that post back to the server (radio button selection changes, checkbox changes, etc). That just won’t work anymore.

The quickest workaround (aside from rewriting all of your client-side validations. um, not today, thanks) is to remove the onsubmit call from the form, and add the neat little OnClientClick call to the button on the form, like so:

<asp:button id="btnSubmit" runat="server" class="contact-submit" onclick="btnSubmit_Click" OnClientClick="return verify(this);"></asp:button>

 

Now your web form controls can post updated states to the server without running your client-side validations. Super!

New Version of Yellow Pages United

Last week I launched the latest version of our company website for Yellow Pages United at yellowpagesunited.com.

Main points of interest:

  • Responsive layout
  • Fewer graphics, more CSS
  • Written with C#, HTML5, CSS, and jQuery
  • Smart searching with location suggestions via AJAX
  • Custom SSH Tunnel to show featured businesses from our partner site¬†BizYellow.com

This entry was posted in Tech and tagged , , , , , , on by .

Local PHP Dev Server on Mac OS X Mavericks!

This morning I needed to test some static files out quickly, but I didn’t want to waste time configuring my apache server to host multiple local sites. I was very stoked to find this post. I was off and running in less than a minute. Thanks, Matthew.


This entry was posted in Tech and tagged , , on by .

Get More Markers when Geocoding

If you are using geocoding to add markers to your map on your site, you may notice that most services will have a hard time finding the latitude and longitudes of businesses if the address contains secondary designators such as ‘STE 608′, ‘APT 12B’, ‘# 23′, ‘UNIT 12′, etc.

We recently ran into this snag while implementing some new features on one of our business listing sites at Yellow Pages United.

This morning I wrote the following function to deal with the pesky secondary designators:

The regular expression will match whatever pattern you throw at it, and remove the pattern, along with the number following the pattern, giving you a nice, clean street address for your geocoding pleasure.


This entry was posted in Tech and tagged , , , on by .

Smart Searching with Geolocation

As more and more people update their browsers, we as developers are able to offer more and more features to the masses. One such feature is geolocation which is built into html5. For this post I will show you how to auto populate a form field with the city and state of a user based on their geolocation (latitude and longitude).

First we call the getLocation() function in the onload event of the html body of our page.

This function will get the latitude and longitude from the user that is viewing the page and we use this information in the getAddress() function. The getAddress() function preforms an ajax request and receives a JSON formatted response.

We then parse this response and fill our location form field with the city and state via the putInDom() function.

Here’s the code:

Fun stuff!


This entry was posted in Tech and tagged , , , on by .

Taco Fancy

Recently I contributed to an open source project called ‘Taco Fancy‘, which is a community driven taco recipe repository. To me this is a great example of how awesome Github can be to the general public, aside from programmers. In the programming world we use Github as a version control system for applications or web sites where all of our files and file changes related to a specific project are tracked.

Basically, I cloned the repository on my local machine, made the changes to the repo on my local machine, and pushed them to a remote branch under my github account. Then I created a pull request for the owner of the original repo to look over. He decided that it was acceptable, but first asked that I made an edit to the table of contents file of the repo as seen here.

The repo owner merged my pull request (my version of the repo) with his and viola, my contribution is now included in the original repo.

This year I hope to contribute to many more open source projects (but more software related, of course).

Happy belated New Year to all, I hope it’s a good one!


This entry was posted in Food, Life, Miscellaneous, Tech and tagged , , on by .

Simple Error Handling for a C# .NET Web App

The simplest way I can think of to catch application errors in C# .NET would be to catch the exception in the Application_Error handler in the Global.asax.cs file and email it to yourself, which is, in fact, what I did this morning. Take a look:

protected void Application_Error(Object sender, EventArgs e)
		{
			Exception ex	 = Server.GetLastError();
			System.Web.Mail.MailMessage mail = new System.Web.Mail.MailMessage();
			mail.To	 = "xxxxxxx@yellowpagesunited.com";
			mail.Bcc	 = "xxxxxx@yellowpagesunited.com";
			mail.From = "xxxx@yellowpagesunited.com";
			mail.Subject	 = "Error on Web Site";
			mail.Body = "<p><strong>Server:</strong> " + Server.MachineName.ToString() + "</p><p><strong>Exception:</strong> "+ ex.ToString() +"</p><p><strong>Message:</strong> "+ ex.Message.ToString() +"</p><p><strong>Stack:</strong> " + ex.StackTrace.ToString() + "</p>";
			mail.BodyFormat = (System.Web.Mail.MailFormat.Html);
			mail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate", "1");
			mail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/sendusername", "xxxxxxxx@yellowpagesunited.com");
			mail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/sendpassword", "xxxxx");
			mail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpusessl","true");
			mail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpserverport", "xxx"); 
			System.Web.Mail.SmtpMail.SmtpServer = "smtp.gmail.com";
			System.Web.Mail.SmtpMail.Send(mail);
			Response.Redirect("/customer_service/error.aspx");
		}

 

As you can see it is just a very simple way to report an error, and to provide the end user with a nice error page with a general explanation along the lines of ‘something went wrong,’ instead of giving undecipherable information to a user.

This will also help me track down bugs so I can fix them quickly, without irritating users and thereby irritating our CS Reps.

Developing for iOS

With our latest release of BizYellow nearing completion, we are fine tuning everything on as many devices as we can. This morning our designer mentioned to me how annoying it is to fill out form fields on your iPhone or iPad and have the first word automatically capitalized. I share this sentiment, and I was glad that he mentioned it.

This lead me to the iOS Developer Library, where you will see that you can tell the form fields to behave however you wish (iOS 5.0+).

We can now configure autocapitalization and autocorrect in our form fields with ease and flexibility. Thanks, Apple.


This entry was posted in Uncategorized and tagged , , on by .

Handling forms inside of a facebox

Pop ups are dead. They are no longer a useful tool for developers to use in gathering user input for completing tasks on the web. We now rely on lightbox solutions that are essentially extensions of a parent html page that are loaded and manipulated with CSS and jQuery. We use a facebook-esque lightbox with many of our applications called facebox.

If you are familiar with the above mentioned technologies, you will know that submitting and processing a form in a facebox can be tricky, especially when you are trying to HTTP POST a form inside the facebox. Here I will offer a quick and easy solution using C#, facebox, and AJAX.

On our main registration form, we gather a businesses listing information to be used to create a customer account. Our business listings are organized by heading, so a customer must have a heading that exists in our system. We can not allow a user to arbitrarily choose headings. To accomplish this, we disable the heading text field. We offer a link to remove a heading, and a link to search for headings, which when clicked, the heading search form is loaded into a facebox.

<div class="register-form-field heading-controls">[<a class="standout" href="/customer_service/categories.aspx?textField=txtHeadingOne&formName=Register" rel="facebox">Select a heading</a>] &nbsp; &nbsp; [<a class="standout" href="javascript:fClearHeading('txtHeadingOne');">Remove this heading</a>]</div>

 

<script>
					$(function() {
						
						document.getElementById("txtSearch").focus();
						
						$("#btnSearch").click(function() {
							
							document.getElementById("btnSearch").value = "Searching...";
							
							var sTerm = document.getElementById("txtSearch").value;
							
							$.get("categories_get.aspx?term="+sTerm+"", function(response) {
								document.getElementById("lblHeadings").innerHTML = response;
								document.getElementById("btnSearch").value = "Search Headings";
							});
						
						});
					
					});
    </script>

 

Above, you can cee that when the DOM is loaded, we give focus to the form field. We capture the search button click and create a function that will load another page with the search term as a querystring parameter. The other page (categories_get.aspx) will process the search and return the response, which is then loaded into a div within the facebox. Here is how we create the response in categories_get.aspx.cs:

private void Page_Load(object sender, System.EventArgs e)
		{
			// Put user code to initialize the page here
			string strSearchText;
			strSearchText = Request.QueryString["term"].ToString();

			//gimmie my maker
			FSL.FSLFactory ddm = ((FSL.FSLFactory)Page.Application["MakerWeb"]);
			
			//create Website object
			FSL.UDWebSite objUDWebSite = (FSL.UDWebSite)ddm.Get(FSL.FSLObjectType.UDWebSite);

			//Navigation is empty
			string strHeadings = "";
				
			DataSet dsHeadings = FSL.UDWebSite.ViewHeadings(ddm, strSearchText);
			
			//check for rows in dataset before building content
			if(dsHeadings.Tables[0].Rows.Count > 0)
			{
				DataRow drHeadings = dsHeadings.Tables[0].Rows[0];
			
					
				//Build Navigation based on what is in datarow.
				for(int i = 0;i < dsHeadings.Tables[0].Rows.Count; i++)
				{
					drHeadings = dsHeadings.Tables[0].Rows[i];
					strHeadings = strHeadings + "<a class=\"category-link\" href=\"#\" onclick=\"fGoToParentWithHeading('" + drHeadings["Description"].ToString() + "');\">" + drHeadings["Description"].ToString() + "</a><br />";
				}
			}
			else
				strHeadings = "We're sorry, we could not find any matches for your search term. Please try again.";

			Response.ContentType = "text/plain";
			Response.Write(strHeadings);
			Response.End();
		}

 

If you look at the snippet above, you will see that we build each heading with an onclick event that will send the selected heading text to the parent form, and close the facebox with the following code being executed in the facebox:

function fGoToParentWithHeading(sHeading){
						document.frmCustomerService<% Response.Write(Request.QueryString["formName"]);%>.<% Response.Write(Request.QueryString["textField"]);%>.value = sHeading;
						$('#facebox').fadeOut(function() {
							$("#facebox_overlay").removeClass("facebox_overlayBG")
							$("#facebox_overlay").addClass("facebox_hide")
							$("#facebox_overlay").remove()
						})
					}

 

Pretty fun stuff right there.


This entry was posted in Tech and tagged , , , on by .