我想动态更新dropdownlist值当单击Open
时。当用户单击第一行时,其相应的数据应以下拉列表的方式显示,并以与第2行相同的方式显示。实际上,我想使用Json来更新值内部下拉菜单,尽管加载了整个部分。
public PartialViewResult _ModalPopup( string Id)
{
EmpViewModel model=new EmpViewModel();
Id=Id??"1";
var Listdata = context.Employees.Where(x => x.id == Id).Select(y => y.Category).Distinct().ToList();
model.CategoriesList = new SelectList(Listdata);
return PartialView("_MEmpModal", model);
}
查看
<table>
<tr>
<td>
@Html.DisplayName("IT")
</td>
<td>
<a class="LinkId" data-toggle="modal" data-url="/Home/_ModalPopup?Id=1">Open</a>
</td>
</tr>
<tr>
<td>
@Html.DisplayName("Sales")
</td>
<td>
<a class="LinkId" data-toggle="modal" data-url="/Home/_ModalPopup?Id=2">Open</a>
</td>
</tr>
</table>
@{Html.RenderAction("__MEmpModal"); }
局部视图
<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>
脚本
$(document).on("click", '.LinkId', function (e) {
$.ajax({
url: $(this).data("url"),
type: "GET",
}).done(function (partialViewResult) {
$("#DisplayModal").replacewith(partialViewResult);
$('#DisplayModal').focus();
});
});
答案 0 :(得分:1)
非常感谢@StephenMuecke,我遵循了他的示例,该示例说明了如何在下拉列表中动态添加数据。这是Script
解决了我的问题。我对Controller进行了一些小的更改以返回Json
,然后使用了Script
。
控制器
public JsonResult _ModalPopup( string Id)
{
EmpViewModel model=new EmpViewModel();
Id=Id??"1";
var Listdata = context.Employees.Where(x => x.id == Id).Select(y => y.Category).Distinct().ToList();
model.CategoriesList = new SelectList(Listdata);
return Json(model.CategoriesList,JsonRequestBehavior.AllowGet);
}
脚本
$(document).on("click", '.LinkId', function () {
var url = $(this).data("url");
var Category = $("#Category");
$.getJSON(url, { id: $(this).val() }, function (response) {
Category.empty().append($('<option></option>').val('').text('Please select'));
$.each(response, function (index, item) {
Category.append($('<option></option>').val(item.Value).text(item.Text));
});
$('#DisplayModal').modal('show');
});
})