Jquery 对话框未在 asp net MVC 中加载

Question

我想在单击按钮时显示子记录。数据显示为 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 以查看对话框是否可以在视图加载时打开，它没有加载。

所以我怀疑问题出在对话框上。

对话框代码无法正常工作的原因是什么？

罗纳德

Answer 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 调用很慢或细节不 return，对话框可能会打开但没有数据。

Jquery 对话框未在 asp net MVC 中加载

Jquery Dialog not loading in aspnet MVC

javascript

jquery

asp.net-mvc

jquery-ui

jquery-ui-dialog