After reading many blog post about ASP.NET MVC for a while, I decide to write a simple application for better understanding. Flickr app seems to be best fit this time as it can be implemented in an hour.
Although Flickr has opened its API to be accessed by both SOAP and REST, I want more some in level of abstraction. So I use FlickrNET API which is available as open source on CodePlex. Really useful and Flickr does not worry me anymore.
After create a web application with ASP.NET MVC Web Application template, the next step is define the layout. In fact, ASP.NET MVC allows you to replace the Web Form view engine with the custom made one such as NHaml and NVelocity. Nonetheless, I'll stick to Web Form because it is easier to learn ASP.NET MVC from ASP.NET developer viewpoint. To replace the existing layout, change the content of ~/Views/Shared/Site.master. Of course, you can replace the existing with the new file.
<%@ Master Language="C#" AutoEventWireup="True" CodeBehind="Site.master.cs" Inherits="mvcweb.Views.Layouts.Site" %>
<!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 runat="server">
<title>My Sample MVC Application</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="inner">
<div id="header">
<h1>
Flickr ASP.NET MVC Apps</h1>
</div>
<div id="maincontent">
<asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</body>
</html>
Same as old Masterpage that comes with ASP.NET 2.0.
As for creating the view, Web Form View Engine comes with both Ajax and Html helper. In addition, Url helper is existed to create the url with supplied controller and action. However, these helpers are not useful as their name. Each helper provides one or two methods for illustrate it usage. Fortunately, the ASP.NET Team releases the MVC Toolkit which consists of various extension methods for the helpers. Moreover, Scott does promise that the next preview of ASP.NET MVC will comes with a load of handy helpers.
For the first Index action. Replace the ~/Views/Home/Index.aspx with the code below
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="True"
CodeBehind="Index.aspx.cs" Inherits="mvcweb.Views.Home.Index" Title="Untitled Page" %><asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<%Html.Form("Search", "Home", FormExtensions.FormMethod.post, new { ID = "theform" });%>
<label for="tags">
Tags:
</label>
<%=Html.TextBox("tags", 30) %>
<%=Html.SubmitButton("find", "Find", "") %>
</form>
</asp:Content>
With MVC Toolkit, Html helper becomes more useful with various methods to create UI and form. Because of trivially implementation, the rendered HTML is clean and in more controllable fashion compare to the traditional web form. For example, the code from action Index above will be rendered as ...
<form action="/Home/Search" method=post ID="theform" >
<label for="tags">
Tags:
</label>
<input id="tags" name="tags" size="30" value="">
<input type=submit name="find" id="find" value="Find" Length="0" />
</form>
sweets..
In order to integate with flickr, I add the FlickrNet assembly to the project reference. Then I create an another method called Search in HomeController .
[ControllerAction]
public void Search(string tags) {
FlickrNet.Flickr flickr = new FlickrNet.Flickr("your flickr API key");
FlickrNet.Photos photos = flickr.PhotosSearch(new PhotoSearchOptions() { Tags = tags , PerPage= 16, SortOrder= PhotoSearchSortOrder.InterestingnessDesc});
RenderView("../Shared/PhotoDisplay", photos.PhotoCollection);
}
Notice that ControllerAction attribute at the method signature. The method without this attribute will act as an ordinary public method that can not be invoked remotely as an action. This prevents the developers expose the method unintentionally.
Next to note, the method body doesn't have any code relate to Request object. In both traditional ASP and ASP.NET, Request.Form need to be referenced to get the input. In fact, ASP.NET MVC maps the querystring/header body to parameterized method. This obviously reduces developer work. Of course, you can manipulate the Request object manually by using HTTP context or Request property.
The method body contains only 3 lines. The first one is initiating the Flickr API wrapper. Search for the photo by using the supplied tag with the second line. Thanks to Object initialize feature in C#3.0 to obviously create the PhotoSearchOptions object in one line. And the third one is passing search result to the view and rendering.
Let's see the PhotoDisplay view.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PhotoDisplay.aspx.cs" Inherits="mvcweb.Views.Shared.PhotoDisplay" %>
<%@ Import Namespace="FlickrNet" %>
<%foreach (Photo photo in ViewData)
{%>
<a href="<%=photo.WebUrl %>"><%= Html.Image(photo.SquareThumbnailUrl, photo.Title, new {Width=75, Height=75 })%></a>
<%}%>
I save the PhotoDisplay as ~/Views/Shared/PhotoDisplay.aspx. The view is accountable for displaying the thumbnail image of the supplied photos. The photos are passed in this view by using strongly-typed ViewData. Let's see the code-behind for better understanding.
public partial class PhotoDisplay : ViewPage
{
}
PhotoDisplay is inherited from the generic version of ViewPage. Therefore the ViewData will be strong-typed. You can inherit the non-generic version to achieve the late-bound and property bag techniques at the cost of intellisense.
To run the app, the easiest way is click the start button on Visual Studio tool bar. Beware, don't point the browser directly to the view url or you'll get NullReferenceException.
Quite a long tutorial, the first part of tutorial has ended. For next part, I'll show how to integrate AJAX to the app. Feedback is always welcome.
Comments
How are people that dont understand coding should get this flickr project?
Post new comment