4

Following from the previous question I've started to wonder - is it possible to implement "Components" in ASP.NET MVC (latest version)? And should you?

Let's clarify what I mean with a "component". With that I mean a "control" (aka "widget"), similar to those that ASP.NET webforms is built upon. A gridview might be a good example. In webforms I can place on my form a datasource component (one line of code), a gridview component (another line of code) and bind them together (specify an attribute on the gridview). In the codebehind file I fill the datasource with data (a few lines of DB-querying code), and I'm all set.

At this point the gridview is a fully functional standalone component. I can open the form, and I'll see all the data. I can sort it by clicking on the column headers; it is split into several pages; I can drag the column headers around and rearrange columns; I can turn on "grouping" mode; etc. And I don't need to write another line of code for any of it. The gridview, as a component, already has all the code tucked away in its classes and assemblies. I just place it on the form, initialize it, and it Just Works. At some times (like sorting or navigation to a different page) it will also perform ajax callbacks to the server, but those too will be handled internally, with my code having no knowledge at all about it. And then there are also events that I can attach if I want to get notified when something happens.

In MVC I cannot see a way of doing this cleanly. Sure, there are the partial views, but those only handle half of the problem - they render the initial HTML. Some more can be achieved with client-side Javascript (like column re-arranging), but when the grid needs to do an ajax callback (say, to fetch the next page of data), my code will have to get involved and process that request. At best I guess I can provide some helper methods to process it, but I'll have to write the code that calls them, and also provide a controller method with signature matching the arguments of that callback.

I guess that I could make some hacks with global events or special routes or something, but that just seems... hackish. Unelegant. Perhaps this is not the MVC way? Although I've completed one project in it, I'm still far from being an MVC expert. But then what is? In the intranet application that we're building there are dozens upon dozens of such grids. Naturally I want them all to have a unified look & behavior, and I don't want to repeat the same code all over the place.

So what's the "MVC" approach to this problem?

Community
  • 1
Vilx-
  • 5,320
  • 4
  • 20
  • 24
  • 5
    Telerik have MVC controls http://www.telerik.com/products/aspnet-mvc.aspx so I guess the answer is yes – ozz Mar 19 '12 at 15:58
  • @Ozz - interesting. I'm checking out the example code, and it looks fair enough. But I don't understand how/where the callbacks are processed. Have you any information on how they've handled this problem? – Vilx- Mar 19 '12 at 16:05
  • 1
    yep, call backs simply go to Controller actions. So the Grid view has Insert/Update/Delete of rows... each one is mapped to an action, they can be via Ajax, all very easy. – ozz Mar 19 '12 at 16:08
  • @Ozz - what about sorting/paging? Like in the [very first example](http://demos.telerik.com/aspnet-mvc/razor/grid). Those also generate callbacks, but I don't see where they're processed. – Vilx- Mar 19 '12 at 16:11
  • Just the same as the others, they are processed by a call to an action method with associated params – ozz Mar 19 '12 at 16:39
  • scroll down that page, you'll see tabs, 2nd one shows View code. Look for databinding, thats the call to an action on controller. dataBinding.Ajax().Select("_FirstLook", "Grid").Enabled((bool)ViewData["ajax"]); – ozz Mar 19 '12 at 16:41
  • You obviously haven't taken a look at Teleriks products. Once you do i'm confident that you will delete this question. – The Muffin Man Mar 19 '12 at 17:43
  • @Nick - no, I haven't, even though I had a complimentary subscription from them due to 10K rep on SO. XD The examples though look pretty nice. I'll give them a try later. – Vilx- Mar 19 '12 at 21:34
  • Here some open source MVC controls that look promising: http://mvccontrolstoolkit.codeplex.com/ – Tarik Mar 19 '12 at 21:35
  • @Vilx, One of the great things about these are they come with advanced functionality out of the box, and if you need more they provide you with a way to create your own templates in some cases. All of the controls offer full functionality via Ajax, so you don't have to give anything up if you go that route. – The Muffin Man Mar 19 '12 at 22:45
  • @Nick - to tell the truth, all the 3rd party components I've used have been very "advanced and extendable", and I've always struck on several somethings that I just couldn't get done with them, no matter how many hoops I jumped through. So... I'm a bit skeptical. But I'll give them the benefit of doubt. – Vilx- Mar 19 '12 at 23:40
  • @Vilx, you'll probably always run into that issue when using third party components, but they do a darn good job of trying to prevent that. Most of the controls aren't too complex, except for their grid, that thing is super feature packed. Additionally they have a script registrar for their controls that will pull down the required js files depending on if you need them, and will minify, and combine. – The Muffin Man Mar 20 '12 at 02:19
  • @Nick - A minifying & combining script manager is something I've thought about myself. Nice to hear that someone's implemented that already! :) – Vilx- Mar 20 '12 at 08:36

3 Answers3

2

Yes it is possible to create reusable widgets that play nicely with ASP.NET MVC. As an example, Telerik has two control suites that are "targeted" at the ASP.NET MVC developer. The first is the Telerik Extensions for MVC. These are implemented as HTML Helpers that spit out the appropriate markup (html and jQuery). The second is the Kendo framework which is a pure jQuery based framework that happens to work well with MVC (but also plays nicely with other web frameworks out there).

Both of these are pretty good examples of how to create re-usable widgets that can be dropped in with a few lines of code. The beauty of these frameworks lie in their exstensibility both in terms of functionality as well as look and feel.

Michael Brown
  • 21,684
  • 3
  • 46
  • 83
1

Of course you can, you just have to reimplement all the things webforms does out of the box to make it work but in an efficient manner.

There's no reason you can't have a partial template which renders a "widget" and also progressively enhances that widget with javascript and ajax functionality.

You will have to write some lines of code on the "backend" to support the ajax. Whether thats hundreds of lines of HTTP handling code or 2 lines depends on how much abstraction you push into a framework layer.

Raynos
  • 8,562
  • 33
  • 47
0

MVC approach to this problem would be to build a jquery UI plugin and have that render your UI. You could also provide some classes to help feed it data. I don't think there is the same drag-n-drop deployment requirement in MVC for good reason.

Wyatt Barnett
  • 20,685
  • 50
  • 69
  • I don't mean drag-n-drop development like in webforms designers, but I do like the concept of "reusable components", which can give me a complex behavior (like a gridview) with only a few lines of initialization code. – Vilx- Mar 19 '12 at 16:04
  • Yeah, then a jquery plugin style approach is probably your huckaberry. – Wyatt Barnett Mar 19 '12 at 16:12
  • jQuery plugin is the wrong solution – Raynos Mar 19 '12 at 16:16
  • @Raynos: Because... – Robert Harvey Mar 19 '12 at 16:18
  • @RobertHarvey [see detailed answer](http://programmers.stackexchange.com/a/131168/4642) – Raynos Mar 19 '12 at 17:01
  • @Raynos: Hmm, that answer reads as *"jQuery is horrible, jQuery is bloated, people who use jQuery suck, did I mention jQuery is horrible?"* Not a terribly constructive answer. – Robert Harvey Mar 19 '12 at 17:04
  • The free Telerik extensions for MVC are absolutely amazing. You will get the same control you had with the webforms gridview and much much more. Best of all, the entire control supports AJAX binding. – The Muffin Man Mar 19 '12 at 17:41
  • @Raynos : actually largely agree with you about jquery but it seems to have won the war in terms of composable UI for the moment. I'll add I noted "jquery style" here not "jquery plugin" -- was meant to be inspirational not direct. – Wyatt Barnett Mar 19 '12 at 23:07
  • @WyattBarnett jQuery has only won if you stop fighting the good fight. You've read the jQuery UI source code right? You know how ugly it is right? Get back to fighting the good fight – Raynos Mar 19 '12 at 23:32