Question

I have an application under development using ASP.NET MVC 2 with jQuery. I have a list of items displayed in my page and a set of actions that can be performed on each item. Rather than repeat the links or icons for each list item, we are displaying them in a pseudo-toolbar at the top of the list.

I am using the jQuery UI Selectable plug-in to manage selecting the list items. Now I need to accomplish two things:

1. When I click one of the buttons, I need to submit the id of the selected list item as an argument to the request. For example, if I click the “Edit” button, it should correspond to the action method Edit(int id) with ‘id’ being pulled from the selected item in the list. (Btw, ‘id’ is not the element id but the identifier from the server that I need to embed in the response so I can use it to identify the item back on the server.)

2. I want to be able to enable/disable buttons based on other factors. For example, perhaps one list item can’t be edited because it is ‘closed.’ Once I am able to determine which item is selected (using $(“.ui-selected”) I presume), what is the best way for me to communicate the other attributes I need to determine which buttons are enabled or disabled? Are hidden fields my only (best) option to pass such info to the client-side script?

UPDATE

After reading more I feel I should clarify that I do NOT want to perform the action asynchronously – so no AJAX. I am looking at using the normal action-link type behavior for the buttons.

Answer 1

For the sake of closure, here’s what I ended up with (please comment if you have a better solution!):

In my View, I have implemented a “stub” form like this:

<% using (Html.BeginForm("Command", "MyController"))
   { %>
   <%= Html.Hidden("CommandName") %>
   <%= Html.Hidden("CommandArgument") %>
<% } %>

As mentioned above, I am using the jQuery Selectable plug-in to manage the list of items and their selection. Each item contains hidden fields for any data-points I need to use to determine which of the buttons are enabled or disabled. Here is how I have implemented the Selectable plug-in:

var selectedValue = null;
var selectedItemHasChildren = false;

$(function () {
    $(".my_list").selectable({
        filter: "tr",
        selected: function (e, ui) {
            var item = $(ui.selected).children("td");

            selectedValue = item.children("input[name=ItemID]").first().val();
            selectedItemHasChildren = (item.children("input[name=HasChildren]")
                                      .first()
                                      .val() == 1);

            UpdateButtonStates();
        }
    });
});

The UpdateButtonStates method uses the two variables to determine which buttons should be visible and/or enabled.

Each button, in my case, is actually implemented as an image button – so a span with an <a> wrapper. The href property is directed towards the following method:

function Button_Click(action) {
    $("#CommandName").val(action);
    $("#CommandArgument").val(selectedValue);
    $("form").submit();
}

As you can see, I’m using the form defined above to pass the desired action and the supporting argument back to my controller. I could have, of course, eliminated the CommandName form field and redirected the form itself to the desired action using something like $(“form”).attr(“action”, action). I chose to go this route because I didn’t want the individual actions exposed by my API. Plus I thought this was convenitently similar to the Command event exposed by traditional ASP.NET Button server controls so the learning curve for other developers would be minimized.