Jquery 对话框未在 aspnet MVC 中加载
Posted
技术标签:
【中文标题】Jquery 对话框未在 aspnet MVC 中加载【英文标题】：Jquery Dialog not loading in aspnet MVC 【发布时间】：2020-04-08 02:03:58 【问题描述】：我想在单击按钮时显示子记录。数据显示为表格。
我创建了一个显示记录的局部视图。
我创建了一个控制器操作方法来返回部分视图。
我还在主页/视图上添加了 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 看看对话框是否可以在视图加载时打开，它没有加载。
所以我怀疑问题出在对话框上。
对话框代码不起作用的任何原因。？
罗纳德
【问题讨论】：
可能不是唯一的问题，但请尝试将 ajax 数据部分更改为：data: RequestID: requestid ,，并且对话框没有定义为使用 dialog('open') 的 open 方法。
我已按照建议进行了更改。代码中还定义了 open 方法。成功：函数（响应） $('#dialog').html(响应);仍然没有运气... $('#dialog').dialog('open');
别在意我关于 open 方法的最后一部分，我在想别的东西。您能否在成功函数中添加console.log(response) 以查看响应数据包含的内容（如果有）？另请查看删除 contentType 参数是否会改变任何内容。
【参考方案1】：
看看这段代码：
$(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 调用很慢或没有返回详细信息，则对话框可能会在没有数据的情况下打开。
【讨论】：
您好 Twisty，我已经尝试了代码，但控制台中显示了一条错误消息：TypeError $("#dialog").dialog is not a function. 问题是由于共享中的 JQuery 库冲突。 _布局文件。我已经删除了它，它现在可以工作了。非常感谢。以上是关于Jquery 对话框未在 aspnet MVC 中加载的主要内容，如果未能解决你的问题，请参考以下文章
MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求
JQuery Datepicker 未在 ASP.NET MVC 中显示
来自 JQuery 和控制器的 ASPNET Core MVC 部分视图