我想当我单击一个按钮时显示子记录。数据显示为表格。
我已经创建了一个局部视图,将显示记录。
我创建了一个控制器操作方法来返回部分视图。
我还在主页/视图上添加了javascript代码,以调用和加载对话框。
这里是主页/视图的代码
@model IEnumerable<LearningApp.ViewModel.Requistion>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@{
ViewBag.Title = "Index";
}
</head>
<body>
<h4>Requistion List</h4>
<hr />
<table class ="table table-bordered"cellpadding="0" cellspacing="0" id="RequestGrid">
<tr>
<th>Request #</th>
<th>Date Made</th>
<th>Employee Name</th>
<th>Purpose</th>
<th>Directorate</th>
<th>Station</th>
<th></th>
</tr>
@foreach (var r in Model)
{
<tr>
<td>@r.RequestID</td>
<td>@r.RequestDate</td>
<td>@r.EmployeeName</td>
<td>@r.Purpose</td>
<td>@r.Directorate</td>
<td>@r.Station</td>
<td> <button type="button"class="ids" value="View Details" data-id="@r.RequestID"> View Details</button></td>
</tr>
}
</table>
<div id="dialog" title="View Requistion Details" style="overflow: hidden;">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
$('.ids').click(function () {
var requestid = $(this).data('id');
//alert("You clicked me...again" + requestid)
//var productId = $(this).data('id');
//alert(requestid)
$.ajax({
type: "POST",
url: "/tblRequistions/GetRequistionDetail",
data: '{RequestID: "' + requestid + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (response) {
$('#dialog').html(response);
$('#dialog').dialog('open');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
这是返回部分视图的控制器方法。
[HttpPost]
public ActionResult GetRequistionDetail(int RequestID)
{
List<RequistionDetails> listofdetails = new List<RequistionDetails>();
listofdetails = r.getAllRequistionsDetails(RequestID);
return PartialView("_details",listofdetails);
}
如果从主视图中删除下面的代码部分,然后运行页面,然后单击按钮(查看详细信息),则会对控制器进行ajax调用,并传递正确的参数。
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
如果我离开它,什么也不会发生(未进行ajax呼叫。)>
我已尝试更改autoOpen:True,以查看在加载视图时对话框是否可以打开,但不加载。
所以我怀疑问题出在对话框上。
任何原因导致对话框代码不起作用。?
罗纳德
我想当我单击一个按钮时显示子记录。数据显示为表格。我创建了一个局部视图,将显示记录。我创建了一个控制器操作方法...
看这段代码: