ASP.NET MVC Listbox handling selected item events

Question

I am using a HTML.ListBox within a view as such:

<%= Html.ListBox("projects", Model.Projects)  %>

This is populated with an IEnumerable<SelectListItem> in the model as such:

Projects = project.Select(a => new System.Web.Mvc.SelectListItem
        {
            Value = "foo",
            Text = a.project + "(" + a.count + ")",
            Selected = false
        });

        return Projects;

Which in turn is returned to the controller for passing into a strongly typed view.

My question is, how can I monitor for select item events? I need to be able to perform some action when the user makes a selection and/or de-selection.

Thanks.

LeftyX · Accepted Answer · 2011-06-29 12:28:18Z

4

If you're familiar with jQuery you can trap a change even and submit your FORM:

$('#projects').change(function () {
    $(this).parents('form').submit();
});

or you can use ajax to submit some data to an action

$('#projects').change(function () {
    $.ajax({
        type: 'POST',
        url: '<%=Url.Action("<action>", "<controller>")%>',
            data: { id: $('#projects').val() },
            dataType: 'json',
        complete: function(XMLHttpRequest, textStatus) {
            // Do something here.
            }
        });
});

UPDATE:

Since you're using jQuery Dropdown Check List you can trap the onItemClick even and call an action of your controller passing the value of the selected option and the status checked/non checked :

$("#projects").dropdownchecklist({
    emptyText: "select something",
    width: 150,
    onItemClick: function(checkbox, selector){
        var isChecked = checkbox.prop("checked");
        alert("element id: " + checkbox.prop("value"));

        $.ajax({
        type: 'POST',
        url: '<%=Url.Action("<action>", "<controller>")%>',
            data: { selecteId: checkbox.prop("value"), isChecked: isChecked },
            dataType: 'json',
        complete: function(XMLHttpRequest, textStatus) {
            // Do something here.
            }
        });
   }
});

You can have a look at this fiddle.

edited Jun 29, 2011 at 12:28

answered Jun 29, 2011 at 11:13

LeftyX

35.6k21 gold badges140 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Darren Young Over a year ago

Thanks, the listbox is actually wrapped up in a Jquery control. To access the values I want I do as follows: onItemClick: function (checkbox, selector) { alert("value " + checkbox.val() + ", is checked: " + checkbox.prop("checked")). How would I pass the two values back into the controller using this method? Thanks for your help.

Darren Young Over a year ago

Apologies if it seems a simple question, my first day using JQuery :)

LeftyX Over a year ago

@Darren Young: no worries. Do you want to submit your FORM when the user selects an element from the list or you're happy to do an ajax call?

LeftyX Over a year ago

@@Darren Young: also, are you using some kind of jquery plugin which wraps your listbox and transforms it into a list of checkboxes?

Darren Young Over a year ago

@LeftyX, thanks. Yes, the jquery plugin wraps any control that is in effect an HTML select control. The code in my previous comment shows how to get the data from it. In effect when the user checks an item in the list, then it would call the database and update other lists within the view. Is it even possible to just update other controls within the same view? Thanks

|

Collectives™ on Stack Overflow

ASP.NET MVC Listbox handling selected item events

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related