Ajax中的MVC Ajax

Question

• I have an @Ajax.BeginForm which updates a target "div1". In this div1, I have a table (a list of results of some sort).

• Below the table, I have "div2". I want to update details in this div2 when a user clicks on a row in the table from div1. I want it to be Ajax-enabled, as well.

What would be the best approach?

Answer 1

Yes, something like this should do the trick:

@using(Ajax.BeginForm("Action", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "target-id" }))   
    {

    @Html.DropDownListFor(m => m.SomeField, new SelectList(Model.SomeList, "Id", "Name"))

    <div id="stuff-to-be-fetched">

    </div>

...............
}

<script>
 $('#SomeField').change(function () {

    var parameter = $(this).val();
    var url = "@Html.Raw(Url.Action("GetOtherList"))" + "?parameter=" + parameter;

    $.get(url, function (data) {
        $("#stuff-to-be-fetched").html(data);
    });
});
</script>

New Action:

public PartialViewResult GetOtherList(string parameter)
    {
        var list = _service.RetrieveList(parameter);

        return PartialView("_GetOtherList", list);
    }

_GetOtherList.cshtml:

@Html.Label("SomeOtherField)
@Html.DropDownList("SomeOtherField", new MultiSelectList(Model, "Id", "Name")