How to reload dropdown list values in asp.net mvc3 without refreshing page

Question

I'm developing a MVC3 application which interacts with a db. I'm using a form to create an entity and one of the attributes is dependent on another table. To ensure referential integrity, I am populating a drop down list to restrict the user as follows:

var processGroups = repository.getAllProcessGroups();
ViewBag.processGroup_drpdwn = new SelectList(processGroups, "process_group_id", "process_group_name");
return View(); //this is my Creation view

Then, in my View I display the dropdown as

<div class="editor-field">
        @Html.DropDownList("groups", (SelectList)ViewBag.processGroup_drpdwn, new { id = "groupsList" })
         @Html.ActionLink("Add", "AddGroup", null, new { @class = "addGroupLink" })

    </div>

To make things easier on the user, I have implemented a modal dialog using jQuery which allows the user to add an option to the db without having to leave the form to enter it on another page. This all works fine, my Controller returns the partial view, validates the stuff and posts it to the db. Unfortunately, the user has to refresh the page for the new option to get loaded from the db into the drop down list.

I'm trying to update the dropdown list using JSON and JQuery after the insert, but for some reason it is not working.

Additional Info:

Here is the relevant section of the modal form:

@using (Ajax.BeginForm("AddGroup", "Process", null,
    new AjaxOptions
    {
        UpdateTargetId = "update-message",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST",
        OnSuccess = "updateSuccess"
    }, new { @id = "addGroupForm" }))

Here is a method which returns the groups as a JSON list:

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult ShowGroups()
    {
        var groups = repository.getAllProcessGroups();
        List<SelectListItem> list=new List<SelectListItem>();
        foreach (PROCESS_GROUP p in groups)
        {
            list.Add(new SelectListItem() { Value = p.PROCESS_GROUP_ID.ToString(), Text = p.PROCESS_GROUP_NAME });
        }
        return Json(list,JsonRequestBehavior.AllowGet);
    }

Here is the jQuery snippet of code which runs after my data has been inserted:

function loadGroups() {
    alert();
    $.getJSON("/Process/ShowGroups", null, function (data) {
        var selectList = $("#groupsList");
        selectList.empty();
        $.each(data, function (index, optionData) {
            var option = $('<option>').text(optionData.Text).val(optionData.Value);
            selectList.append(option);
        });
    });
}
function updateSuccess() {
    if ($("#update-message").html() == "True") {

        loadGroups();
        $('#updateDialog').dialog('close');
        //twitter type notification
        $('#commonMessage').html("Successfully Added");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);

    }
    else {
        $("#update-message").show();
    }
    }

The loadGroups() begins but nothing happens. I also don't get any error messages explaining what went wrong.

UPDATE:

Works now. I had to remove [AcceptVerbs(HttpVerbs.Post)] from the Action

Eliseu Monar dos Santos · Accepted Answer · 2012-03-16 14:00:14Z

4

$("#mydropdown").change(function () {
    // let's assume /list page prints a JSON string
    $.getJSON('/list', function (data) {
       var result = '';
       for (var i = 0, iL = data.length; i < iL; i++) {
           result += '<option value="' + data[i].value + '">' + data[i].text + '</option>';
       }
       $("#otherdropdown").html( result );
    });
});

This is only one option... use your logic and adapt it to your system. C ya!

edited Mar 16, 2012 at 14:00

answered Nov 18, 2011 at 21:18

Eliseu Monar dos Santos

94111 silver badges13 bronze badges

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

2 Comments

Jim G. Over a year ago

+1: This should be the accepted answer; and yet somebody down-voted it.

Steve Westbrook Over a year ago

Yeah, this deserves an upvote just on the basis of "C ya," not to mention that it's right.

Dallas · Accepted Answer · 2011-11-18 21:16:42Z

1

You could have an action that returns the updated list (as html, or json ). In the updateSuccess function call that action with jQuery's ajax function.

answered Nov 18, 2011 at 21:16

Dallas

2,2371 gold badge13 silver badges13 bronze badges

2 Comments

Rondel Over a year ago

I tried to implement this and I updated the question. i think I'm close but it still isn't quite working

Rondel Over a year ago

Works now. I had to remove [AcceptVerbs(HttpVerbs.Post)] from the Action to get it to return the JSON list.

The Muffin Man · Accepted Answer · 2011-11-18 21:29:12Z

0

Try using firebug to inspect what is being returned back via AJAX when you submit that AJAX form.

Then you need to add a variable to your updateSuccess() function to access the return data like this:

function updateSuccess(ajaxResult) {
     $("#update-message").html(ajaxResult.SomeValue); //example
}

Note that depending on how the data is formed coming back to you, the implementation within that function above will need to be changed.

answered Nov 18, 2011 at 21:29

The Muffin Man

20k30 gold badges128 silver badges196 bronze badges

Collectives™ on Stack Overflow

How to reload dropdown list values in asp.net mvc3 without refreshing page

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related