3

ajaxモーダルポップアップエクステンダーがあることは知っていますが、それは私が探しているものではありません。信じられないほどの DataTables プラグインをグリッド モードで ASP.Net ListView セットアップに接続し、スタイルを設定しましたが、率直に言って、これは悪いことです。

編集と削除用に 2 つの列を追加しました。編集ボタンは編集テンプレートでうまく機能しますが、Twitter ブートストラップ ポップアップ モーダルを起動して、ユーザーにそこで項目を編集してもらいたいと考えています。

モーダルをポップアップするために各行にアイコンを配置しても問題はありませんが、リストビューの行から値を取得する方法について混乱しています。

編集テンプレート全体をモーダル ダイアログとして起動することはできますか?

ASP.NET Listview と Fancybox を使用してこれを実現しましたが、編集中のアイテムの ID のクエリ文字列を取得するモーダルで新しいページを起動し、すべてにデータベース呼び出しを設定しました。それは非常にやり過ぎだったので、それに頼る必要はありません。

私が必要としているのは、編集テンプレートが行う情報を取得するためのヘルプです。item_command イベントを出発点として使用できると思います。

助けてください。これが私の簡単なデモリストビューのスニペットです。

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
  <ItemTemplate>
      <tr>
        <td>
          <asp:Label ID="NameLabel" runat="server" 
                      Text='<%# Eval("Name") %>' />
        </td>
        <td>
          <asp:Label ID="ItemTypeLabel" runat="server" 
                      Text='<%# Eval("ItemType") %>' />
        </td>
        <td>
          <asp:Label ID="DescriptionLabel" runat="server" 
                      Text='<%# Eval("Description") %>' />
        </td>
        <td>
          <asp:Label ID="PriceLabel" runat="server"
                      Text='<%# Eval("Price","{0:C}") %>' />
        </td>
          <td>
          <asp:LinkButton ID="EditButton" CommandName="Edit" 
                          runat="server">Edit</asp:LinkButton>
        </td>
        <td>
          <asp:LinkButton ID="DeleteButton" CommandName="Delete"    
                          runat="server">Delete</asp:LinkButton>
        </td>
      </tr>
  </ItemTemplate>
  <EditItemTemplate>
    <tr>
      <td>
        <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
      </td>
      <td>
        <asp:TextBox ID="ItemTypeTextBox" runat="server" 
                      Text='<%# Bind("ItemType") %>' />
      </td>
        <td>
        <asp:TextBox ID="DescriptionTextBox" runat="server" 
                      Text='<%# Bind("Description") %>' />
      </td>
      <td>
        <asp:TextBox ID="PriceTextBox" runat="server" Text='<%# Bind("Price") %>' />
      </td>
        <td>
          <asp:LinkButton ID="UpdateButton" CommandName="Update" 
                          runat="server">Update</asp:LinkButton>
      </td>
      <td>
        <asp:LinkButton ID="CancelButton" CommandName="Cancel" 
                        runat="server">Cancel</asp:LinkButton>
      </td>
    </tr>
  </EditItemTemplate>
  <LayoutTemplate>
      <table id="myTable" border="0">
        <thead>
          <tr>
            <th>Name</th>
            <th>ItemType</th>
            <th>Description</th>
            <th>Price</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr id="itemPlaceholder" runat="server">
          </tr>
        </tbody>
      </table>
  </LayoutTemplate>
</asp:ListView>

<asp:Content ContentPlaceHolderID="CPscript" Runat="Server">
  <script type="text/javascript">
    $(document).ready(function () {
      // for datatables
      $('#myTable').dataTable({
        "aaSorting": []
      });
      // for watermark (targets all textboxes inside datatable div)
      $("#DataTable :input:text").watermark("Search for Data").addClass("watermark");
    });
  </script>
</asp:Content>
4

1 に答える 1

1

これは遅いですが、私は似たようなものを実装し、TwitterBootstrapでもそれを実行しました。

主なトリックは、のClickイベントなどのイベントを使用してから、選択した行のDataKeyEditButtonを使用して、モーダルボックスに表示される別のデータにデータをプルすることです。ListView

値を取得する方が簡単な場合は、レコードのIDをEditButton CommandArgumentに入れることができる場合があります。

次に、データを取得したら、ポストバック後にRegisterStartupScriptを使用してモーダルを表示します。これをすべてのクライアント側で行うことはできず、イベントを発生させて行のIDを取得し、そのIDから2番目のIDにデータをバインドする必要があるため、ポストバックする必要があります。ListView

以下に、ほとんど機能しているコードを配置しましたが、いくつかのマイナーな擬似コードポイントがあります。

<asp:ListView ID="ListView1" runat="server"
    DataKeyNames="ItemID"
    DataSourceID="SqlDataSource1">
    <ItemTemplate>
        <tr>
            <td><asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' /></td>
            <td><asp:Label ID="ItemTypeLabel" runat="server" Text='<%# Eval("ItemType") %>' /></td>
            <td><asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' /></td>
            <td><asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("Price","{0:C}") %>' /></td>
            <td><asp:LinkButton ID="EditButton" CommandName="Edit" runat="server" OnClick="EditButton_Click">Edit</asp:LinkButton></td>
            <td><asp:LinkButton ID="DeleteButton" CommandName="Delete" runat="server">Delete</asp:LinkButton></td>
        </tr>
    </ItemTemplate>
    <LayoutTemplate>
        <table id="myTable" border="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>ItemType</th>
                <th>Description</th>
                <th>Price</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr id="itemPlaceholder" runat="server"></tr>
        </tbody>
        </table>
    </LayoutTemplate>
</asp:ListView>

複数のDataSourceレコードを取得するには

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" 
    SelectCommand="ItemSelectAll" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>

編集バージョンを表示するモーダルボックスを作成します

<div id="item-detail" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>My Record</h3>
    </div>
    <div class="modal-body">
        <asp:ListView ID="ListView2" runat="server"
            DataKeyNames="ItemID"
            DataSourceID="SqlDataSource2">
            <EditItemTemplate>
                <tr>
                    <td><asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' /></td>
                    <td><asp:TextBox ID="ItemTypeTextBox" runat="server" Text='<%# Bind("ItemType") %>' /></td>
                    <td><asp:TextBox ID="DescriptionTextBox" runat="server" Text='<%# Bind("Description") %>' /></td>
                    <td><asp:TextBox ID="PriceTextBox" runat="server" Text='<%# Bind("Price") %>' /></td>
                    <td><asp:LinkButton ID="UpdateButton" CommandName="Update" runat="server">Update</asp:LinkButton></td>
                    <td><asp:LinkButton ID="CancelButton" CommandName="Cancel" runat="server">Cancel</asp:LinkButton></td>
                </tr>
            </EditItemTemplate>
            <LayoutTemplate>
                <table id="myTable" border="0">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>ItemType</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="itemPlaceholder" runat="server"></tr>
                </tbody>
                </table>
            </LayoutTemplate>
        </asp:ListView>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
    </div>
</div>

DataSource編集版とは別に

<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
    ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" 
    SelectCommand="ItemSelectByItemID" SelectCommandType="StoredProcedure"
    UpdateCommand="ItemUpdate" SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:Parameter Name="ItemID" Type="Int32" />
    </SelectParameters>
    <UpdateParameters>
        <%-- your parameters --%>
    </UpdateParameters>
</asp:SqlDataSource>

次に、EditButton_Clickイベントで、ItemIDを取得し、のレコードをプルしListView2ます。からDataKeyを取得することにあまり慣れていないListViewので、そこにコメントがあります。

protected void EditButton_Click(Object sender, EventArgs e) 
{
    // get datakey
    string ItemID = ... // get datakey of selected row
    // Set the value to the datasource
    SqlDataSource2.SelectParameters["ItemID"].DefaultValue = ItemID;

    // toggle to edit mode on the only row displayed
    ListView2.EditIndex = 0;

    // Now use jQuery to display the modal box AFTER postback.
    // You need to do it after the postback, otherwise you'll
    // never get to this event to get the ItemID
    String csname1 = "PopupScript";
    Type cstype = this.GetType();

    // Get a ClientScriptManager reference from the Page class.
    ClientScriptManager cs = Page.ClientScript;

    // Check to see if the startup script is already registered.
    if (!cs.IsStartupScriptRegistered(cstype, csname1))
    {
        // In my experience, the jQuery file must be included at the top
        // of the page for this to work. Oterwise you get '$ not found' error.
        StringBuilder cstext1 = new StringBuilder();
        cstext1.Append("<script type=text/javascript>$(document).ready(function() { $('#user-detail').modal('show')}); </");
        cstext1.Append("script>");
        cs.RegisterStartupScript(cstype, csname1, cstext1.ToString());
    }
}

マイナーノート:私の経験では、このメソッドが機能するには、jQueryファイルがページの上部に含まれている必要があります。そうしないと、$(document).ready()を使用していても、「$notfound」エラーが発生します。

于 2013-01-18T18:08:56.537 に答える