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

I need to open a page like a modal dialog .I find an exemple on net but it doesn't work.

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

In the main page I have this code:

在主页面中我有这个代码:

 <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>

When I click the button I need to open the page below .I receive an error that tell that element $ is not recognized.I don't know exactly who is element panel .Must I add a panel control ,but where ?

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

     <%@ 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>

Can somebody help me with this code ,to make it works ? Thanks

有人可以帮助我使用这个代码,使其有效吗?谢谢

5 个解决方案

#1

It looks like you are trying to use JQuery to load a page content into a panel but if I'm reading your code right you may not have included the JQuery library, you need to include this line of code in the <head> of your html code. You are also using JQueryUI dialog and will need to reference the JQueryUI library

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

<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>

For Example

<head>
    <title>Page Title</title>
    <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>
<head>

EDIT: I also notice you are using the dialog, which is in JQuery UI, pleasse make sure you reference JQuery UI toolkit as well

编辑:我也注意到你正在使用JQuery UI中的对话框,请确保你也参考JQuery UI工具包

EDIT: Have stripped your code into jsFiddle: http://jsfiddle.net/EhPk7/1/ this seems to work for me

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

#2

You need to add jquery lib reference. At the top of a page:

您需要添加jquery lib引用。在页面顶部:

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

#3

Include jQuery. Change this line -> $panel = $('#' + panelID); to -> $panel = $('#div1'); and see if it works.

包括jQuery。改变这一行 - > $ panel = $('#'+ panelID); to - > $ panel = $('#div1');并看看它是否有效。

#4

Consider adding jQuery script references on your page, above the jQuery Code that you are using.

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

Also, add reference jQuery UI

另外,添加引用jQuery UI

Download jQuery

#5

There is a boolean property/setting called modal on the jQueryUI dialog, this will create a modal-type dialog.

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

I myself use this:

我自己用这个:

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

        });

when you wrap this sort of function in the

当你在这里包装这种功能

$(document).ready(function() { 

})

it should popup the moment the DOM is ready..

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

#1

<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>