如何为ASP.Net Gridview或Listview的编辑模板启动引导模式？

我知道有一个ajax模式弹出扩展程序，但它不是我真正想要的。我已经成功地将难以置信的DataTables插件连接到网格模式下的ASP.Net ListView设置中，并对其进行了样式化，坦率地说，这是一个很糟糕的插件

我为编辑和删除添加了两列，编辑按钮与编辑模板配合得很好，但我想启动twitter引导弹出模式，让用户在那里编辑项目

我应该可以在每一行中输入图标以弹出模式，但我不知道如何从listview行中获取值

是否可以将整个编辑模板作为模式对话框启动？

我使用ASP.NET Listview和Fancybox实现了这一点，但我最终在模式中启动了一个新页面，该页面对正在编辑的项目的ID进行了查询，并使用数据库调用填充了所有内容。这太过分了，我真的不想依赖它

我需要的是帮助获取编辑模板所做的信息。我想我可以使用item_命令事件作为起点

请帮忙。下面是我的简单演示listview的片段

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

编辑
删除
更新
取消
名称
项目类型
描述
价格
$（文档）.ready（函数（）{
//对于数据表
$（'#myTable'）。数据表({
“aaSorting”：[]
});
//用于水印（针对datatable div中的所有文本框）
$（“#数据表：输入：文本”）.watermark（“搜索数据”）.addClass（“水印”）；
});

虽然这已经晚了，但我只是实现了类似的东西，并用Twitter引导程序实现了它

主要技巧是使用类似于

EditButton

的Click事件的事件，然后使用所选行的DataKey将数据拉入模式框中显示的单独的

ListView

如果更容易获得值，则可以将记录的ID放入

EditButton

CommandArgument

然后在获取数据后，在回发后使用RegisterStartupScript显示模式。您不能在所有客户端都这样做，必须进行回发，因为您需要触发一个事件并获取行的ID，并将该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>

创建一个模式框以显示编辑版本

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

<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\u点击

事件中，抓取ItemID并拉取

ListView2

的记录。我不太熟悉从

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());
    }
}

protectedvoid编辑按钮\u单击（对象发送者，事件参数e）
{
//获取数据密钥
string ItemID=…//获取所选行的数据键
//将该值设置为数据源
SqlDataSource2.SelectParameters[“ItemID”]。DefaultValue=ItemID；
//在显示的唯一行上切换到编辑模式
ListView2.EditIndex=0；
//现在使用jQuery在回发后显示模式框。
//你需要在回邮后再做，否则你会
//从未访问此事件以获取ItemID
字符串csname1=“popuscript”；
类型cstype=this.GetType（）；
//从Page类获取ClientScriptManager引用。
ClientScriptManager cs=Page.ClientScript；
//检查启动脚本是否已注册。
如果（！cs.isstartupscript已注册（cstype，csname1））
{
//根据我的经验，jQuery文件必须包含在顶部
//要使其正常工作，请单击页面的。Oterwise会出现“$not found”错误。
StringBuilder cstext1=新的StringBuilder（）；
追加（$（document）.ready（function（）{$（'#user detail'）.modal（'show'））；）；
RegisterStartupScript（cstype，csname1，cstext1.ToString（））；
}
}

---

一个小提示：根据我的经验，jQuery文件必须包含在页面的顶部，这样这个方法才能工作。否则，即使使用$（document）.ready（），也会出现“$notfound”错误。

您是在谈论Twitter引导吗？是的，特别是这个->

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());
    }
}