Jquery 对话框未在 asp net MVC 中加载
Jquery Dialog not loading in aspnet MVC
我想在单击按钮时显示子记录。数据显示为 table.
我已经创建了一个将显示记录的局部视图。
我已经为 return 部分视图创建了控制器操作方法。
我还在主要 page/view 上添加了 javascript 代码来调用和加载对话框。
这是主要的代码page/view
@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>
这是 return 部分视图的控制器方法。
[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 以查看对话框是否可以在视图加载时打开,它没有加载。
所以我怀疑问题出在对话框上。
对话框代码无法正常工作的原因是什么?
罗纳德
看看这段代码:
$(function() {
function getDataById(u, n, tObj) {
if (n == undefined || isNaN(n)) {
return false;
}
var results = false;
console.log("AJAX, making request:", u, "ID:", n);
$.ajax({
type: "POST",
url: u,
data: {
RequestID: n
},
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function(r) {
results = r;
},
error: function(x, s, e) {
console.log("AJAX", s, e, x);
}
});
if (tObj != undefined) {
tObj.html(results);
}
return results;
}
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
$('.ids').click(function() {
var rHtml = getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'));
if (rHtml) {
$("#dialog").html(rHtml).dialog("open");
} else {
// Proof of Concept / Example Data
$("#dialog").html("**SAMPLE**<br />ID: 1, Date: 12/12/12, Name: Homer Simpson, Request: Donut, Director: Mr. Burns, Location: Plant").dialog("open");
}
});
});
<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>
<tr>
<td>1</td>
<td>12/12/12</td>
<td>Homer Simpson</td>
<td>Donut</td>
<td>Mr. Burns</td>
<td>Plant</td>
<td> <button type="button" class="ids" value="View Details" data-id="1"> 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" />
我无法使用 AJAX 进行测试。因此,我包含了对话框的示例数据作为概念证明,但脚本确实尝试连接到 AJAX 并向控制台显示错误。
它的编写目的在于以多种方式使用。您也可以这样做:
getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'), $("#dialog"));
$("#dialog").dialog("open");
我不建议使用这种方法。如果 AJAX 调用很慢或细节不 return,对话框可能会打开但没有数据。
我想在单击按钮时显示子记录。数据显示为 table.
我已经创建了一个将显示记录的局部视图。
我已经为 return 部分视图创建了控制器操作方法。
我还在主要 page/view 上添加了 javascript 代码来调用和加载对话框。
这是主要的代码page/view
@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>
这是 return 部分视图的控制器方法。
[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 以查看对话框是否可以在视图加载时打开,它没有加载。
所以我怀疑问题出在对话框上。
对话框代码无法正常工作的原因是什么?
罗纳德
看看这段代码:
$(function() {
function getDataById(u, n, tObj) {
if (n == undefined || isNaN(n)) {
return false;
}
var results = false;
console.log("AJAX, making request:", u, "ID:", n);
$.ajax({
type: "POST",
url: u,
data: {
RequestID: n
},
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function(r) {
results = r;
},
error: function(x, s, e) {
console.log("AJAX", s, e, x);
}
});
if (tObj != undefined) {
tObj.html(results);
}
return results;
}
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
$('.ids').click(function() {
var rHtml = getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'));
if (rHtml) {
$("#dialog").html(rHtml).dialog("open");
} else {
// Proof of Concept / Example Data
$("#dialog").html("**SAMPLE**<br />ID: 1, Date: 12/12/12, Name: Homer Simpson, Request: Donut, Director: Mr. Burns, Location: Plant").dialog("open");
}
});
});
<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>
<tr>
<td>1</td>
<td>12/12/12</td>
<td>Homer Simpson</td>
<td>Donut</td>
<td>Mr. Burns</td>
<td>Plant</td>
<td> <button type="button" class="ids" value="View Details" data-id="1"> 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" />
我无法使用 AJAX 进行测试。因此,我包含了对话框的示例数据作为概念证明,但脚本确实尝试连接到 AJAX 并向控制台显示错误。
它的编写目的在于以多种方式使用。您也可以这样做:
getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'), $("#dialog"));
$("#dialog").dialog("open");
我不建议使用这种方法。如果 AJAX 调用很慢或细节不 return,对话框可能会打开但没有数据。