如何在MVC3中更新没有回发的视图

Question

How can I update a dropdownlist in MVC3. I want to refill it with latest data filled by some other view, but I do not want to postback the view and want to achieve it with jquery. I have a dropdownlist like:

@Html.DropDownListFor(m => m.Department, Model.Departments)
@Html.ValidationMessageFor(m => m.Departments)
<input type="button" value="Refresh" id="btnrefresh" />

I have written jquery code to call controller's method:

 $("#btnrefresh").click(function () {
 var ref = '@Url.Action("RefreshDepartments")';
 var model = '@Model.ToJson()';
 var data = { empModel: model };
 $.getJSON(ref, data, function (result) { alert(result.message); });
        return false;
    });

And Here is the controller method:

public ActionResult RefreshDepartments(EmployeeModel empModel)
    {
        empModel.Departments = GetDepartments();
        empModel.Roles = GetRoles();
        return Json(new { message = "Updated successfully"}, JsonRequestBehavior.AllowGet);
    }

How can I update the dropdownlist with latest values on clicking "Refresh" button without any postback? Is it a good idea to pass the model to the controller and update the model properties? What other ways are possible ?

Answer 1

It doesn't look to me like you need the model to be posted to your controller for what you're doing. In addition, yes, you absolutely can do this with jquery! On a side note, you could also do it with an Ajax.BeginForm() helper method, but lets deal with your jquery example.

Rather than complexify your jquery with your @Url.Action, you can simply call the path itself.

$("#btnrefresh").click(function () {
    var ref = 'ControllerName/RefreshDepartments';
    $.each(result, function (index, val) {
        $('#whateverYourRenderedDropdownListHtmlObjectis')
            .append($("<option></option>")
            .attr("value", val.Text)
            .text(val.Text));
    });
});

Now, for your controller...

public JsonResult RefreshDepartments()
{
    return Json(GetDepartments, JsonRequestBehavior.AllowGet);
}

private SelectList GetDepartments
{
    var deparments = GetDepartments;
    SelectList list = new SelectList(departments);
    return list;
}

This is an alternative to returning the model. It allows you to manipulate the raw JSON instead. Hope it helps!

Answer 2

You almost did it all! Why don't you send the data, I mean list, by RefreshDepartments action? You sent a message to view, so you can send the list similarly and instead of alerting the result you can fill the dropdownlist. something like this:

public ActionResult RefreshDepartments(EmployeeModel empModel)
    {
        return Json(new { departments = GetDepartments()}, JsonRequestBehavior.AllowGet);
    }


$.getJSON(ref, data, function (result) { 
    $("#Department").html("");
    for (var i = 0; i < result.departments.length; i++) {
        var item = result.departments[i];
        $("#Department").append(
              $("<option></option>").val(item.Id).html(item.Name);
        );
    });
});