Overview

The application we’re building simply display server files as window explorer, and you can select folders or files to download.

Double click a folder, will list all sub-folders and files.

You can tick the checkbox to download folder and files you want.

1. Create ASP.Net MVC project

It’s not the focus of this article. We go through very quickly. We’ll start by selecting “New Project” from the File menu in Visual Web Developer. This brings up the New Project dialog. We’ll select the Visual C# -> Web Templates group on the left, then choose the “ASP.NET MVC 3 Empty Web Application” template. Name your project ServerExplorer and press the OK button.

This will create our project. The project includes folders: Content, Models, Controllers, and Views.

ASP.NET MVC makes use of some basic naming conventions for folder.

/Controllers

Controllers respond to input from the browser, decide what to do with it, and return response to the user.

/Views

Views hold our UI templates

/Models

Models hold and manipulate data

/Content

This folder holds our images, CSS, and any other static content

/Scripts

This folder holds our JavaScript files

/App_Data

This folder holds our database files

2. Models, Views, and Controllers

Web-based MVC frameworks map URLs to server code in a slightly different way. Instead of mapping incoming URLs to files, they instead map URLs to methods on classes. These classes are called "Controllers" and they are responsible for processing incoming HTTP requests, handling user input, retrieving and saving data, and determining the response to send back to the client (display HTML, download a file, redirect to a different URL, etc).

Adding Model

Before we create controller and views, we think about what’s the model you need. For ServerExploer, we need a model class which have basic file information, like file name, full path, last modified time, created time, etc.

Right-click the “Models” folder within the Solution Explorer and select “Add”, and then the “Class…” command. This will bring up the “Add New Item” dialog. Select Class Template. Name the class “FileModel” and press the Add button. This will create a new file, FileModel.cs. Add the following code to FileModel.cs.

Adding Explorer Controller

Right-click the “Controllers” folder within the Solution Explorer and select “Add”, and then the “Controller…” command. This will bring up the “Add Controller” dialog. Name the controller “ExplorerController” and press the Add button.

Because we want dynamically update the File List content not the whole page, it uses Html.RenderPatial to render a View template, FileList.

Adding Partial View

ASP.NET MVC supports the ability to define Partial View templates that can be used to encapsulate View rendering logic for a sub-portion of a page. Partials provide a useful way to define View rendering logic once and then reuse it in multiple places across an application.

Right-click the “\Views\Shared” folder within the Solution Explorer and select “Add”, and then the “View…” command. This will display the “Add View” dialog. We’ll name the new View we want to create FileList, select the “Create a partial view” checkbox on the dialog, and indicate that we will pass it a FileModel class.

We call another partial view template “ActionLinks” in FileList.ascx. That because we need dynamically partial update “ActionLinks” as well.

Right-click the “\Views\Shared” folder within the Solution Explorer and select “Add”, and then the “View…” command. This will display the “Add View” dialog. We’ll name the new View we want to create ActionLinks, select the “Create a partial view” checkbox on the dialog. The following code is ActionLinks.ascx.

In ActionLinks.ascx, it renders two links, one is “Upper” (go back to upper level folder) , the other is “Download”.

Disable an anchor tag

IE supports provides a half-baked implementation of the non-standard attribute 'disabled' on anchor tags ( it changes its colour -even though it does not actually disable the anchor (if it has an href value). Firefox , Chrome do not provide any support for it. “Upper” link need to be disabled, if the current folder is top folder. “Download” link need to be enabled only when at least one checkbox checked.

The only way for all browsers to enable/disable the anchor is Add or remove the href attribute .

Look the above code, we add href attribute for both links with conditions. With magic tag “<% .. %>”, we can embed c# code even inside html element.

But there is no IEnumerable in JavaScript, as you use it in .NET. There is something similar, but it is implemented completely differently. In .NET, IEnumerable just means the class provides a method, GetEnumerator(), which returns an IEnumerator (which itself only contains Current, MoveNext, and Reset methods). In JavaScript, when you do a iteration on an item, you are iterating over the names of its properties.

What you have to do is transform your data into a format that can be used by JavaScript. Most likely this means converting it into something called JSON. The easiest way to convert your .NET data into JSON is to use built-in libraries, such as JavaScriptSerializer.

In ActionLinks.ascx, we serialize ViewData[“CheckedList”] which is a .Net string list to a string with JavaScriptSerializer.

We know any path in ASP.net MVC will be mapped to Controller class. The above code will be mapped to Download method of Explorer controller. We use URL query string format to pass parameters for this method. You also noted we use setting window.location.href to load a view or partial view. This will make the java script function exactly do the same thing as Html.ActionLink.

3. Partial Page Update with JQuery

In Server Explorer, when we double click a folder, sub-folders and files in this folder will be pop up to the list. Similar, when we check or uncheck the checkbox, action links need update as well (passing new view model to action links partial view).

One thing maybe we need bring up is we don’t have to declare an event handler in html. We use JQuery to bind anonymous event handler to a html element.

4. ASP.Net Custom Action Result

One of ASP.Net MVC benefit is how easy to build a custom action result. Although there is a FileResult in MVC already, we need do more in Server Explorer download. Because we support multiple folders and files download, one idea is add these selected files or folders to a zip archive. If we only select one file, and the file is zip file already, don’t do the redundant zip again.

Add an application in target website

Right click the target web site, select “Add Application” command. It will bring up “Add Application” Dialog. Select the application pool which created for this application.

Deploy ASP .net MVC3 Application to IIS 7 from Visual Studio 2010

There are couple of ways to deploy web application to IIS 7. But I prefer deploy it from VS2010 with ftp publish. First you need enable ftp publishing for the target site in IIS 7. Right Click the project , select “publish” command. It’ll bring up Publish Web dialog.

Select “FTP” as publish method, and type the target location.

Re-install .Net Framework 4 for IIS7

For some reasons (mostly happens for IIS 7 installed before .Net 4), after you publish your ASP.Net MVC3 web application to the target web site, it doesn’t work at all. When you browse your application in a browser, you’ll get an error like “Directory Browsing not enabled”. Then if you enable “Directory Browsing”, your application is still not running instead of listing directory contents in browser.

If that happens, that means .Net Framework 4.0 not installed properly on your IIS 7. You need re-install it.

Open Command Prompt .

Go to Windows\Microsoft.NET\Framework\v4.0.30319 or Windows\Microsoft.NET\Framework64\v4.0.30319 folder.

Type the following command:

aspnet_regiis –i

After re-installation, your application will work as expected.

Conclusion

We’ve seen that that ASP.NET MVC makes it easy to create a website pretty quickly. Hopefully this article has given you the tips you need to get started building your own ASP.NET MVC applications!

Share

About the Author

Fred Song is a senior software developer who lives in Melbourne, Australia. In 1993, he started Programming using Visual C++, Visual Basic, and Oracle Developer Tools. From 2003, He started with .Net using C#.

He is often working with software projects in different business domains based on different Microsoft Technologies like SQL-Server, C#, VC++, ASP.NET, WCF,WPF and Silverlight, although he also did some development works on IBM AS400.