GOOSEdotNET @goosedotnet-blog - Tumblr Blog

HISTORICAL PAGE NAVIGATION IN SPOTFIRE

In Spotfire you have three methods of page navigation: Titled Tabs, Step-by-Step, and History Arrows. By editing your web.config file you are also able to remove page navigation entirely, this can provide a clean look but does require that you guide the users through your dashboard in another way. Generally buttons or links are used, and given an action to navigate to a particular page. Doing this will work just fine to replace Titled Tabs or Step-by-Step navigation, but if you want the user to be able to go back to their most recently visited pages (like the History Arrows), you will need to implement some scripting in your custom navigation.

I saw an example in the TIBCO community forums that showed how to navigate to the user’s most recently visited page here. This method worked great, but I wanted to be able to go back for the entirety of a user’s session. Here is how I tweaked it to work for me:

First create a Document Property (mine is called “LastPage") and set it as a string data type. The only way to know where the user has been is to save that location upon leaving. So even though we may have buttons that utilize Actions to navigate to other pages, we will have to change those to utilize scripting instead so that we can save the page, and THEN navigate to their destination. Here is the script for that button:

Document.Properties["LastPage"]+= ',' + Document.ActivePageReference.Id.ToString() Document.ActivePageReference=page

As you can see the script references a parameter “page", go ahead and create that in your button and set it to the page you wish to navigate to. What this script does is append the current page’s ID (Guid) to our comma delimited document property “LastPage". We append rather than set so that we can go back further than just one page. The script then navigates the user to the page you set in the “page" parameter. You can put these navigate buttons on several different pages, changing just the “page" parameter and your history will be saved as you navigate through the dashboard. Each page can also have a “Back" button, this is where we use what we have saved to navigate the user back through the history of their current session. Here is the script for our Back button:

from System import Guid lastPage = Document.Properties["LastPage"] myGuid=Guid(lastPage[lastPage.rfind(‘,’) + 1:]) page=Document.Pages.TryGetPage(myGuid) if page[0]: Document.Properties["LastPage"] = lastPage[:lastPage.rfind(‘,’)] Document.ActivePageReference=page[1]

This script gets a substring of our “LastPage" document property from the last comma to the end of the string (the full Guid of the last page visited). It then checks to see if the page exists in our document, and if so, it removes the Guid from our “LastPage" property and navigates to that last page. Now that the Guid has been removed, if you click Back again you will be taken to the page you visited before that one, and so on until no more are in the string. I only had the need for a Back button, but you can implement a very similar process for a Forward button if needed. You’ll just need to create a second document property to keep track of forward pages and save/remove them upon navigation. Hope this is helpful!

Enabling/Using Package Configurations (SSIS)

If you can accomplish all of your tasks with one SSIS package, I'm happy for you - but sometimes more than one is necessary. If you ever find yourself with multiple packages with similar properties (variables, connection managers, executables, etc.) it may be in your best interest to use a Package Configuration. This will save you some time down the road if you decide to create another package, or update properties of the existing ones. What a package configuration will allow you to do is make properties of the package external - saved as either an XML configuration file, environment variable, registry entry, or a few others. Once external, you can setup all or some of your packages to use the configuration - this way if changes need to be made, you can do so without having to update each and every package.

In this post I will be creating a XML package configuration that contains my connection managers. Recently I did some SSIS cleanup for a client; they had 25+ packages, all containing the same connections. I recreated their database schema locally for testing purposes and enabled a package configuration in each package. By doing so, I was able to update the connection strings in my configuration file to use my local databases and make changes to the packages as needed. Upon completion I could simply change the connection strings back and deliver back to the client. At the same time, if the client ever moved their data to a different location, they could follow the same steps without having to edit any of their packages.

The two connections I have are 'Duck' and 'Goose':

To create a configuration, select Package Configurations from the SSIS dropdown on your menu bar:

Check the box to enable package configurations, and click Add.

For configuration type, select 'XML Configuration File'. Make sure the radio button for 'Specify configuration settings directly' is selected and click Browse. Navigate to a common directory (I used C:\PackageConfigurations) and name your file 'Connections.dtsConfig', click Save.

When you click Next you will be brought to a screen where you can select what exactly will be included in your configuration. As I stated before we are just going to add our connection managers. Check the box for each of your connections (or expand to select only specific properties), and click Next.

Name your configuration, and click Finish. You've successfully created a configuration - your package is currently using it. So now let's say you have another package that contains Duck and Goose connections, how do we set it up to use our new package configuration? Open the package and again click SSIS > Package Configurations. Make sure the 'Enable Package Configurations' checkbox is checked, and click Add. Browse to your configuration file, and click Next. When you select an existing configuration you will be prompted to either reuse or overwrite the file, click 'Reuse Existing'. Click Finish, and then Close. Your package is now using the same configuration file - you can open the XML file in any editor and change the connection strings and it will be updated across all packages that use the configuration.

Keep in mind this can be used for variables and executables as well, making the configurations even more flexible!

Handling and Logging Errors in ASP.NET

At some point in development, we all have seen the infamous server error page.

While sometimes annoying, it is still generally helpful if you are debugging. That being said - this page should only be viewable by a developer; errors need to be handled much differently for users. First things first, you should always do your best to manage possible errors by wrapping your code in try-catch blocks. This leaves unexpected errors only - and we will handle them the best we can. Let’s start by redirecting the user to a better looking page. In your web.config file you can add a section titled customErrors - all of the available options are documented in this MSDN article, but we are just going to cover the basics in this post. Here is what to add to our web.config:

I have two attributes set here: defaultRedirect, and mode. defaultRedirect is the page we want to redirect the user to if they have encountered an unexpected error. Mode defines when we want this error handling to take place (more about this in the article above). “RemoteOnly" means that if I am running my site locally I will still see the server error page, but users viewing my site will be redirected to the new error page. This is generally what I have mine set at, however you may want to temporarily change it to “On" for testing purposes. Now if you start debugging and throw an uncaught error - your user will be redirected to GenericError.aspx, and it’s as easy as that! That being said, if you’re like me you might be thinking “well this is great and all, but it would be nice to know what errors I’m not catching…" - and that brings us to our next section - logging the errors.

The Global.asax file is an optional file that contains application-level and session-level event handlers, one of which is Application_Error (which we will get to in a second). If you create a website with Visual Studio it may have already created the Global.asax file for you, but if not you can add it: Solution Explorer > Add New Item > Global Application Class > Add. Here is what the Application_Error block should look like:

void Application_Error(object sender, EventArgs e) { //we are going to store the last exception for later use HttpContext.Current.Cache["LastException"] = HttpContext.Current.Server.GetLastError(); }

So now we have stored the error, and the user is redirected to the error page. On Page_Load for GenericError.aspx we have the following:

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { try { string stacktrace = ""; string message = ""; if (((Exception)Cache["LastException"]) != null) { stacktrace = ((Exception)Cache["LastException"]).StackTrace; message = ((Exception)Cache["LastException"]).Message; } // insert the error info into the database and return errorID int errorID = obj.LogError(SessionHandler.SessionVariables(), message, stacktrace); ViewState["errorID"] = errorID; } catch { // THE ERROR PAGE CAN'T HAVE AN ERROR!!!!!!!!!! ahhhhhhhhhhhhh // Seriously though, make sure you use try-catch blocks on this page. // if an error occurs on your error page your application will catch the error // and then try to redirect again... and again, and again, thus creating an // infinite loop. } } }

You may have noticed in the comments above that I am not only inserting the error information into the database, but also returning the corresponding errorID. You don’t have to do this, but I would like to give the user the option of submitting additional information about what they might have been doing when the error occurred - so I will need the errorID in order to update the database entry later. Here is what my error page looks like:

The user can enter more information in the textbox if they choose to, and when they click Report we will update the error to include their message.

protected void btnReport_Click(object sender, EventArgs e) { try { int errorID = (int)ViewState["errorID"]; obj.UpdateError(errorID, tbUserMessage.Text); } catch { // no errors } //then redirect Response.Redirect("Default.aspx"); }

You have successfully logged an error in your database! It’s up to you to decide how you receive this information - you can query the database, or you might choose to have the errors emailed to you as well. Regardless of what you choose, the point is that you are now informed of the errors occurring on your site, and you can promptly address the issues.

Detecting IE Compatibility View (C#)

Recently I was working on a project that required me to force the user into IE8 document mode, but ONLY if they were using IE9 compatibility view (CV). If you are unfamiliar with the method of forcing a particular document mode, you can read more about it in this MSDN article. It looks a little bit like this:

<![CDATA[ <head> <title>My Page</title> <meta http-equiv="X-UA-Compatible" content="IE=8" /> </head> ]]>

This meta tag is placed in the head section of your page and must be placed before all other elements (with the exception of the title element and other meta tags). This is a perfectly valid way to force IE8, however I needed to make sure this was only done for IE9 CV, and that brings me to the topic of this post.

Regardless of your reasons to detect CV in IE, here is how you can accomplish it...

Each version of IE can be told apart by its user agent string. I won't get into the details of the UA string as its history is lengthy, but you can read all about it here. The main elements that we need to look at are the Version token and the Trident token. Below are the tokens that you will find in each browser:

VERSION TRIDENT IE9 Standard MSIE 9.0 Trident/5.0 IE9 CV MSIE 7.0 Trident/5.0 IE8 Standard MSIE 8.0 Trident/4.0 IE8 CV MSIE 7.0 Trident/4.0 IE7 MSIE 7.0 No Trident token IE6 MSIE 6.0 No Trident token

As you can see, each browser has a unique combination of these two tokens. We can use this knowledge to now create a function that will tell us what browser mode is in use. My function is shown below:

<![CDATA[ private string GetIEBrowserMode() { string mode = ""; string userAgent = Request.UserAgent; //entire UA string string browser = Request.Browser.Type; //Browser name and Major Version # if (userAgent.Contains("Trident/5.0")) //IE9 has this token { if (browser == "IE7") { mode = "IE9 Compatibility View"; } else { mode = "IE9 Standard"; } } else if (userAgent.Contains("Trident/4.0")) //IE8 has this token { if (browser == "IE7") { mode = "IE8 Compatibility View"; } else { mode = "IE8 Standard"; } } else if (!userAgent.Contains("Trident")) //Earlier versions of IE do not contain the Trident token { mode = browser; } return mode; } ]]>

Pretty simple once you know what to look for. The last step for my requirements was to force the browser into IE8 document mode if the user was using IE9 CV.

<![CDATA[ protected void Page_Load(object sender, EventArgs e) { if (GetIEBrowserMode() == "IE9 Compatibility View") { HtmlMeta force = new HtmlMeta(); force.HttpEquiv = "X-UA-Compatible"; force.Content = "IE=8"; Header.Controls.AddAt(0, force); } } ]]>

This snippet is very straightforward. We are creating a new meta tag with the necessary attributes, and we are adding it to the header of our page at an index of 0 because it needs to be among the first header elements. Now run your page! If you'd like to test the results, a good way to do so is to open IE Developer Tools (F12) and at the top there will be a drop down titled "Browser Mode". Add a label to your page that shows the result of GetIEBrowserMode() and you can easily switch between the different browser modes with an accurate detection.

Lastly, IE10 is on the horizon and will contain different tokens in its UA string as well. The IE10 Trident token is now Trident/6.0, and compatibility mode for IE10 will still map to IE7 standards. It might be a good idea to add this to your function as it will be in use soon. Below are a few very helpful links on UA strings (IE in particular).

MSDN Library: Understanding User-Agent Strings

IEBlog: Changes in UA string between IE versions - IE7, IE8, IE9, and IE10

#c #ie #internet explorer #compatibility view #detect #useragent #trident #version

Implementing a Paging Repeater

In this post we are going to talk about repeaters, but more specifically implementing paging to repeaters. Repeaters are a convenient way to display a list of data, while allowing for custom layout/formatting/styling of that list. We will use one of my current projects as an example. In the site there several posts, or articles, written by many different users. When a user searches for posts or clicks on a specific category, we want to show them a list of all the posts that are retrieved. Using a repeater you can show a formatted list of all the posts, but this can become a problem if you have a large number of posts available. This is where paging comes in – we want to maintain our dataset but only show a few records at a time, so we don’t overwhelm the user or implement a page that takes forever to load. Let’s start by first writing the markup for our repeater. A repeater can have up to 5 different templates defined, which you can read more about in this MSDN article. In this post we are only going to implement the ItemTemplate. Below is the basic markup for my repeater, as well as a label to display the current page, and prev/next buttons.

<![CDATA[ <asp:Repeater ID="rptPosts" runat="server" OnItemDataBound="rptPosts_OnItemDataBound" > <ItemTemplate> <table> <tr> <td> <asp:HyperLink ID="postTitle" runat="server"></asp:HyperLink> <br /> <br /> <asp:Label ID="moreInfo" runat="server" CssClass="moreInfo"></asp:Label> </td> <td> <a id="lnkUserPhoto" runat="server"><img id="userPhoto" runat="server" /></a> <div ><asp:HyperLink ID="lnkUser" runat="server"></asp:HyperLink></div> </td> </tr> </table> </ItemTemplate> </asp:Repeater> <br /> <br /> <div style="text-align:center;"> <asp:Label ID="lblCurrentPage" runat="server"></asp:Label> <br /> <asp:Button ID="btnPrev" runat="server" Text=" << " OnClick="btnPrev_Click" /> <asp:Button ID="btnNext" runat="server" Text=" >> " OnClick="btnNext_Click" /> </div> ]]>

Next we’ll need to bind the repeater to our data. This is where we are going to implement paging, by using a PagedDataSource. Think of it just the same way you would any other data source, but with the ability to separate your data (into pages). Below is part of the code-behind for my page; I am going to bind the data initially (not postback). I have also included a public int to more easily reference the current page of my data.

<![CDATA[ //The Current Page of the Data Source public int PostListCurrentPage { get { if (ViewState["_currentPage"] == null) { return 0; } else { return (int)ViewState["_currentPage"]; } } set { ViewState["_currentPage"] = value; } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GetPosts(); } } private void GetPosts() { //get data DataTable postData = SelectAllPosts(); PagedDataSource pds = new PagedDataSource(); pds.DataSource = postData.DefaultView; DataView view = postData.DefaultView; //allow paging, set page size, and current page pds.AllowPaging = true; pds.PageSize = 3; pds.CurrentPageIndex = PostListCurrentPage; //show # of current page in label lblCurrentPage.Text = (PostListCurrentPage + 1).ToString() + " of " + pds.PageCount.ToString(); //disable prev/next buttons on the first/last pages btnPrev.Enabled = !pds.IsFirstPage; btnNext.Enabled = !pds.IsLastPage; //bind data rptPosts.DataSource = pds; rptPosts.DataBind(); } ]]>

Now we need to make sure that our data is linked to the proper controls, this is where OnItemDataBound comes into play:

<![CDATA[ protected void rptPosts_OnItemDataBound(object sender, RepeaterItemEventArgs e) { //find each control in the ItemTemplate HyperLink title = (HyperLink)e.Item.FindControl("storyTitle"); HyperLink lnkUser = (HyperLink)e.Item.FindControl("lnkUser"); Label moreInfo = (Label)e.Item.FindControl("moreInfo"); HtmlAnchor lnkUserPhoto = (HtmlAnchor)e.Item.FindControl("lnkUserPhoto"); HtmlImage userPhoto = (HtmlImage)e.Item.FindControl("userPhoto"); //define DataRowView DataRowView drv = e.Item.DataItem as DataRowView; //link up all controls w/ their data title.Text = drv.Row["Title"].ToString(); title.NavigateUrl = "Story.aspx?id=" + drv.Row["StoryID"].ToString(); lnkUser.Text = drv.Row["Username"].ToString(); lnkUser.NavigateUrl = "Profile.aspx?id=" + drv.Row["UserID"].ToString(); lnkUserPhoto.HRef = "Profile.aspx?id=" + drv.Row["UserID"].ToString(); userPhoto.Src = GetAvatarPath(drv.Row["UserID"].ToString()); moreInfo.Text = ((DateTime)(drv.Row["Date"])).ToShortDateString() + " | (" + drv.Row["numComments"].ToString() + ") comments"; moreInfo.Text += " | (" + drv.Row["numFavorites"].ToString() + ") favorites"; } ]]>

In your OnItemDataBound event you’ll have to keep in mind that your repeater items, well… repeat. Because of this, you won’t be able to reference them directly by ID and instead must use FindControl as I’ve shown above. Most of the references above are only relevant to my data, but you get the point as to what you need to do here.

Now, the only thing left to do is add the click events for our previous/next buttons:

<![CDATA[ protected void btnPrev_Click(object sender, System.EventArgs e) { PostListCurrentPage--; GetPosts(); } protected void btnNext_Click(object sender, System.EventArgs e) { PostListCurrentPage++; GetPosts(); } ]]>

Now we have our completed repeater! You can change the formatting/styling however you’d like. Here is a finished screenshot of my example:

#asp.net #repeater #pageddatasource #paging #c

Show/hide Default Text When Textbox Focus Changes

There are plenty of sites that have forms, or some type of input fields that have default text. Take Twitter for example, they have a textbox that says "Compose new Tweet..." - when you click in the textbox that text will disappear, but it will also come back if you leave the textbox without typing anything. This is a great way to clean up the design of your site, as you don't have to include labels letting everyone know what each input field is for ("Name: |____|").

As you may or may not already know, making client-side changes like this is possible using javascript. Our basic task is to hide the default text when our textbox gains focus, and show it again if the textbox loses focus (and the textbox is empty). In my experience, focus is one of the things that seems to be handled different in every browser, so it is for this reason I will be using jQuery in my example. Let's first look at my markup:

<![CDATA[ <input type="text" name="txtName" id="txtName" /> <span id="spnName">Name</span> ]]>

All I have here is an input textbox called txtName, and a span called spnName. I've removed styling for the sake of this post, but basically txtName has a transparent background, and spnName has a lower z-index value than txtName so that it is visible through the textbox, but doesn't obstruct the click focus. Here is what my "Name" textbox looks like:

Now all that's left to do is add our focus function to txtName. This is where jQuery's "focusin" and "focusout" methods come in handy.

<![CDATA[ //on document ready $(document).ready(function() { //when the textbox gains focus $('#txtName').focusin(function() { $('#spnName').hide(); }); //when the textbox loses focus $('#txtName').focusout(function() { if ($('#txtName').val() == '') { //only show again if the user didn't type anything $('#spnName').show(); } }); }); ]]>

And you're done! Now when you click or tab to the textbox, the default text will be removed as shown below:

#jQuery #textbox #input #focus #default

Manipulate User-Input Into Proper Filename String

In one of my sites, I have a File Upload page where users can upload images, audio, video, etc. They are required to enter at least a title, filename, and description. So the page looks a little bit like this:

When it comes to allowing file upload though, you need to make sure that all goes smoothly with saving the file - and the filename is something that could cause an issue. In order to prevent funky user-input for the filename, I decided to instead just modify their given title. First I made the Filename textbox read-only so that it could not be changed by the user. Next I added an javascript onkeyup event to the Title textbox called "generateSaveAs()" - this will be the function that ultimately gives us our filename. Here is what generateSaveAs() looks like:

<![CDATA[ function generateSaveAs() { var title = $('.txtTitle').val(); title = title.replace(/[^a-z0-9\s]/gi, '').replace(/[\s]/g, '_'); $('.txtSaveAs').val(title); } ]]>

Our function first obtains the value of the Title textbox and then removes special characters based on a RegEx. It also replaces spaces with underscores. It then takes the updated value and inserts it into our Filename textbox. So now as I type into my Title textbox, a well constructed filename is automatically produced for me. Here is a screenshot of an example result:

#.net #javascript #filename #upload #regex

Strongly-typed Session Data

There are several methods of state management in ASP.NET: ViewState, Session, and Cookies to name a few. For a more complete list of options check out this MSDN article. The method I am going to focus most on today is Session State. Session is a very simple, and secure way to manage state within your web pages. To demonstrate how session works, I've created two pages. The first page has a textbox and button as shown below:

<![CDATA[ <asp:TextBox ID="txtSet" runat="server" Width="200px"> <asp:Button ID="btnSave" runat="server" Text="Save and Redirect" OnClick="btnSave_Click" /> ]]>

The code behind for our button is shown below, we set our "MyString" session value and redirect to our second page.

<![CDATA[ protected void btnSave_Click(object sender, EventArgs e) { Session["MyString"] = txtSet.Text; Response.Redirect("SessionState2.aspx"); } ]]>

Our second page contains a label, and on the page_load event we set the label text to equal the "MyString" session value.

As you can see - here is where we encounter our first problem. If you've never used session before you might think it should work just fine this way, but the problem is that lblText.Text requires a string value, and since session is weakly typed we need to cast it to a string in order to use it here. Meaning you should have something more like this:

<![CDATA[ protected void Page_Load(object sender, EventArgs e) { lblText.Text = Session["MyString"].ToString(); } ]]>

If you don't mind doing this everytime you reference a session value, that's fine (you won't encounter any problems) BUT it will begin to get a little messy the more you rely on session. To help clean up your code and make referencing values easier, you can implement a strongly typed session handler. This comes in the form of a static class filled with static properties. If we want to refactor our current example, our session handler will look like the following:

<![CDATA[ public class SessionHandler { public static string MyString { get { return HttpContext.Current.Session["MyString"] == null ? "" : HttpContext.Current.Session["MyString"].ToString(); } set { HttpContext.Current.Session["MyString"] = value; } } } ]]>

Here we can get/set our session values, while casting them to the proper type AND checking for null values. So really we are fixing a few potential issues all in one place. Now going back to our first page, we can update the button code-behind to look like this:

<![CDATA[ protected void btnSave_Click(object sender, EventArgs e) { SessionHandler.MyString = txtSet.Text; Response.Redirect("SessionState2.aspx"); } ]]>

The code-behind for our second page can be update to look like this:

<![CDATA[ protected void Page_Load(object sender, EventArgs e) { lblText.Text = SessionHandler.MyString; } ]]>

You can already see how it has cleaned up our small amount of code, you can imagine how this will help with a larger code base. Now you are able to get and set a value without casting, and I almost forgot to mention you no longer have to try remembering what you named your session values :)

Adding Delimiters to a String Using a While Loop

Recently a project I was working on required me to add delimiters to a string - with a few conditions:

The string needs to be separated into chunks (lines).

Each line can have a maximum of 40 characters.

The lines need to break between words (not in the middle of a word).

Must break after the space, so that the next line doesn't start with a space.

Delimiters will be a pipe character "|", and the end of the string will have a double-pipe "||".

When I first looked at this I thought "well, obviously I need to use a loop". What makes this a little tricky is that the length of the string is variable, and so is the length of each line (since we have to break between words), so in order to loop without knowing exactly how many times, I used a while loop. To be honest, until now I have never used a while loop as I was always able to accomplish what I needed to by just using a for/foreach loop. The basic logic of our function is to start with a string, and WHILE that string contains at least 40 characters keep pulling out formatted chunks into another string and return.

Here is what my function looks like:

<![CDATA[ private string AddDelimiters(string myString) { string temp = ""; string formatted = ""; while (myString.Length > 40) { //get first 40 characters temp = myString.Substring(0, 40); //break at last space, or at 40 chars if space doesn't exist (unlikely) temp = temp.Substring(0, (temp.LastIndexOf(" ") == -1 ? 40 : temp.LastIndexOf(" ") + 1)); //add portion to formatted and add pipe formatted += temp + "|"; //take the first portion out of myString and repeat myString = myString.Substring(myString.IndexOf(temp) + temp.Length, myString.Length - myString.IndexOf(temp) - temp.Length); } //add what ever is remaining of myString and add double pipe formatted += myString + "||"; return formatted; } ]]>

So when we test out our function with the string: Hello, world. Here is my very long string that I want to have separated. Random words that mean nothing, just taking up lots of space. The end. we are given a result of: Hello, world. Here is my very long |string that I want to have separated. |Random words that mean nothing, just |taking up lots of space. The end.|| Ta-da!

Add a Character Counter to a TextArea using jQuery

I'm sure at some point in your web-surfing life you've encountered a textbox with a character counter, letting you know how many more characters you have available. Twitter, for example has one of these implemented for tweets (although, with a much smaller limit than most). This is actually very easy to implement with either javascript or jQuery, in my example we will use jQuery.

First, let's take a look at our markup. All we need to include for this example is a textarea and somewhere to display the character count (in this case a div).

<![CDATA[ <body onload="CountChars(500, myTextbox, divCount);"> <textarea id="myTextbox" rows="10" cols="55" onkeyup="CountChars(500, myTextbox, divCount);"></textarea> <div id="divCount"></div> </body> ]]>

You'll notice that I've added some events as well. There are two scenarios in which we will need to update our character count: whenever the user types into the textarea, and in the body 'onload' event (if there is a possibility of text existing in the textarea on page load). My function is called CountChars() and as you can see it accepts three parameters. Let's look at the function to see what each of these are for.

<![CDATA[ function CountChars(max, text, counter) { var div = $(counter); var textarea = $(text); var count = max - textarea.val().length; div.text(count + ' characters left'); if (count < 0) { div.css('color', 'red'); } else { div.css('color', 'black'); } } ]]>

The first parameter (max), is the maximum number of characters you are going to allow for your textarea. The second parameter (text), is the textarea in which you will be counting characters. Lastly, counter is the div where we are going to display the character count. This function is very straightforward, first we define variables to simplify references throughout the function. The "count" variable is our max value less the number of characters in the textarea. Once we determine that, we can display the text in our div. The last part I've added checks to see if the remaining characters is less than 0, if it is I'll change the font color of our div to red so the user knows that they have gone over the limit. Here are a few screenshots of what my textbox looks like:

Pretty easy, right? The reason my function contains the parameters it does, is because I reuse it in several places and I may need to set different max values/textareas/divs. If you are only using this in one place you may be able to change what data, if any, you pass to your function. Enjoy! :)

#jQuery #character #counter #textarea

CSS - Div background cut off when scrolling horizontally

Today's post is a simple one, an issue many of us have probably encountered that is quite a pain at first, but easily fixed. If you have a div with a set width (or implied width) of 100%, it should display nicely across the entire window, which it does. If you make your browser window smaller, to the point where horizontal scrolling is necessary, however, you will notice that your div background is cut off when you scroll. The reason for this is that 100% is referring only to the viewport, and not to all of your content. An easy fix for this is to implement the min-width style property to your div. If your content is say, 1000 pixels wide, then you can set the style of your div to:

<![CDATA[ <div style="min-width:1000px;"></div> ]]>

This will ensure that your div width maintains at least that width, preventing any image cut off. Also since it is min-width (not just "width") the div will still extend to a wider viewport with no problems!

Enum Basics: What is an Enum and How do I use it?

In C# an enum is basically a list of named constants. You will find it most useful when you are using data that contains some sort of integer identifier. For example, say you have a data table Users, that contains three columns:

Username

Status

Now let's say that in our Status column rather than using strings, we use integers to keep track of a user's account status. For example:

0 = Inactive

1 = Active

2 = Pending

3 = Flagged

Since we know these values are most likely going to remain constant, we can use an enum to make it easier for us to reference them. By default, the first item in an enum has a value of 0 unless specified otherwise. All other items will have a value that is 1 greater than the previous item.

<![CDATA[ enum Status { Inactive, Active, Pending, Flagged } ]]>

In the example above, our items have the values 0, 1, 2, and 3 respectively.

<![CDATA[ enum Status { Inactive = 1, Active, Pending = 20, Flagged } ]]>

In the second example, our items have the values 1, 2, 20, and 21. We gave Inactive a value of 1 (rather than the default, 0) and because of that Active now has a value of 2. Similarly for the next two items, we gave Pending a value of 20, so Flagged will have a value of 21.

Since we know our data values are 0, 1, 2, and 3, we don't have to explicitly assign values to our enum items. Below is a completed example on how you can make use of your enum.

<![CDATA[ public enum Status { Inactive, Active, Pending, Flagged } public void AttemptLogin(User user) { switch (user.Status) { case (int)Status.Active: LoginUser(); break; case (int)Status.Inactive: LoginFailed(); break; case (int)Status.Pending: ShowActivationInstructions(); break; case (int)Status.Flagged: LoginUserWithWarning(); break; } } ]]>

Rather than needing to know what each integer means, your enum makes things much easier by allowing you to reference each status by name.

Raising an Event from a User Control

User controls are a great way to implement reusable chunks of code across your project. If you consider using them, know that you can do basically anything within a user control that you could do with any other control - this includes raising events.

Let's first start by making our user control (SomeUserControl.ascx). For this example all we are going to add to our control is a button (myButton). So far, what you have should look like this:

<![CDATA[ <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SomeUserControl.ascx.cs" Inherits="SomeUserControl" %> <asp:Button ID="myButton" runat="server" Text="Update" Height="70px" onclick="myButton_Click" Width="185px" /> ]]>

Now lets add the user control to our page, along with a textbox. Here is what the markup for my page looks like:

<![CDATA[ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <%@ Register Src="SomeUserControl.ascx" tagname="SomeUserControl" tagprefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <uc1:SomeUserControl ID="userControl" runat="server" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </form> </body> </html> ]]>

Now to create and raise the event. When the user clicks the button in the user control, we are going to update the textbox on our page with the current time. First we need to define a public EventHandler in the control, like so:

<![CDATA[ public event EventHandler Update; ]]>

Then we need to raise the event upon clicking myButton:

<![CDATA[ protected void myButton_Click(object sender, EventArgs e) { RaiseMyEvent(); } private void RaiseMyEvent() { if (this.Update != null) { this.Update(new object(), new EventArgs()); } } ]]>

Easy enough, right? The last thing to do is capture the event on our page so that we know to update our textbox. In our main page on Page_Load we now have access to the EventHandler and we can assign it another handler in the main page. Inside of that handler we are going to update our textbox.

<![CDATA[ protected void Page_Load(object sender, EventArgs e) { userControl.Update += new EventHandler(userControl_Update); } protected void userControl_Update(object sender, EventArgs e) { TextBox1.Text = DateTime.Now.ToString(); } ]]>

There you have it. Run your project and you can see that you are able to successfully update your page from your user control.

Embed Video by URL / Web Scraping (C#)

I'm sure most if not all of you are on Facebook. You'll notice that when you copy a url into your status, Facebook is able to generate an image/video/link based on that url and post it in your status. This can be achieved by a method known as data/web scraping. Scraping is basically extraction of data from another page - as long as you have access to the markup, you can scrape it. There are tools out there that make this easy, one of the most popular being the HtmlAgilityPack. This tool allows you to parse an HTML page into nodes similar to XML, and while that opens the door to many possibilities we are only going to use part of it in this post. With that being said, let's get started.

First, create a new website project. Download the HtmlAgilityPack and add a reference to the dll in your project. Next, create a new class called OutputVideo.cs and in this class create a Get() function that accepts a string (for the URL). So far what you have should look like this:

<![CDATA[ public class OutputVideo { public static string Get(string url) { } } ]]>

Now when it comes to video, we are fortunate that many sites use Facebook's OpenGraph feature. OpenGraph (OG) is basically a series of meta tags containing information about the content of a page. In the function we are about to create, we are going to use mainly OG and then add support for a few other sites without OG. Let's begin by supporting the sites that use OG. From here on out, all the code we write will be inside of our Get() function.

We'll start off by creating a new HtmlDocument, load in the desired URL and loop through the meta tags to find the OG specific ones.

<![CDATA[ string output; HtmlWeb web = new HtmlWeb(); HtmlDocument doc = web.Load(url); Dictionary<string, string> openGraph = new Dictionary<string, string>(); foreach (HtmlNode meta in doc.DocumentNode.SelectNodes("//meta")) { var property = meta.Attributes["property"]; var content = meta.Attributes["content"]; if (property != null && property.Value.StartsWith("og:")) { openGraph[property.Value] = content != null ? content.Value : String.Empty; } } ]]>

The next step is to retrieve the video from the page and use the source to create an embed tag that we can use. Most pages that use OpenGraph (and contain a video) will include an og:video meta tag that contains the source of the video file. This makes our job very easy, as we can just look for that tag and plug it in to our embed code.

<![CDATA[ if (openGraph.ContainsKey("og:video")) { // Get the MIME Type string mime; if (!openGraph.TryGetValue("og:video:type", out mime)) { mime = "application/x-shockwave-flash"; } // Build the embed tag (our output) output = String.Format("<embed src=\"{0}\" type=\"{1}\" width=\"{2}\" height=\"{3}\" />", openGraph["og:video"], mime, "600", "400"); } ]]>

All is well as long as this tag exists, but what if it doesn't? There are a few popular video hosting sites that do not use the og:video meta tag, so I looked for ways that I could support those sites also.

Almost all YouTube videos have the og:video tag, but some of them don't - these are generally the ones that say they don't allow embedding. Here is an addition to our if statement that will cover most of them:

<![CDATA[ else { //Alternative - for vids without og:video if (openGraph.ContainsKey("og:site_name") && openGraph.ContainsKey("og:url")) { //YouTube - alternative if (openGraph["og:site_name"].ToLower() == "youtube") { string prefix = "http://www.youtube.com/v/"; string suffix = "?version=3&autohide=1"; Uri uri = new Uri(openGraph["og:url"].ToString()); string uriQuery = uri.Query; string YouTubeID = HttpUtility.ParseQueryString(uriQuery).Get("v"); string resolved = prefix + YouTubeID + suffix; output = String.Format("<embed src=\"{0}\" type=\"{1}\" width=\"{2}\" height=\"{3}\" />", resolved, "application/x-shockwave-flash", "600", "400"); } ]]>

In the example above, I've taken the prefix/suffix of a working YouTube link and determined the video ID by the query string parameter "v". Concatenate these and you have a resolved link which you can input into your embed tag. Next example is Photobucket, and we are basically doing the same thing - we know what format our url needs to be in, so we are stripping out the variables we need and creating a usable src string for our embed tag.

<![CDATA[ //Photobucket else if (openGraph["og:site_name"].ToLower() == "photobucket") { string src = "http://static.photobucket.com/player.swf"; Uri uri = new Uri(openGraph["og:url"].ToString()); string uriQuery = uri.Query; string videoID = HttpUtility.ParseQueryString(uriQuery).Get("current"); string preUrl = openGraph["og:url"].ToString().Substring(0, openGraph["og:url"].ToString().LastIndexOf("/") + 1); string vars = "file=" + preUrl + videoID; output = String.Format("<embed src=\"{0}\" type=\"{1}\" width=\"{2}\" height=\"{3}\" flashvars=\"{4}\" />", src, "application/x-shockwave-flash", "600", "400", vars); } ]]>

The last supported type I have is DailyMotion, which doesn't allow direct embedding of videos. A workaround to this one is to use an iframe. Demonstrated below:

<![CDATA[ //DailyMotion else if (openGraph["og:site_name"].ToLower() == "dailymotion") { //just need to convert URL to embed URL string src = openGraph["og:url"].ToString().Replace("/video/", "/embed/video/"); output = String.Format("<iframe frameborder='0' width='600' height='400' src='{0}'></iframe>", src); } ]]>

With this function you can allow users to embed videos from the most popular video hosting sites. More importantly you are seeing ways that you can make it work for all sites. Say you want to scrape all img tags, or all embed tags - now you know how to do it, and if anything you can provide the option (like facebook does) to scroll through each scraped element and let the user choose the one they want to use.

Below is the full OutputVideo class that we've written, hopefully it will be a good starting point for integrating video embedding / web scraping into your project!

<![CDATA[ public class OutputVideo { //CURRENTLY SUPPORTED VIDEO TYPES - Others may work, but these are guaranteed // 1. YouTube // 2. Vimeo // 3. Myspace Video // 4. Photobucket // 5. DailyMotion // Sites that utilize Facebook's OpenGraph video feature. public static string Get(string url) { string output = ""; var doc = new HtmlAgilityPack.HtmlDocument(); string output; HtmlWeb web = new HtmlWeb(); HtmlDocument doc = web.Load(url); Dictionary<string, string> openGraph = new Dictionary<string, string>(); foreach (HtmlNode meta in doc.DocumentNode.SelectNodes("//meta")) { var property = meta.Attributes["property"]; var content = meta.Attributes["content"]; if (property != null && property.Value.StartsWith("og:")) { openGraph[property.Value] = content != null ? content.Value : String.Empty; } } // Supported by: YouTube, Vimeo, CollegeHumor, etc if (openGraph.ContainsKey("og:video")) { // Get the MIME Type string mime; if (!openGraph.TryGetValue("og:video:type", out mime)) { mime = "application/x-shockwave-flash"; // should error } // Build the embed tag (our output) output = String.Format("<embed src=\"{0}\" type=\"{1}\" width=\"{2}\" height=\"{3}\" />", openGraph["og:video"], mime, "600", "400"); } else { //Alternative - for vids without og:video if (openGraph.ContainsKey("og:site_name") && openGraph.ContainsKey("og:url")) { //YouTube - alternative if (openGraph["og:site_name"].ToLower() == "youtube") { string prefix = "http://www.youtube.com/v/"; string suffix = "?version=3&autohide=1"; Uri uri = new Uri(openGraph["og:url"].ToString()); string uriQuery = uri.Query; string YouTubeID = HttpUtility.ParseQueryString(uriQuery).Get("v"); string resolved = prefix + YouTubeID + suffix; output = String.Format("<embed src=\"{0}\" type=\"{1}\" width=\"{2}\" height=\"{3}\" />", resolved, "application/x-shockwave-flash", "600", "400"); } //Photobucket else if (openGraph["og:site_name"].ToLower() == "photobucket") { string src = "http://static.photobucket.com/player.swf"; Uri uri = new Uri(openGraph["og:url"].ToString()); string uriQuery = uri.Query; string videoID = HttpUtility.ParseQueryString(uriQuery).Get("current"); string preUrl = openGraph["og:url"].ToString().Substring(0, openGraph["og:url"].ToString().LastIndexOf("/") + 1); string vars = "file=" + preUrl + videoID; output = String.Format("<embed src=\"{0}\" type=\"{1}\" width=\"{2}\" height=\"{3}\" flashvars=\"{4}\" />", src, "application/x-shockwave-flash", "600", "400", vars); } //DailyMotion else if (openGraph["og:site_name"].ToLower() == "dailymotion") { //just need to convert URL to embed URL string src = openGraph["og:url"].ToString().Replace("/video/", "/embed/video/"); output = String.Format("<iframe frameborder='0' width='600' height='400' src='{0}'></iframe>", src); } } // Else - you can try to scrape other objects from the page } return output; } } ]]>

Trending Blogs

Recently Viewed Blogs

GOOSEdotNET