Clash Royale CLAN TAG

How to populate dropdownlist inside Modal popup with dynamic data in MVC?

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.
Controller

Open

DisplayModal

Jquery

public PartialViewResult _ModalPopup(EmpViewModel model, string Id)
{

if (Id==null)
{
var Listdata = context.Employees.Where(x => x.id == "1").Select(y => y.Category).Distinct().ToList();
model.CategoriesList = new SelectList(Listdata);
}
else
{
var Listdata = context.Employees.Where(x => x.id == Id).Select(y => y.Category).Distinct().ToList();
model.CategoriesList = new SelectList(Listdata);
}

return PartialView("_MEmpModal", model);
}


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">&times;</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();
});
});


EmpViewModel model

page

id

string Id

null

if (Id==null)

1 Answer
1

Try this.

Link

<a href="/Home/_ModalPopup?Page=1" class="modal-link"> Open</a>


Script

$('body').on('click', '.modal-link', function (e) {
$('#modal-container').removeData('bs.modal');
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
var url = $(this).attr('href');
$.get(url, function (data) {
$('#modal-content').html(data);
$('#modal-container').modal('show');
});


});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.