1

JQuery UI を使用してログイン ページを読み込もうとしています。コードをデバッグすると、page_loadイベントにデバッグされ、アプリケーションを実行した後、そのページのコントロールがフロント エンドに表示されないことがわかりました。

マスターページにはログインボタンがあり、ボタンをクリックすると、JQuery UIを使用してログインページをロードする必要があります。

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

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div id="loginPanel" runat="server">
        <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
        <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
        <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
        <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
        <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="LoginClick" />
        <asp:Button ID="btnClear" runat="server" Text="Clear" />
        <asp:Label ID="lblErrorMessage" runat="server" Text=""></asp:Label>
    </div>
</asp:Content>

JQuery コード:

$.ajax({
      url: 'Login.aspx',
      success: function (data) {
          $('.result').html(data);
          alert('Load was performed.');
          }
      });

ページ コントロールの値は「データ」に読み込まれますが、フロント ページには表示されません。

私は何をする必要がありますか？

4

1 に答える 1

0

データは文字列ですか? つまり、実際にはロードしたい html だけが含まれているのでしょうか、それとも html を取得する必要がある JavaScript オブジェクトでしょうか?

また、おそらくボタンのポストバック イベントが失われる可能性があるため、関連するページに投稿する JavaScript 関数にボタンを接続する方法を使用することをお勧めします。

それが役立つことを願っています

以下のコードサンプルで編集: 注: このソリューションでは jQuery を使用していますが、既に使用していることがわかります

まず、ログインに使用するフォームを含むファイルが必要です (この場合、本文に次の内容の JavascriptPost.aspx を追加しました)

<form id="frmPost" method="post" action="Default.aspx">
    <span>Username</span><input type="text" name="username" />
    <span>Password</span><input type="password" name="password" />
    <button onclick="login();">submit</button>
</form>

次に、次の内容で default.aspx を追加しました。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.7.2.min.js"></script>
    <link href="css/main.css" rel="stylesheet" />
    <script type="text/javascript">
        function loadLogin() {
            $('#loginContainer').load('JavascriptPost.aspx #frmPost');
        };
        function login() {
            $('#frmPost').submit();
        }
    </script>
</head>
<body>
    <div>
        Some really cool stuff about the website
    </div>
    <button onclick="loadLogin()">Login</button>
    <div id="loginContainer"></div>
</body>
</html>

最後に、フォーム パラメータにアクセスするには、リクエストを使用してそれらを引き出すことができます。

if (Request["username"] != null)
{
    string username = Request["username"];
    string password = Request["password"];
}

さらに説明が必要な場合はお知らせください

于 2012-08-29T14:22:10.633 に答える