ASP.NET MVC 2 - Control Advice - asp.net-mvc-2

Question

I'm new to ASP.NET MVC 2, and I need some advice on the best 'Control' to use for this situation. (I'm know ASP.NET MVC doesn't really use server controls, but there are a number of add-ons such as MVC Controls ToolKit).
Here's what I need to do. I have a table in a database which contains a list of tests. I need to be able to display these in a View, and allow the user to select them in some way (via checkboxes or whatever).
Then I need to be able to determine which items are selected.
Can someone tell me the best way to achieve this?
Any help/comments are appreciated.
TIA.

Answer 1

If you do it with client side functionality, it will end up consisting mainly of two parts:
The visual HTML
The functional Javascript
How would I'd do it
I'd create a partial view that displays the table. If you need to reuse this, put the partial in Views/Shared folder
Each TR of the table would have serialized JSON of the object that is displayed in that particular row. Serialization can be done by writing a custom object extension method, so you can call ToJson() on any object afterwards
<tr data='<%= this.Model[0].ToJson()'>
<td class="actions"> Select ... </td>
<td>...</td>
...
</tr>
Mind the extra column with actions that you need to provide.
also add a Javascript that would provide the client side functionality (important: this script uses jQuery)
$(function(){
var selection = {};
$(".actions a.action-select").click(function(evt){
evt.preventDefault();
var context = $(this);
var rowObj = $.parseJSON(context.closest("tr[data]").toggleClass("selected").attr("data"));
if (selection[rowObj.Id])
{
// deselect
delete selection[rowObj.Id];
}
else
{
// select
selection[rowObj.Id] = rowObj;
}
});
This way your rows will have additional selected class when they're selected and your selection object will always have selected rows (or better said their objects) taht you can use however you please.
Additional note
Why did I set selection to be an object rather than an array? Because Javascript objects are kind of associative arrays so searching for a particular element is faster than enumerating over its elements it it was a normal array. This way I can immediately see whether row is selected or not and also remove an element from it directly.
Outcome
This way you'll have a reusable table that you can put on various pages (hence similarities with user controls). but in case you'd need to add several of these tables to your pages you'd have to tweak them a little so that client-side functionality won't mix data between different tables.