1

モーダル ダイアログのようなページを開く必要があります。ネットで例を見つけましたが、機能しません。

メインページには、次のコードがあります。

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

誰かがこのコードで私を助けてくれますか? ありがとう

4

5 に答える 5

0

jQueryUIダイアログにはモーダルと呼ばれるブールプロパティ/設定があります。これにより、モーダルタイプのダイアログが作成されます。

私自身はこれを使用します：

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の準備ができた瞬間にポップアップするはずです。

于 2012-10-31T10:06:00.163 に答える
0

JQueryを使用してページコンテンツをパネルにロードしようとしているようですが、コードを正しく読んでいる場合は、JQueryライブラリが含まれていない可能性があるため、このコード行を<head>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>

例えば

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

編集： JQuery UIにあるダイアログを使用していることにも気づきました。必ず、JQueryUIツールキットも参照してください。

編集：コードをjsFiddleに削除しました：http：//jsfiddle.net/EhPk7/1/これ は私にとってはうまくいくようです

于 2012-10-31T09:50:46.650 に答える
0

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

于 2012-10-31T09:53:29.863 に答える
0

jquery lib 参照を追加する必要があります。ページの上部:

 <script src="http://code.jquery.com/jquery-1.8.2.min.js"/>
于 2012-10-31T09:47:50.717 に答える
0

ページで、使用している jQuery コードの上にjQuery スクリプト参照を追加することを検討してください。

また、参照jQuery UIを追加します。

jQueryをダウンロード

于 2012-10-31T09:47:59.000 に答える