Quick Tip

Different MasterPage for Mobile and Desktop in ASP.NET

Now a days more people have been accessing the web on mobile devices as compared to desktops and creating mobile versions of websites have become a necessity. In ASP.NET Web Forms application we can switch between different mastre pages basis which device user is using to access the site. This gives a lot of advantages such as changing layout of the pages, applying different style sheets and even load different content if the need be. To achieve this im ASP.NET Web Forms application simply define a base page as following

Now rest of the pages (such as example below) can simply inherit base page and all those pages will have different master pages for mobile and desktop.

We can simply check for IsMobileDevice property to find out whether or not device is mobile. This option checks of most of the available mobile devices and return a result but the[…]

Quick Tip

Pass Values from One Page to Another

When we need to pass values from one page to another, two most common ways it is implemented is to either use a query string parameter and append the data to query string in the URL, or use a postback to post the data using form submission. Recently I was required to pass some values from one page to another page so I went ahead and did a quick query string implementation to pass the values which worked pretty well until I looked at the analytics data which reported same page with different query parameter as different URLs. I didn’t like it (neither did my SEO team) since the query string parameters did not change the functionality of the target page. It just happened to be some additional data for the target page so I decided to go for alternate options. Next option was to use session state but that data is stored on the server[…]

Quick Tip

Responsive Image Overlay over Another Image

I was working on a gaming site which would have two modes to play and a title for each game. I decided to display two options on the game logo itself and since the entire website was responsive, I needed to handle some responsive stuff which I wanted to share here. Bootstrap 4 was used for overall responsive behavior in the site and the additional CSS required to handle individual game title is as following

There are 3 overlay images divided equally in height. Top container is set to relative and overlay images sections are set to absolute taking 1/3 height each. See below for the working example Click here to check this on your system. Try changing the browser window size to see how it works. The complete code for this is as following

You can download example code here.

Quick Tip

Bundling and Minification in ASP.NET Web Forms Application

ASP.NET has in-built for bundling of multiple resources such as js or css files into one file and then minifiy the files to reduce the number of calls made to the server and total data size downloaded from the server thus reducing the total download time and enhanding application’s performance.  In order to use this in web forms application which target version .NET 4.5 and higher, following steps are required 1. Go to NuGet Package Manager and install Microsoft.AspNet.Web.Optimization and Microsoft.AspNet.Web.Optimization.WebForms packages 2. Check web.config to make sure “webopt” tag prefix is added (once you install Microsoft.AspNet.Web.Optimization.WebForms)

3. Add a class file as following and define the resources you want to bundle

4. Go to Global.asax file and register the bundles

5. In order to use these bundles simply use the statements as following CSS bundle

JS bundle

Read more about this @ Bundling and Minification Adding Bundling[…]

Quick Tip

Block libwww-perl attack in ASP.NET Application hosted in IIS

Libwww-perl (LWP) is a WWW client/server library for perl which can be used by hackers, spammers or automated bots to attack a website to steal information so we need to apply security to our web application to eliminate many simpler attacks on the website. In order to fix this issue in an ASP.NET web application we can use the following code. Add the code in Application_BeginRequest method of Global.asax file in your web application

Another option is to disallow Libwww-perl user agent in robots.txt

 

SEO Tip: Set Preferred URL in ASP.NET Application

Search engines treat website URL with and without “www” differently. Though both URLs point to the same destination, it’s important to pick one and set as your preferred URL so that search engines don’t two URLs as duplicate content. Websites use 301 redirect for this. The example code to redirect non-www URL to www URL in an ASP.NET application would be as following. Add following code snippet in Application_BeginRequest method of your Global.asax. Replace URL (somewebsite.com) with your website URL in the code and you are all set.

If you want to do the opposite and direct www URL to non-www URL simply change the code as following

It does not make a different to search engines which one (www or non-ww) do you prefer but you do need to pick one of the two URLs as your preferred URL to improve SEO ranking of your site.

Add SEO Friendly URL’s to ASP.NET Application

It’s very important for a web site to create SEO friendly URL’s and remove page extensions such as .aspx. When search engines look at a site, the first thing they analyze is the page URL which help them ascertain what the page content is about. In ASP.NET application Routes can be used for this which are URL patterns used for processing requests and can be used to construct URLs dynamically. The Global.asax file is a special file that contains event handlers for ASP.NET application lifecycle events. The route table is created during the Application Start event in Global.asax. In order to do so add Global Application Class (Global.asax) to your ASP.NET Web Application if it is not created yet. The following example shows how to add a route.

The marked line adds a route for default landing page of the web site so a website URL such as http://somewebsite.com/Default.aspx will be changed to http://somewebsite.com. Similarly http://somewebsite.com/SomePage.aspx[…]

Publish an ASP.NET website without roslyn folder

If you create a ASP.ENT website using Visual Studio 2015 or higher and .NET Framework 4.5.2, it by default uses Roslyn which is a set of open-source compilers and code analysis APIs for C# and Visual Basic. Publishing this would also include “roslyn” folder in bin directory containing a bunch of libraries and exe files which creates issues if you are using a shared hosting service as normally shared hosting do not run under full trust. We can simply remove this by going to Tools -> NuGet Package Manager -> Manager NuGet Packages for Solution -> Uninstall following packages Microsoft.CodeDom.Providers.DotNetCompilerPlatform Microsoft.Net.Compilers Check web.config and make sure the following section was removed by the NuGet package uninstall. If it did not get removed for any reason, then clean it up manually

Now publish your website and you won’t see roslyn folder inside bin directory anymore.