Jquery对话框未在aspnet MVC中加载

问题描述 投票:0回答:1

我想当我单击一个按钮时显示子记录。数据显示为表格。

我已经创建了一个局部视图,将显示记录。

我创建了一个控制器操作方法来返回部分视图。

我还在主页/视图上添加了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,以查看在加载视图时对话框是否可以打开,但不加载。

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

任何原因导致对话框代码不起作用。?

罗纳德

我想当我单击一个按钮时显示子记录。数据显示为表格。我创建了一个局部视图,将显示记录。我创建了一个控制器操作方法...

javascript jquery asp.net-mvc jquery-ui jquery-ui-dialog
1个回答
0
投票

看这段代码:

© www.soinside.com 2019 - 2024. All rights reserved.