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?
分享 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")
