“Post to Wall” project
Post to Wall is an experimental web application that collects text notes like twitter or facebook does. Because this year I have to fully switch from WebForm to Razor for enterprise development, I decided to experiment on my free time with Mvc and create a simple app that will take advantage of the new Html5 features.
Project goals
- Interactive interface
- Asynchronous behavior
- Lightweight and minimal design
- Cross-browser compatibility
Prerequisites
- VS.NET 2010 SP1
- ASP.NET MVC 3 Tools Update
- Entity Framework 4.5
- SQL Server CE 4.0
- IIS 7.5 Express (Web Matrix 1.0 RTM)
In order to easily install all the prerequisites you can use the Web Platform Installer.
Create a new app
When creating a new Asp.Net MVC 3 project with Visual Studio.NET make sure it’s Razor with the HTML5 check on, then when your project is loaded, update the JQuery components so you’ll use the latest stable version. You can easily do this: in Solution Explorer right click your project and select from the menu “Add Library Package Reference…”, on the pop-up select “Updates” and you’ll see all the new NuGet packages there. You should apply JQuery library update last so the other packages want fail during install.
Styling
Wen you create a new Internet MVC project with the Update Tools installed you’ll see that it includes JQuery UI base theme. JQuery UI is a great library that makes interaction on the web to feel like windows forms, the UI contains rich effects, animation, advanced effects and high-level, themeable widgets. A great widget that i intend to use in this project is the dialog object, if you don’t want to navigate form your main app interface in order to call a controller action the dialog form is your best friend, it comes in a variety of forms and lets you design the content of the dialog in anyway you want it because is just a div on your main page. I will show latter how to work with the dialog form.
For this project I am using the Sunny theme that I personalize with JQuery UI ThemeRoller, in order to apply a custom theme to your mvc project, copy from the zip file the content of the css folder to \Content\themes, then copy from the js folder “jquery-ui-1.8.12.custom.min.js” file to \Scripts. Now that you have included the theme files in your project open the Layout.cshtml and add the following lines inside the head tag:
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/MyNotes.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/sunny/jquery-ui-1.8.12.custom.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.6.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.12.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json2.min.js")" type="text/javascript"></script>
For the initial design I need for my wall a html list and a textbox, the width is set to 500px but in the future I will make this relative for the mobile/pad access, even expose to the user the option to set it’s own desired size for the app.
<header>
<textarea name="content" id="content" class="note-textarea" placeholder="Type away" cols="30" rows="2" maxlength="4000" ></textarea><br />
<input name="submit" type="submit" value="Post" class="post-button fg-button ui-state-default"/>
<input name="submit" type="submit" id="btnSearch" value="Search" class="search-button fg-button ui-state-default"/>
<img id="loaderAnim" style="display:none" alt="loading…" src="@Url.Content("~/Content/themes/base/images/ajax-loader_sunny.gif")" />
</header>
<div id="flash" class="loader"></div>
<ol id="update" class="timeline">
</ol>
</div>
The css uses two main colors for the skinning #FFF8C6 and #FFE87C
{
width: 500px;
line-height: 16px;
background: #FFF8C6;
padding-top: 9px;
}
.panel header {
margin: 9px 10px 9px;
display: block;
}
.panel header textarea
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
line-height: 1.4;
width: 100%;
}
.edit-textarea {
width:99%;
height: 99%;
font-size:14px;
}
.edit-box {
width:100%;
height: 100%;
}
.note-text {
font-family: Arial, "Helvetica Neue",sans-serif;
font-size: 13px;
word-wrap: break-word;
color: #250517;
}
.loader {
background-color:#FFFFFF;
text-align: left;
}
*{
margin:0;padding:0;
}
ol.timeline {
list-style:none;
}
ol.timeline li {
display: none;
border-top: 2px solid #FFFFFF;
background-color: #FFE87C;
min-height: 15px;
position: relative;
padding: 1px 0;
}
ol.timeline li aside
{
position: absolute;
display: none;
right: 0;
top: 9px;
}
ol.timeline li:hover aside
{
display: block;
background: #FFE87C;
padding-left: 5px;
padding-bottom: 2px;
}
ol.timeline li p
{
padding: 9px 10px 0 10px;
margin: 0;
}
ol.timeline li footer
{
font-size: 11px;
width: auto;
display: block;
background: transparent;
opacity: 0.7;
margin: 0;
padding: 0 10px 9px;
text-align: left;
}
.hashtag {
font-size: 15px;
color : #C35617 !important;
}
I have replaced the default menu with jQuery Simple Drop-Down Menu Plugin that consists of only 20 lines of code and works with IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+
Last update on: 14 May 2011
Next post: Async operations with jQuery Ajax and Asp.Net MVC
Hello Stephan,
Thanks for putting up this tutorial. I am new to programming and this is an interesting starting point.
-Tawanda
Hi Stefan,
I recently picked up a project to convert a winForms app. The client wants it re-built on a web platform…blah, blah, blah…short story, I’m looking at an MVC app. I’ve been playing around with it, making progress for the last week when I ran into you’re posting. Seeing it was MVC 3 and specifically discusses jQuery and the UI, it caught my attention. I took care of the prereqs and downloaded the solution, though when I load it into VS 2010, VS balks at not having a virtual directory on http://localhost:7286/ available. It prompts to create it, but fails when it tries because localhost:7286 does not exist.
I’m fairly new to web development in VS 2010, not sure what I need to change to get the project to load correctly. All the other MVC projects I’ve been working with were created by VS2010 on my local machine and I guess were configured auto-magically. Any advice or steering in the right direction would be very much appreciated. I’m very interested in checking out how razor and html5 dovetail together to get at the objectives you laid out for yourself…pretty much what I need to do for this client…
All the best…looking forward to the trackbacks…
Please download it again here: http://www.stefanprodan.eu/admin/code/Mvc-Post-to-Wall.zip Now it uses the Visual Studio Development Server and it should run on any VS.NET 2010 SP1 with the Mvc Tools Update installed. If you have IIS 7 on your PC you can set it in the MspSp/Properties/Web from the project right click menu. Notice that in order to deploy a MVC app you should make sure it runs ok in IIS7 not just the Dev Server.