Question

我需要像模态对话框一样打开一个页面。我在网上找到一个例子，但它不起作用。

在主页面中我有这段代码：

 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
     <asp:Button Text ="Add New Course"  runat="server" ID="btnAddCourse" OnClientClick="showPanel('dialog');return false;"/>
      <script type="text/javascript">
            function showPanel(panelID) {
                $panel = $('#' + panelID);
                $.ajax({
                    url: "/AddNew.aspx",
                    type: "GET",
                    dataType: "html",
                    async: false,
                    data: { "param": "abcd"
                    },
                    success: function (obj) {
                        // obj will contain the complete contents of the page requested
                        // use jquery to extract just the html inside the body tag
                        $content = $(obj).find('body').html();
                        // then update the dialog contents with this and show it
                        $panel.html($content);
                        $panel.dialog();
                    }
                });
            }
    </script>
<div id="dialog">
</div>
</asp:Content>

当我点击按钮时，我需要打开下面的页面。我收到一个错误，告诉我元素$无法识别。我不确切知道谁是元素面板。我必须添加一个面板控件，但在哪里？

     <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddNew.aspx.cs" Inherits="WebApplicationDialog.AddNew" %>

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Add New Course </title>
 </head>
<body>
<form  >
<div id="div1">
<table>
<tr><td colspan="3"> <asp:Label ID="lblCourse" runat="server" Text="Add New Course"></asp:Label></td></tr>
<tr><td colspan="3"> </td></tr>
<tr>
   <td style="width:40%"> <asp:Label ID="lblName" runat="server" Text="Course Name" ></asp:Label></td>
   <td style="width:20%"> </td>
   <td style="width:40%"> 
       <input id="txtName" type="text" />
    </td>
</tr>
<tr>
   <td style="width:40%"> <asp:Label ID="lblDescription" runat="server" Text="Description" ></asp:Label></td>
   <td style="width:20%"> </td>
   <td style="width:40%">
      <input id="txtDescription" type="text" />

   </td>
</tr>
<tr><td colspan="3" style="float:right">
<input value ="Save"   id="btnSave" type="submit"  /> </td></tr>
</table>
</div>

</form>
</body>
</html>

有人可以帮我解决这个问题，让它有效吗？谢谢

Answer 1

您需要添加jquery库引用。在页面顶部：

 <script src="http://code.jquery.com/jquery-1.8.2.min.js"/>

Answer 2

考虑在您正在使用的jQuery代码上方的页面上添加 jQuery脚本引用。

另外，添加参考jQuery UI

<强> Download jQuery

Answer 3

看起来您正在尝试使用JQuery将页面内容加载到面板中，但如果我正在读取您的代码，您可能没有包含JQuery库，则需要在{{中包含这行代码1}}你的HTML代码。您还使用JQueryUI对话框，需要引用JQueryUI库

<head>

例如

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

编辑：我还注意到你正在使用JQuery UI中的对话框，请确保你也引用了JQuery UI工具包

编辑：已将代码剥离为jsFiddle：http://jsfiddle.net/EhPk7/1/ 这似乎对我有用

Answer 4

包含jQuery。改变这一行 - ＆gt; $ panel = $（'＃'+ panelID）;到 - ＆gt; $ panel = $（'＃div1'）;并看看它是否有效。

Answer 5

在jQueryUI对话框中有一个名为modal的布尔属性/设置，这将创建一个模态类型的对话框。

我自己用这个：

d.dialog({  
            autoOpen: true,
            closeOnEscape: false,
            closeText: '',
            modal: true,
            draggable: false,
            resizable: false,
            width: (window.document.width * 0.75),
            dialogClass: 'popup loading',
            title: 'title'),

        });

在

中包装此类函数时

$(document).ready(function() { 

})

它应该在DOM准备就绪时弹出..

如何在ASP.NET中打开像对话框一样的aspx页面

5 个答案: