Using jQuery Mobile in ASP.NET MVC

This article is from our ASP.NET MVC 101 Tutorial Series

ASP.NET MVC 4 introduced a Mobile Site template that leverages the jQuery Mobile to serve up views tailored for consumption on Mobile devices. Even though the latest ASP.NET site templates have responsive CSS, the mobile views aren’t particularly suited for data intensive views. It would be better if we had views dedicated to handle smaller mobile screens and be mindful of touch based navigation.

You can either create a brand new site specifically targeted for Mobile (if you are starting a green-field project) or you can add Mobile views to an existing MVC project with advanced features like view switching between Mobile and Desktop views.

Today, we are going to look at building a Mobile site ground up, so we’ll start with the mobile site template in Visual Studio

Using AngularJS Modules and Services Feature in an ASP.NET MVC application

In our previous post, Hello AngularJS – Building a Tweet Reader we saw how to create a simple ASP.NET MVC application using AngularJS. We saw how the $scope and $http objects were injected in our app by Angular. We also saw how to do Templating and DataBinding. Today we will learn a few more constructs like the Modules and Services.

As with our demos we’ll walk with a code sample to see how the AngularJS features are used.

The Sample AngularJS Application - Recap

We’ll continue where we left off with the previous ASP.NET MVC sample where we built a Twitter reader.

The ASP.NET MVC Controller

To quickly recap, we have an ASP.NET MVC application with an MVC Controller. The controller has the Index action method. Here the LinqToTwitter framework first checks if user is Authenticated, if not, it redirects to Twitter and gets user to Authenticate.

Reading a Local File using HTML5 and JavaScript

One area where the web has lacked for some time is the lack of a true file system.  HTML5 fills this void by providing a standard way of interacting with local files using the FIle API specification.

These APIs are used to read file locally, handling images etc. Some of the specifications are as listed below:

1. File: Provides read-only information about the file like name, filesize, mimetype etc.

2. FileList: Represents an array of individually selected files from the local system

3. Blob: Represents the raw binary data and allows access to range of bytes within the data which can be used for slicing file

4. FileReader: Provides methods to read data from file or Blob

Task based WCF Services in .NET 4.5

Task based asynchronous programming is now simplified and streamlined in .NET 4.5 through the use of keywords ‘await’ and ‘async’. These keywords help makes asynchronous code look similar to synchronous coding, making it easier to write and understand Asynchronous code. Those who have used WCF service might have used the Asynchronous contract generation while adding WCF service reference in the Client application. The Asynchronous contracts are required so that client can make an Asynchronous call to WCF service performing time consuming operations.

In Visual Studio 2012 and WCF 4.5, there is a new option available to generate Task based operations so that the code from the client side can be then less complex. In the following example we will see how to implement it.

Sample Application

Step 1: Open VS2012 and create a blank solution, name it as ‘WCF_Task_Based_WCFService’. In this solution add a new WCF Service Application project targeting .NET 4.5 Framework. Name this project as ‘WCF_TaskBasedService’. Rename IService1.cs to IService.cs and Service1.svc to Service.svc.

Using LogParser to Find Most Frequently Accessed Pages of an ASP.NET Website

Log parser is a powerful, versatile tool that a SQL-like query language to access a wide variety of text-based data sources such as log files, XML files and CSV files, as well as the Event Log, the Registry, binary files, and Active Directory. You can download LogParser here. The installer also contains samples and documentation about the different commands of Log Parser.

In this short article, we will use LogParser to parse the log file generated by IIS to find 10 most frequently accessed resource on your website. Once we have this information, we can fine tune these pages/resources to increase the overall performance of the site. The log file I am using here is from a live website and contains 3 days of data.

Step 1: Assuming your log file exists on your local machine, create an empty query file which will contain commands to access data from this log file. In this example, the query file is called top10.sql and the log file is called dnc.log. Both these files have been kept in the D: Drive of my machine.

C# : Cannot implement an interface member because it is not public

If you've written a class that has implemented an interface, you've probably encountered a requirement where a method you are implementing, must be public. The error thrown is usually “Cannot implement an interface member because it is not public”.

If an interface member method is implemented in your class without an access modifier, it is by default private.

But methods have to be either public so that they can be called through the interface, or they need to be explicit. Let us assume your interface is implemented as follows:

public interface ITest 
{
bool IsTest();
}

To change the visibility, you can either change the interface from public to internal.

Remove Vertical Scrollbars in SyntaxHighlighter

SyntaxHighlighter created by Alex Gorbatchev is a code syntax highlighter developed in JavaScript. It basically makes your code snippets beautiful.

Many a times even when not required, a vertical scroll gets added to your code as shown here:

syntax-highlighter-scroll

The scroll appears in some browsers (especially Chrome) as the default style set in shCoreDefault.css is overflow: auto. If you do not want a vertical scrollbar, you can always do this:

ASP.NET Project Image Paths

I still see a lot of developers getting confused with the image paths in an ASP.NET application.

Here’s a very quick primer to help you with it:

Absolute Path

<img src="http://www.yourxyxwebsite.com/Images/SomeImage.jpg" />

Images folder in site root directory ("/")

<img src="/Images/SomeImage.jpg" />

Images folder in the current directory ("./")

<img src="./Images/SomeImage.jpg" />

./image.jpg and image.jpg are the same and refer to the current directory