数据切换在中继器内的按钮上不起作用

Posted 2023-04-13

【中文标题】数据切换在中继器内的按钮上不起作用

【英文标题】：data-toggle not working on button inside repeater

【发布时间】：2018-02-12 16:01:27

【问题描述】：

我有一个显示转发器控件中数据列表的页面。中继器还在每行显示 2 个按钮。我希望能够在单击按钮时显示引导模式框，但到目前为止我尝试的所有方法都没有奏效。

这是aspx页面的代码

<div class="container">
    <h2>Current Functions</h2>
    <asp:Repeater ID="rptFunctions" runat="server" OnItemCommand="rptFunctions_ItemCommand">
        <HeaderTemplate>
            <table class="table table-striped table-bordered">
            <tr>
                <td>FunctionID</td>
                <td>Function Name</td>
                <td>Function Description</td>
                <td>Read Only</td>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <%# DataBinder.Eval(Container.DataItem,"FunctionID") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem,"FunctionName") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem,"FunctionDescription") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem,"ReadOnly") %>
                </td>
                <td>
                    <asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" CommandName="Edit" CommandArgument='<%#Eval("FunctionID") %>'  data-toggle="modal" data-target="#myModal" />
                    <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger" Text="Delete" CommandName="Delete" CommandArgument='<%#Eval("FunctionID") %>'  data-toggle="modal" data-target="#myModal" />
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
</div>

这是模态的代码。

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

这是我目前在页面背后的代码中所拥有的

       protected void rptFunctions_ItemCommand(object source, RepeaterCommandEventArgs e)
    
        if (e.CommandName == "Edit")
        
            Response.Write("You clicked Edit button ID " + e.CommandArgument);
        
        else if (e.CommandName == "Delete")
        
            Response.Write("You clicked Delete button ID " + e.CommandArgument);
        

    

上面的代码会告诉我我点击的按钮的名称和编号，但它不会显示模态表单。

任何帮助将不胜感激。

【问题讨论】：

重复 ID 是无效的 html。使用类而不是 ID。

嗨，马克，我可以将类添加到按钮中，然后我将如何调用它？谢谢

$('.myclass').on('click',function()); 用于 jQuery 示例

【参考方案1】：

该页面很可能被回发，这就是您看不到模式的原因。可以通过添加return false来防止回发，但需要通过其他方式触发服务器端动作

..asp:Button ID="btnEdit" runat="server" OnClientClick="return false;"...

【讨论】：

另外，请检查开发者工具控制台中是否有任何脚本错误可能会阻止模式。

嗨玛尼感谢您的回复。我检查了控制台，没有错误。我还添加了 OnClientClick = "false" 但它正在回发

这在我重新启动电脑后工作。感谢您的帮助

【参考方案2】：

将 runat="server" 添加到您的模式中：

<div class="modal fade" id="myModal" runat="server" role="dialog">

【参考方案3】：

可能把这个脚本放在页面末尾。

<script>
function showModal()$('#myModal').modal('show');
$('.show-my-modal').on('click',showModal);
</script>

给按钮添加一个类CssClass="btn btn-default show-my-modal"

至于模态的作用，这也许是一个新问题。

也许从类似这样的代码后面做。 （没有测试这个）

protected void btnEdit_Click(object sender, EventArgs e)    
      ScriptManager.RegisterStartupScript(this, this.GetType(),"MyFunModal", "showModal();", true);

您可能不想要这两个事件处理程序，只需要基于您图解代码的最后一个？我会让你决定的。

注意：您也可以在标记onclick="showModal()" 中调用