I want to populate dropdownlist inside Modal popup with dynamic data in MVC. When I clicked on Open
the DisplayModal
modal should display with updated data in dropdowmlist. My Jquery
code is not displaying Modal popup with new data in dropdownlist.
View
<table>
<tr>
<td>
@Html.DisplayName("IT")
</td>
<td>
<a class="LinkId" data-toggle="modal" data-url="/Home/_ModalPopup?Page=1">Open</a>
</td>
</tr>
<tr>
<td>
@Html.DisplayName("Sales")
</td>
<td>
<a class="LinkId" data-toggle="modal" data-url="/Home/_ModalPopup?Page=2">Open</a>
</td>
</tr>
</table>
@{Html.RenderAction("__MEmpModal"); }
Partial Modal
<div class="modal fade" id="DisplayModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
@Html.DropDownListFor(m => m.Category, Model.CategoriesList, new { @class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</div>
</div>
</div>
Script
$(document).on("click", '.LinkId', function (e) {
debugger;
$.ajax({
url: $(this).data("url"),
type: "GET",
}).done(function (partialViewResult) {
$("#DisplayModal").html(partialViewResult);
$('#DisplayModal').focus();
});
});
Best Answer
Try this.
Link
Script