Implementing jQueryMobile in .NET Framework v2.0

Create a new MVC 2.0 project

Modify the Views\Shared\Site.master file to include the following header includes:

<link
rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css”
/>

<script
type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.1.min.js”></script>

<script
type=”text/javascript” src=”http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js”></script>

Modify the div footer with the following markup:

<div
data-role=”footer” id=”footer” data-theme=”a”>

<h4>Page Footer</h4>

</div>

In the MVC project, select the Models folder and create a new class, Customer.

The Customer class has the following properties:

public class Customer
{
    public string Id { get; set; }
    public string FullName { get; set; }
}

Build the solution so that the Customer class will be available when we build the View later on.

In the Controllers folder, create a new Controller, CustomerController and leave the checkbox checked which reads “Add action methods for Create, Update, Delete and Details scenarios”.

In this example, I am going to delete everything but the Index and Details methods.

Now let’s create the view. Right click inside the Index method and choose Add View. Leave the view name Index and in the View data class list, choose Customer so that a strongly typed view will be created based on the Customer class we created above. Choose List from the View content list and click the Add button to generate the Index view.

The Index view will be created in a new Customer folder named Index.aspx and will have all the properties of the Customer class displayed on the page. The generated code looks like this:

<h2>Index</h2>

<table>
    <tr>
        <th></th>
        <th>
            Id
        </th>
        <th>
            FullName
        </th>
    </tr>

<% foreach (var item in Model) { %>

    <tr>
        <td>
            <%: Html.ActionLink("Details", "Details", new { id=item.Id })%> |
        </td>
        <td>
            <%: item.Id %>
        </td>
        <td>
            <%: item.FullName %>
        </td>
    </tr>

<% } %>

</table>

One property we need to change is the key which is passed to the Details page. Look for the following line in the generated code:

<%: Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%>

We need to change PrimaryKey to be the property of our unique value that will be passed to retrieve a Customer. In this case, the value is Customer.Id so change the line to read:

<%: Html.ActionLink("Details", "Details", new { /* id=item.Id */ })%>
where item is the single instance of a Customer in the Model.

The code behind for our controller looks like this:

public List<Customer> CustomerList;

public CustomerController()
{
    CustomerList = new List<Customer>();
    var c1 = new Customer() { Id = "1", FullName = "Peyton Manning" };
    var c2 = new Customer { Id = "2", FullName = "Drew Brees" };
    CustomerList.Add(c1);
    CustomerList.Add(c2);
}

//
// GET: /Customer/

public ActionResult Index()
{

    // In this case, View is a list of Customers
    return View(CustomerList.ToList());

}

Next we will add code to the Details method to lookup the Customer based on the link clicked on in the List on the Index view. This will pass the Customer.Id into the Details method and it’s code looks like this:

public ActionResult Details(string id)
{

    var FindCustomer = CustomerList.Find(result => result.Id == id);
    return View(FindCustomer);
}

Next we need to create the Details view by right clicking inside the Details method and choosing Add View. Leave the view name Details and in the View data class list, choose Customer so that a strongly typed view will be created based on the Customer class. Choose Details from the View content list and click the Add button to generate the Index view.

A file named Details.aspx will be created in the Customers folder. The generated html looks like this:

<h2>Details</h2>

<fieldset>
    <legend>Fields</legend>
   
    <div class="display-label">Id</div>
    <div class="display-field"><%: Model.Id %></div>
   
    <div class="display-label">FullName</div>
    <div class="display-field"><%: Model.FullName %></div>
   
   
</fieldset>

<p>
    <%: Html.ActionLink("Back to List", "Index") %>
</p>

Create a new MVC application
Add the following to the site.master to include the jQuery Mobile css and js libraries:

<head id="Head1" runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>

http://jquerymobile.com/demos/1.0a3/#docs/about/../../docs/lists/../../docs/content/../../docs/api/../pages/../api/../pages/../../

http://weblogs.asp.net/gunnarpeipman/archive/2010/10/27/building-mobile-web-site-with-asp-net-mvc-and-jquery-mobile.aspx

http://www.htmlgoodies.com/tutorials/forms/article.php/3911771/The-Mobile-Web-with-jQuery-Mobile.htm

Takeaways:
Look at Web Platform Installer

MVC:

There’s an MVC handler in the System.Web.Mvc.dll
There will be an IIS express.
Convention over configuration

In the Controller, created a new function Poo with ActionResult.
Run it and type /Home/Poo
No View.
Right click, in solution, in function, Add View
Now run again

Model:
Controller – retrieves Model, does stuff
View – visual represent the model

Razor:
Just out an @ sign in front of your code, and variables (making the parser starter)

Dynamic expressions in C# 4
(Dynamic view data dictionary – the operation will be resolved at runtime)
ViewBag.Whatever = PeopleList
The compiler is the first unit test, just a spell checker.

Scaffolding, Nuget,

Nuget – Add Elmah

Dependency Injection (DI)

Create class

Create interface from Class

Every time you NEW up something, think about DI.

From the Package Manager Console, PM> Install-Package Ninject.MVC3

Look at MVCScaffolding

Takeaways:
Look at Web Platform Installer

MVC:
There’s an MVC handler in the System.Web.Mvc.dll
There will be an IIS express.
Convention over configuration

In the Controller, created a new function Poo with ActionResult.
Run it and type /Home/Poo
No View.
Right click, in solution, in function, Add View
Now run again

Model:
Controller – retrieves Model, does stuff
View – visual represent the model

Razor:
Just out an @ sign in front of your code, and variables (making the parser starter)

Dynamic expressions in C# 4
(Dynamic view data dictionary – the operation will be resolved at runtime)
ViewBag.Whatever = PeopleList
The compiler is the first unit test, just a spell checker.

What’s new in MVVM Light V3

Sending messages with callback

Certain classes have been added to the GalaSoft.MvvmLight.Messaging namespace, allowing sending a message and getting a callback from the recipient. These classes are:

* NotificationMessageWithCallback: Base class for messages with callback.
* NotificationMessageAction: A class with string notification, and a parameterless callback.
* NotificationMessageAction: A class with string notification, and a callback with a parameter of type T.

To send a message with callback, use the following code:
view source
print?
01.var message = new NotificationMessageAction(
02. “Hello world”,
03. callbackMessage =>
04. {
05. // This is the callback code
06. if (callbackMessage)
07. {
08. // …
09. }
10. });
11.
12.Messenger.Default.Send(message);

To register and receive a message with callback, use the following code:
view source
print?
01.Messenger.Default.Register>(
02. this,
03. message =>
04. {
05. // Do something
06.
07. // Execute the callback
08. message.Execute(true);
09. });
Messenger.Default can be overriden

The Messenger.Default property can also be replaced, for example for unit testing purposes, by using the Messenger.OverrideDefault method. All the public methods of the Messenger class have been made virtual, and can be overridden in the test messenger class.
Sending messages to interfaces

In V2, it was possible to deliver messages targeted to instances of a given class. in V3 it is still possible, but in addition you can deliver a message to instances that implement a certain interface. The message will not be delivered to other recipients.

Use the overload Messenger.Default.Send(TMessage message) where TTarget is, in fact, an interface (for example IDisposable). Of course the recipient must register to receive the type of message TMessage.
Sending messages with a token

Messages can now be sent through the Messenger with a token.

* To send a message with token, use the method overload Send(TMessage message, object token).
* To receive a message with token, use the methods Register(object recipient, object token, Action action) or Register(object recipient, object token, bool receiveDerivedMessagesToo, Action action)

The token can be a simple value (int, string, etc…) or an instance of a class. The message is not delivered to recipients who registered with a different token, or with no token at all.

http://blog.galasoft.ch/archive/2010/03/16/whatrsquos-new-in-mvvm-light-v3.aspx

I used Jeff Atwoods article on Setting up Subversion on Windows to get started.

Once Subversion was up and running, I installed TortoiseSVN to create a repository, VisualSVN to connect to a repository and begun the CI installation.

Install Cruise Control on the Server and install as service
Configure the ccnet.config with a Project proj1
Create a working directory
In the working directory\bin directory, install nant, nantcontrib, visualsvn
Create a project directory in the working directory proj1
In the proj1 directory, create a nant build script
Start the Cruise Control service

Key is to get the config file correct. There’s lots of posts on getting CI working so this is just some brief notes.

In a recent project, I needed to implement logging and decided to use the log4net.dll which I have seen referenced in a number of different open source projects. Here are the steps I had to taken in order to use log4net in my project:

1. Download the log4net.dll from http://sourceforge.net/projects/log4net/

2. Add a reference to your project that includes the downloaded log4net.dll

3. Add a log4net section to your web.config/app.config file:

<configuration>
    <configSections>
            <section name="log4net" type="System.Configuration.IgnoreSectionHandler" />
        </sectionGroup>
    </configSections>
</configuration>

4. Add a log4net.config file to your project with the following configuration:

<?xml version="1.0" encoding="utf-8"?>
<log4net debug="true">
  <appender name="LogFileAppender" type="log4net.Appender.FileAppender">
    <param name="File" value="log4netoutput.log" />
    <param name="AppendToFile" value="true" />
    <layout type="log4net.Layout.PatternLayout">
      <param name="ConversionPattern" value="%d [%t] %-5p [%c] %m%n" />
    </layout>
  </appender>
  <root>
    <level value="DEBUG" />
    <appender-ref ref="LogFileAppender" />
  </root>
</log4net>

There are various Appenders you can create but this example uses a text file to log the results into the bin directory of the application. There are also different values that can be used as part of the ConversionPattern to get different output.

5. Be sure to change the properties of the log4net.config file in your project for the Copy to Output Directory attribute to Copy Always. I spent hours debugging my code because the config file was not being copied into the bin directory and log4net did not throw any exceptions. Since I had not used log4net before, I was making the assumption the problem was with my code and/or config file settings.

6. Here’s my code from a test method to make sure log4net is working correctly:

[Test]
public void TestLog4NetOnItsOwn()
{
    ILog logger = LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
    XmlConfigurator.Configure(new FileInfo(Settings.Default.log4net_config_file)); 
    logger.Debug("Here is a debug log.");
}

To log results to the console, include the following line of code:

BasicConfigurator.Configure();

I’ve seen other posts that reference the log4net.config file in the Assembly.cs file rather than in code:

[assembly: log4net.Config.XmlConfigurator(ConfigFile="log4net.config", Watch = true)]

Other Posts and Resources:

http://it.toolbox.com/blogs/daniel-at-work/using-log4net-in-cnet-26794

http://geekswithblogs.net/bsherwin/archive/2008/02/15/119657.aspx

http://weblogs.asp.net/leftslipper/archive/2009/01/20/opening-an-asp-net-mvc-project-without-having-asp-net-mvc-installed-the-project-type-is-not-supported-by-this-installation.aspx

Pingback to http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/