repeater

Question

User-158363518 posted

hi

how handle button click in repeater ?

i have 5 buttons in a card .

////// save button + delete button + delay button==data target===>bootsrap modal (saveDelayButton + cancel Button ) //////////

When I click on the delay button ,A lot of modals to be created (number of all the items available).

How do I resolve this problem  ?

How to work with save and delete buttons ?

how to work with DropDown List ?

i want go to another page( New Tab ) To show the details of each item in dropDownList Each card .  Thanks .

===============================ASP.net WebForm C# =======================

<asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                    <div class="card">
                        <div class="thumbnail">
                            <img src="<%# DataBinder.Eval(Container.DataItem, "stimage")%>" alt="..." />
                            <div class="caption">
                                <h3><%# DataBinder.Eval(Container.DataItem, "stName")%>&nbsp;&nbsp;<%# DataBinder.Eval(Container.DataItem, "stFamily")%></h3>
                                <p>
                                    <asp:Button runat="server"  CssClass="btn btn-success" ID="btnsave" Text=save /> <asp:Button runat="server"  CssClass="btn btn-danger" ID="btnDelete" Text="delete"/>
                                    <button type="button" id="btn4" class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">delay</button>
                                </p>
                                 <%-- ///////////////////////////// Modal /////////////////////////////////////////// --%>
                                <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                    <div class="modal-dialog modal-sm">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">message</h4>
                                            </div>
                                            <div class="modal-body">
                                                <table>
                                                    <tr>
                                                        <td>time &nbsp;&nbsp;</td>
                                                        <td>
                                                            <input type="text" class="form-control" placeholder="00:00" /></td>
                                                    </tr>
                                                </table>


                                            </div>
                                            <div class="modal-footer">
                                                <asp:Button runat="server" ID="btnSaveDelay" Text="save" CssClass="btn btn-primary"/>
                                                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                 <%-- //////////////////////////////////////////////////////////////////////// --%>
                                <p>

                                    <asp:DropDownList ID="DropDownList" CssClass="selectpicker" data-selected-text-format="count" runat="server">

                                        <asp:ListItem>item 1</asp:ListItem>

                                        <asp:ListItem>item 2 </asp:ListItem>

                                        <asp:ListItem>item 3</asp:ListItem>

                                        <asp:ListItem>item 4</asp:

                                    </asp:DropDownList>
                                </p>

                            </div>
                        </div>

                    </div>
                        </ItemTemplate>
                </asp:Repeater>

Answer 1

User61956409 posted

Hi csajad,

You could dynamically find the modal from the selected row and call .modal("show") method to open the modal.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $(".btn-warning").click(function () {
                $(this).parent().siblings("div.modal").modal("show");
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="card">
                        <div class="thumbnail">
                            <img src="<%# DataBinder.Eval(Container.DataItem, "stimage")%>" alt="..." />

                            <div class="caption">
                                <h3><%# DataBinder.Eval(Container.DataItem, "stName")%>&nbsp;&nbsp;<%# DataBinder.Eval(Container.DataItem, "stFamily")%></h3>
                                <p>
                                    <asp:Button runat="server" CssClass="btn btn-success" ID="btnsave" Text="save" />
                                    <asp:Button runat="server" CssClass="btn btn-danger" ID="btnDelete" Text="delete" />
                                    <button type="button" id="btn4" class="btn btn-warning" data-toggle="modal">delay</button>
                                </p>
                                <%-- ///////////////////////////// Modal /////////////////////////////////////////// --%>
                                <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                    <div class="modal-dialog modal-sm">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">message</h4>
                                            </div>
                                            <div class="modal-body">
                                                <table>
                                                    <tr>
                                                        <td>time &nbsp;&nbsp;</td>
                                                        <td>
                                                            <%# DataBinder.Eval(Container.DataItem, "stName")%>
                                                            <input type="text" class="form-control" placeholder="00:00" /></td>
                                                    </tr>
                                                </table>


                                            </div>
                                            <div class="modal-footer">
                                                <asp:Button runat="server" ID="btnSaveDelay" Text="save" CssClass="btn btn-primary" />
                                                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <%-- //////////////////////////////////////////////////////////////////////// --%>
                                <p>

                                    <asp:DropDownList ID="DropDownList" CssClass="selectpicker" data-selected-text-format="count" runat="server">

                                        <asp:ListItem>item 1</asp:ListItem>

                                        <asp:ListItem>item 2 </asp:ListItem>

                                        <asp:ListItem>item 3</asp:ListItem>

                                        <asp:ListItem>item 4</asp:ListItem>

                                    </asp:DropDownList>
                                </p>

                            </div>
                        </div>

                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>

Best Regards,

Fei Han

Answer 2

User-158363518 posted

thanks .

Not work.

Answer 3

User61956409 posted

Hi csajad,

Firstly, the above code works fine on my side.

Secondly, please make sure whether any error in Console tab using F12 developer tools.

Best Regards,

Fei Han

Answer 4

User-158363518 posted

hi

for save delay(Time) in DB . i need get textbox value(In repeater) .

how i can get TextboxName and textBox Value  ?

Answer 5

User2053451246 posted

thanks .

Not work.

What code did you write?  You changed something to make it match your real control names.  And you most likely changed how the code is called.  Without seeing what you actually tried it is like "My car has a problem. Tell me what's wrong and be sure to include useful links about what to do to fix it or code examples that work!".

Answer 6

User-158363518 posted

hi

 I have an attendance list.

User after clicking on the button delay, a modal is displayed .

in the modal there is a TextBox (txtDelay).
I want to save it in DataBase .

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $(".btn-warning").click(function () {
                $(this).parent().siblings("div.modal").modal("show");
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="card">
                        <div class="thumbnail">
                            <img src="<%# DataBinder.Eval(Container.DataItem, "stimage")%>" alt="..." />

                            <div class="caption">
                                <h3><%# DataBinder.Eval(Container.DataItem, "stName")%>&nbsp;&nbsp;<%# DataBinder.Eval(Container.DataItem, "stFamily")%></h3>
                                <p>
                                    <asp:Button runat="server" CssClass="btn btn-success" ID="btnsave" Text="save" />
                                    <asp:Button runat="server" CssClass="btn btn-danger" ID="btnDelete" Text="delete" />
                                    <button type="button" id="btn4" class="btn btn-warning" data-toggle="modal">delay</button>
                                </p>
                                <%-- ///////////////////////////// Modal /////////////////////////////////////////// --%>
                                <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                    <div class="modal-dialog modal-sm">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">message</h4>
                                            </div>
                                            <div class="modal-body">
                                                <table>
                                                    <tr>
                                                        <td>time &nbsp;&nbsp;</td>
                                                        <td>
                                                            <%# DataBinder.Eval(Container.DataItem, "stName")%>
                                                          <asp:TextBox id="txtDelay" cssClass="form-control" placeholder="00:00"  runat="server" />
                                                           </td>
                                                    </tr>
                                                </table>


                                            </div>
                                            <div class="modal-footer">
                                                <asp:Button runat="server" ID="btnSaveDelay" Text="save" CssClass="btn btn-primary" />
                                                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <%-- //////////////////////////////////////////////////////////////////////// --%>
                                <p>

                                    <asp:DropDownList ID="DropDownList" CssClass="selectpicker" data-selected-text-format="count" runat="server">

                                        <asp:ListItem>item 1</asp:ListItem>

                                        <asp:ListItem>item 2 </asp:ListItem>

                                        <asp:ListItem>item 3</asp:ListItem>

                                        <asp:ListItem>item 4</asp:ListItem>

                                    </asp:DropDownList>
                                </p>

                            </div>
                        </div>

                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>