Jquery 对话框未在 aspnet MVC 中加载答案

【问题标题】：Jquery Dialog not loading in aspnet MVCJquery 对话框未在 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 参数是否会改变任何内容。

标签： javascript jquery asp.net-mvc jquery-ui jquery-ui-dialog

【解决方案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 库冲突。 _布局文件。我已经删除了它，它现在可以工作了。非常感谢。