I’ve no idea how long Marakana TV has been out, but I stumbled across it recently while bumbling about sites with some Google Searches. It seemed cool enough that I decided I’d post a few videos & a short review of the site. If you’re looking for some great material on these topics go check the site out, you won’t regret it.
Ryan Dahl on Node.js
HTML 5 Boiler Plate with Paul Irish
Apache Cassandra: noSQL, Yes to Scale by SriSatish Ambati
If you haven’t seen Marakana Videos I would suggest checking them out. Their site is at http://marakana.com/ where there are forums, more videos, and other great content. Their site focuses on Open Source Training. There are topics ranging from the above Node.js, HTML 5, Apacha Cassandra, and many more on the site.
This is a great write up about how to setup a CQRS Architecture using Windows Azure. The article covers topics ranging from idempotency to command ordering, overall, good stuff.
This is just a cool plugin for jQuery. Being able to zoom in and out of a timeline, and horizontally from past to present, is a great way to view dates & events.
I recently did a clean install of Windows 7 64-bit. It had been a really long time since I listed the current tools, SDKs, and frameworks that I’ve been using. Thus here’s my entourage of software that I use on a regular basis that is installed on my primary development machines.
In addition to these packages of software another as important, if not more important to my day-to-day software development includes these software services and cloud hosting services.
I’ve been working through a project recently that I ended up creating an interesting abstraction of an assembly/classes between multiple web services projects. I wrote about it initially in Aggregated Web Services Pt I. In this blog entry is going to cover a few things, based on a full end-to-end implementation of a project from the WCF RESTful Web Services, to the ASP.NET MVC Site, and finally the jQuery calling those same services.
Simple Architecture
Before I got started, there is one thing I need to point out. The communication with Javascript/jQuery/AJAX has a lot of tricky bits one needs to be aware of. One of those is the same site origin and of course the famous cross domain solution issues. That is why in this walk through I will place the web services and the site pages in the same project, yes, WCF and MVC living happily in a single project. 🙂 You can of course, if your architecture requires it, break these into separate projects, but for this example I’ll have both in the same project.
First create a new solution. I always like to start with a new solution because it keeps the naming structured right, just from the practice.
(Click on any of the images to see a larger full size copy)
New Solution
Once you create all of that then add an ASP.NET MVC 2 Project.
Adding the ASP.NET MVC 2 Project
You can create an ASP.NET MVC 2 Unit Test Project if you want to, but I’m skipping it for now. (yes, I’m still a big TDD advocate, but just setting up a prototype for this example)
Next I wiped out some files I don’t use, and suggest you zap em’ too.
Get Rid of the Nasty MS AJAX
Setting up the WCF Parts
Now that we’ve cleaned up those nasty bits, we’ll add our basic model we’ll be using.
[sourcecode language=”csharp”]
using System;
namespace EndToEnd.Mvc.Models
{
public class Investor
{
public string Id { get; set; }
public string Text { get; set; }
public decimal Money { get; set; }
public DateTime Stamp { get; set; }
}
}
[/sourcecode]
Now add a interface for the RESTful services to the root of the MVC Project as shown below.
[sourcecode language=”csharp”]
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Web;
using EndToEnd.Mvc.Models;
Now add the following abstract base class at the root level also.
[sourcecode language=”csharp”]
using System;
using System.Collections.Generic;
using EndToEnd.Mvc.Models;
namespace EndToEnd.Mvc
{
public abstract class InvestorBase : IEndToEndService
{
#region IEndToEndService Members
public List<Investor> GetIncidents(string pageStart, string pageEnd)
{
return new List<Investor>
{
new Investor
{
Id = Guid.NewGuid().ToString(),
Money = (decimal) (DateTime.Now.Second*2.27),
Stamp = DateTime.Now,
Text = "Lorum ipsum 1"
},
new Investor
{
Id = Guid.NewGuid().ToString(),
Money = (decimal) (DateTime.Now.Second*1.32),
Stamp = DateTime.Now,
Text = "Lorum ipsum 2"
}
};
}
public Investor GetInvestor()
{
return new Investor
{
Id = Guid.NewGuid().ToString(),
Money = (decimal) (DateTime.Now.Second*1.27),
Stamp = DateTime.Now,
Text = "Lorum ipsum"
};
}
#endregion
}
}
[/sourcecode]
Now add a WCF Service file and remove the interface file. Then change the WCF class itself as shown below. The reasons for the abstract class, inheriting from the interface, is that it removes any manipulation being needed with the actual *.svc file. It just seems, at least to me, a little bit cleaner this way.
[sourcecode language=”csharp”]
namespace EndToEnd.Mvc
{
public class EndToEndService : InvestorBase
{}
}
[/sourcecode]
For the last touches for the WCF RESTful Service we need to setup the Web.Config file. I’ve added the section toward the bottom of the config file in the <System.ServiceModel> section. I’ve included the full config file below, so you can easily just copy and paste it if you’re working through step by step with me.
One of the things I always do at this point is to setup the project properties. I do this for a number of reasons, primarily to assure that the port number doesn’t go and change itself on me. The other thing I set is the default startup page. With ASP.NET MVC things get out of sync with Visual Studio, and Visual Studio tries to startup actual *.aspx files. So what I do is just set the startup to an empty root startup. These settings are shown below.
Project Properties
Setting up the MVC Parts
First add a home directory, a HomeController.cs, and then add a Core.Master master page to the project.
MVC Project Parts
Next setup the Core.Master file with the following content sections.
One of the things I’ll point out is that with Visual Studio 2010 you get Intellisense with jQuery. The reason I don’t use the x.x.min.js version of the jQuery is that it doesn’t have the appropriate setup to provide the Intellisense. So be sure for development to use the fully expanded version and you can go to the zipped min version when you go live in production. Another thing I do, which may vary on how you want to develop, is use the hosted jQuery on Google or Microsoft. I did a write up previously for using the hosted jQuery so check it out for reference locations.
In the controller add the following code.
[sourcecode language=”csharp”]
using System.Web.Mvc;
namespace EndToEnd.Mvc.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
[/sourcecode]
Now that we have the Site.Master and the home controller, create an Index.aspx View in the Home folder of the project.
Adding the Index.aspx View
In the view add the following code for the jQuery calls to the services layer.
Here’s the second dose of jQuery bits, with more to come in the near future. I’ve got a few primary things I am going to point out with today’s code. With jQuery getting a particular element, type of element, or the whole lot of a particular element is very easy. Single line of code easy.
[sourcecode language="html"]
<p>
This is a sample page to show some basic jQuery operations with the DOM.
</p>
<p>
The unordered list below has two list items within. When the jQuery below executes
however the number of list items is higher because the master page includes some
list items also.
</p>
<ul>
<li><a href="http://compositecode.com">Loosely Coupled Human Code Factory Blog</a>
<li><a href="https://partner.microsoft.com/">Microsoft Partner Network</a>
</li></ul>
<p>
First set of input controls in nested between the form elements.</p>
<form>
<input type="checkbox" name="" />
<input type="radio" name="" />
<input name="" />
<input type="button" name="" />
</form>
<p>
Second set of input controls in nested between the form elements.</p>
<form>
<input type="checkbox" name="" />
<input type="radio" name="" />
<input name="" />
<input type="button" name="" />
</form>
<p>
Third set of input controls that are within the body elements but not surrounded
by anything else.</p>
<input type="checkbox" name="" />
<input type="radio" name="" />
<input name="" />
<input type="button" name="" />
<p>
This last snippet of HTML I setup to show how the filter method works.</p>
<a class="lookingFor" href="#">link</a>
<a class="lookingFor" href="#">link</a>
<a href="#">
link</a>
<a class="lookingFor" href="#">link</a> <a class="lookingFor" href="#">link</a>
<a href="#">_</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<script type="text/javascript">
var alertMessages;
// alerts there are X elements of type <a> and X elements of type <li>.
alertMessages = 'Page contains ' + jQuery('a').length + ' <a> elements and ' + jQuery('li').length + ' <li> elements.';
// searches within all form elements using a wrapper for context.
alertMessages += '\nselected ' + jQuery('input', $('form')).length + ' inputs';
// searches the first form element using DOM reference as the context.
alertMessages += '\nselected ' + jQuery('input', document.forms[0]).length + ' inputs';
// search within the body element for all input elements using an expression.
alertMessages += '\nselected ' + jQuery('input', 'body').length + ' inputs';
// This finds the 4 links marked with the class lookingFor out of all the <a> elements in the page.
alertMessages += '\n' + jQuery('a').filter('.lookingFor').length + ' lookingFor links'
// This finds the 4 links marked with the class lookingFor out of all the <a> elements in the page,
// however it does so with a function instead.
alertMessages += '\n' + jQuery('a').filter(function (index) { return $(this).hasClass('lookingFor'); }).length + ' lookingFor links';
alert(alertMessages);
</script>
[/sourcecode]
The first line that is parsed together for the alertMessages variable shows a simple usage of the jQuery Selector Engine. The jQuery uses the Sizzle (http://www.sizzlejs.com) Engine for this. There are other options for selector style functionality, but this is the famous jQuery way.
The second, third, and fourth lines assigning to alertMessages are a simple usage of the jQuery Selector to retrieve elements within a particular context. Review the comments in the code above for the specifics of what is being selected.
The fifth line are selecting elements with a particular class property. In this case I’ve called the class lookingFor. The jQuery call is using a filter function to trace the DOM and find the particular elements by the criteria.
The sixth line applies another filter method using a function. This is kind of like using a in line delegate in C#. As with C#, use with caution as you’ll end up with snippets of code copied and pasted everwhere if you use the in line function ability too much.
You must be logged in to post a comment.