Site Meter
 
 

jMVC.NET: Neat Client-side MVC for ASP.NET

Here’s an idea I’ve been working on for a little while, and I think is now ready for others to use – a client-side MVC engine that slots into existing ASP.NET pages and makes it dead easy to make dynamic user interfaces.

By that, I mean UIs where the set of controls changes according to the data entered or selections made. Controls appear or disappear, enable or disable, highlight or animate, as the user interacts with them.

There are no postbacks, no AJAX trickery, and no having to write sophisticated Javascript event-handling code. It’s an effective application of the Model-View-Controller principle, running in the browser window.

Impatient? Start by checking out the demos

Example

imageMaybe I’m getting too carried away… let’s take a look at an example you can probably recognise.

Imagine you’re writing a blog application in which the user can enter a list of “tags” for each entry. You could ask them to enter a comma-separated list of strings in a single textbox, but that’s not very nice. It’s better to present a list of separate textboxes – but how many? Well, that isn’t determined in advance, so you’ll need to offer a variable number. Is that so hard?

In standard ASP.NET, despite the simplicity of the requirements, it is painful.

With a jMVC.NET control, it’s easy and clean – your server-side code looks like this:

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
       // Assign initial data to control
       TagList.Model["tags"] = new string[] { "Javascript", "MVC", "Goodness" };
   }
}

protected void FinishedButton_Click(object sender, EventArgs e)
{
    // Retrieve updated data model from control
    string[] tags = (string[])TagList.Model["tags"];
    // ... now save the tags to database or whatever...
}

That’s all there is to it on the server. Assign the data to the control, then read back the results – there’s no intermediate processing or manipulating of controls.

Your code in-front looks like this:

image

… and you have a view template like this:

image

It’s very clean and direct, and you get a control tree that changes and updates right there in the browser with no server communication. Each time the user clicks “add” or “delete”, the underlying data model is updated, and the jMVC framework rebuilds the UI to match.

Installation and Usage

Installation consists of dropping the two DLLs into your /bin folder:

image

To add a control to your page, register the jMVC namespace in your ASPX file:

image

Add a MVCPanel control wherever you want it:

image

You might find it helpful to set “ShowDebugInfo” to true at first, so you can see how your .NET data model is represented in Javascript.

You need to add a view template – usually given the .jmvc extension but anything else if your web server won’t serve files with a .jmvc extension. It’s a plain text file, following the jMVC syntax described here.

Finally, assign data to the control’s “Model” property, and read it back after a postback.

Demos

Those short instructions hardly explain the full picture, so it’s best to look at the demo website. This outlines some realistic use cases and lets you see the source code.

If you have questions or feedback, please post a comment and I’ll reply as soon as I can.

Download

The demo website also has the latest download information, including information on accessing the public subversion repository.

License

jMVC.NET is provided under a MIT license, so you can use it in commercial or non-commercial projects.

Compatibility

On the server, you need to run ASP.NET 2.0 or higher. Browser compatibility is most modern browsers, certainly including IE6+ and Firefox 2+.

14 Responses to jMVC.NET: Neat Client-side MVC for ASP.NET

  1. DotNetGuru

    Hi Steve,

    I was on ScottGu’s website where i found the link to your site. I am actually a newbie to architecture and trying to get hold of MVC. I would repeat the same questions i asked over there. Kindly could you answer the following questions:

    1. In an asp.net application, which part (forms, classes, controls etc) represent M-V-C respectively.

    2. How does MVC fit in a typical 3-tier architecture (are they two different?) and what if
    there are more tiers added? How does a typical UI, BLL & DAL relate to MVC. I have also heard that MVC can be applied to an individual layer. Could you elaborate that a bit.

    Thanks…

  2. Steve

    dotnetguru – hope you don’t mind, but I’ve moved the rest of that discussion to http://blog.codeville.net/discussions/does-3-tier-mvc/ – please feel free to keep discussing general MVC there.

    I’m just keeping this space clear for comments/questions about jMVC.NET itself.

  3. Pingback: Castle MonoRail meets jMVC « codeville

  4. Pingback: .Net Learning Curve » Blog Archive » jMVC, client side MVC lib…

  5. 1) Can controls made with this be used inside an ascx (User Control) that is embedded in another ascx?

    2) Can the CascadingDropDown be simulated with this?

    3) Does it use web services to get data or not?

  6. Steve

    RAGolko, thanks for your questions.

    1) Yes – there’s no problem using any number or combination of these controls, including within nested ASCX controls.

    2) Yes – I did make a demo of cascading dropdowns with jMVC but it’s not on the web. I will try to post one soon.

    3) It doesn’t use web services by default, and the demos I’ve posted don’t pull in any external data. However, if your web service returns JSON data, it’s really nice and easy to consume and render it with jMVC.NET (since jMVC is rendering JSON data as HTML anyway).

    I will try to put together a quick cascading-dropdowns-with-web-services demo when I get a chance and post it here.

  7. Hi Steven,
    Thanks for the answers and I look forward to the CCD/Web Services demo.

    I have an unusual request. I’d like to test this on a platform that already injects the script manager into the page. I would take your Task List demo and convert it into a moduel for this platform. However I would need a compiled dll that doesn’t use the script manager. Is that possible? I’ll let you know the results if it is.
    Thanks.

  8. Takis Katsanos

    Hi, Steven

    I found your work on Codeproject, and tested it against my custom ORM-ized objects with exceptional results.

    My only concern is that every time i have to fetch silently the data “behind” the browser, i actually have to redraw the whole thing (re-render the contents of the hidden TextArea if i understand correctly). On top of that, i’d like to compare the new data with the older ones, in order to apply custom styles (e.x. paint the result red for rate decrease)

    So the real question : Is there a property or hidden method that i could use in order to retrieve the collection again without redrawing the result on the client? The only approach i came up with so far, is to add a second model to the end of the string and concatenate with the results of the previous text area so i can do the comparisons later, but the redrawing is’nt avoided.

    Thanks in advance!

  9. Steve

    Hi Takis,

    I’m not sure I entirely understand what you’re trying to do – could you post a code sample? Or you can email me at steve@codeville.net.

    Cheers

  10. Filipe Sousa

    Hi, is it possible to translate your code to be used in a .NET 1.1 environment? Thanks []

  11. Steve

    Hi Filipe

    Yes, I’m sure that will be possible. I don’t think it really relies on any .NET 2 stuff, but rather uses it for convenience.

    You’ll mostly just have to get rid of any generics and references to .NET 2 collection classes.

  12. Pingback: Introducing Knockout, a UI library for JavaScript « Steve Sanderson’s blog

  13. I trust you would not mind if I put up a part of this site on my univeristy blog?

  14. Nice read again! I really found so many useful information on your website. Thanks for that. Keep up the good work!