5

ASP.NET Gridview を JQuery Mobile ダイアログにリンクしようとして苦労してきました。これは、Gridview.

私の目標は、 を使用しGridViewてデータを表示することでした。ユーザーが行をクリックすると、ダイアログが開き、FormViewユーザーは選択した行のデータを編集できます。これを JQuery UI ダイアログで正常に動作させましたが、Jquery Mobile に切り替えると、うまくいきませんでした。

現在、iOS デバイスまたは Blackberry で実行すると、ダイアログが画面上で 1 秒間点滅します。Windowsで実行すると問題なく動作します。何が間違っているのかわかりません。

aspx ページのコードは次のとおりです。

   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyTest.aspx.cs"    Inherits="MySite.MyTest" %>
    <!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>Test</title>
    <style type="text/css">
        .hover
        {
            background-color: Gray;
        }
    </style>
    <script type="text/javascript">
    function clickRow() {
        //Had to put in $(document).ready or I got PostBack errors.
            $(document).ready(function () {
                $.mobile.changePage("#dialogPage", 'pop', true, true);
            });
        }
    </script>
</head>
<body>
     <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div data-role="page" id="mainpage">
        <div data-role="content">
        ...GridView goes here...
        <a href="#dialogPage" id="lnkDialog" data-rel="dialog">Click Me</a>
    </div>
    </div>        
   <div data-role="dialog" id="dialogPage">
    <div data-role="content">
        ... FormView goes here....         
    </div>

    </form>

</body>
</html>

コードビハインドの一部を次に示します。

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //Allows user to click/tap anywhere on gridview row to trigger SelectIndexChange
            e.Row.Attributes["onmouseover"] = "this.oldClass = this.className;this.className='hover';";
            e.Row.Attributes["onmouseout"] = "this.className=this.oldClass;";
            e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex.ToString());
        }
    }

    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //This should open dialog
        ClientScript.RegisterStartupScript(typeof(Page), "test", "clickRow()",true);
    }

$.mobile.changePage()問題は、関数を関数にラップする方法にあると思い$(document).ready()ます。そうしないと、ポストバック エラーが発生しました。これを行う正しい方法がわかりません。

<a data-rel="dialog"></a>リンクを使用してダイアログを開こうとすると、すべてのデバイスで正常に動作します。

アドバイスをありがとう。

4

1 に答える 1

0

似たような状況に遭遇したことを覚えています。覚えておくべきことは、jQuery モバイルを扱う場合、head 内にあるスクリプト タグは後続のページにロードされないということです。ページとして機能するタグ内にスクリプト ブロックを移動してみてください。

于 2013-07-19T18:05:26.870 に答える