[英]MVC Close Modal when DataTable Row is clicked
我是新的Asp.net MVC。 我正在尝试根据大量值选择下拉列表。 单击下拉列表时,将弹出一个模式,并在其中显示一个jQuery DataTable。 我正在尝试实现,当单击DataTable中的一行时,将关闭模式,并将行中的两个值(数据:“名称”和数据:“公司”)传递回父窗口,以便我可以填充下拉列表。 任何帮助将不胜感激。
落下:
@Html.DropDownListFor(model => model.Company,
Enumerable.Empty<SelectListItem>(),
new {@id="drop" })
模式:
<div id='myModal' class='modal'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
js调出模态:
<script>
var TeamDetailPostBackURL = '/Home/Details';
$(function () {
$("#drop").click(function () {
debugger;
$("#drop").blur();
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: TeamDetailPostBackURL,
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
});
</script>
部分视图(当单击#t1中的一行时,我想填充下拉菜单“ Drop”):
@model MvcApplication1.Models.About
@{
ViewBag.Title = "Abouts";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">FriendsInfo</h4>
</div>
<div>
<table id="exampless" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Company</th>
</tr>
</thead>
</table>
</div>
@section Scripts{
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@Scripts.Render("~/Content/themes/base/css")
<script>
$(document).ready(function () {
$('#exampless').DataTable({
"ajax": {
"url": "/home/loaddata",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Name", "autoWidth": true },
{ "data": "Company", "autoWidth": true }
]
});
});
</script>
}
更新:我能够使用以下JavaScript从DataTable中获取值:
<script>
$('#exampless').on('click', 'tr', function () {
var ddValue = $('td', this).eq(0).text();
var ddText = $('td', this).eq(1).text();
$("#closeMod").click()
});
</script>
我只需要有关将var ddValue和var ddText从局部视图返回到父视图的帮助。
您应该只可以分配它,因为Modal不是一个单独的窗口,一旦加载它便成为View的一部分。
就像是
$("#drop").val(ddValue);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.