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

虽然这已经很晚了,但我刚刚实现了类似的东西,并且也使用 Twitter Bootstrap 实现了它。

主要技巧是使用类似于Click事件的事件,EditButton然后使用所选行的DataKey将数据拉入单独ListView模式框中。

如果以这种方式更容易获取值,则可以将记录的 ID 放入EditButton CommandArgument中。

然后在获取数据后,在回发后使用RegisterStartupScript显示模态。您不能在所有客户端都执行此操作并且必须回发,因为您需要触发事件并获取行的 ID 并将数据从该 ID 绑定到 second 。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>

用 aDataSource获取多条记录

<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。我对从 a获取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() ,也会出现“$ not found”错误

于 2013-01-18T18:08:56.537 回答