locked
Passing a value to bootstrap modal RRS feed

  • Question

  • User-1725652363 posted

    Hello, 

    I generate a table from an XML file, so for each reader I have a row and a button to modify the content using a modal popup, the problem is the values are for the first row, note that the modal is inside foreach.

    What's the problem in my side?

    Monday, May 14, 2018 5:45 PM

Answers

All replies

  • User36583972 posted


    HI Kati Ais,

    Kati Ais

    I generate a table from an XML file, so for each reader I have a row and a button to modify the content using a modal popup, the problem is the values are for the first row, note that the modal is inside foreach.

    What's the problem in my side?

    Please include all necessary code snippets for anyone else to be able to reproduce your issue from scratch along with a detailed description about the results including any exception messages.

    The following sample may helpful for you. You can refer it and modify as per your requirement.

    ASPX:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
        <script type='text/javascript'>
            function openModal() {
                $('#addPage').modal('show');
            }
        </script>
    </head>
    <body>
         <form id="form1" runat="server">
            <div>
                <div class="panel panel-default">
                    <div class="panel-heading main-color-bg">
                        <h3 class="panel-title">Item Details
                        </h3>
                    </div>
                    <div class="panel-body">
                        <asp:Repeater ID="rptItemDetails" runat="server">
                            <HeaderTemplate>
                                <table class="table table-striped table-hover">
                                    <tr>
                                         <th>Id
                                        </th>
                                        <th>Item Name
                                        </th>
                                        <th>Category Name
                                        </th>
                                        <th>Description
                                        </th>
                                          <th>Modify
                                        </th>
                                    </tr>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>
                                    <td>
                                        <%#Eval("Id") %>
                                    </td>
                                    <td>
                                        <%#Eval("ItemName") %>
                                    </td>
                                    <td>
                                        <%#Eval("Value") %>
                                    </td>
                                    <td>
                                        <%#Eval("Description") %>
                                    </td>
                                    <td>
                                        <asp:Button ID="btnEdit" CommandArgument='<%#Eval("Id") %>' Text="Edit" OnClick="GetModelData"
                                            CssClass="btn btn-info" runat="server" />
                                    </td>
                                </tr>
                            </ItemTemplate>
                            <FooterTemplate>
                                </table>
                            </FooterTemplate>
                        </asp:Repeater>
                    </div>
                </div>
    
                <div class="modal fade" id="addPage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <h4 style="text-align: center;">Edit Item</h4>
                                <div class="form-group">
                                    <label>
                                        Category</label>
                                    <asp:DropDownList ID="ddl_Category" CssClass="form-control" runat="server" ValidationGroup="vg_btn_AddItem">
                                    </asp:DropDownList>
                                </div>
                                <div class="form-group">
                                    <label>
                                        Item Name</label>
                                    <input type="text" id="txtItemName" runat="server" class="form-control" placeholder="Add Item Name..."
                                        validationgroup="vg_btn_AddItem" />
                                </div>
                                <div class="form-group">
                                    <label>
                                        Description</label>
                                    <input type="text" id="txt_Description" runat="server" class="form-control" placeholder="Add Description..."
                                        validationgroup="vg_btn_AddItem" />
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    Close</button>
                                <button type="button" id="btn_AddItem" runat="server"  class="btn btn-primary" validationgroup="vg_btn_AddItem">
                                    OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    ASPX.CS:

    public partial class bootstrapmodalsamplemodify : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    this.BindItemTable();
                    this.PopulateDropdownlist();
                }
            }
    
    
            private void PopulateDropdownlist()
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("Id", typeof(int));
                dt.Columns.Add("CategoryName");
                dt.Rows.Add(1, "Product1");
                dt.Rows.Add(2, "Product2");
                ddl_Category.DataSource = dt;
                ddl_Category.DataValueField = "Id";
                ddl_Category.DataTextField = "CategoryName";
                ddl_Category.DataBind();
                ddl_Category.Items.Insert(0, new ListItem("SELECT", "0"));
            }
    
            private void BindItemTable()
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("Id", typeof(int));
                dt.Columns.Add("ItemName", typeof(string));
                dt.Columns.Add("Value", typeof(string));
                dt.Columns.Add("Description", typeof(string));
                dt.Rows.Add(1, "Crocine", "Product1", "Test");
                dt.Rows.Add(2, "Crocine1", "Product1", "Test");
                rptItemDetails.DataSource = dt;
                rptItemDetails.DataBind();
                ViewState["Data"] = dt;
            }
    
            protected void GetModelData(object sender, EventArgs e)
            {
                PopulateDropdownlist();
                int id = int.Parse((sender as Button).CommandArgument);
                DataTable dt = (DataTable)ViewState["Data"];
                IEnumerable<DataRow> query = from j in dt.AsEnumerable()
                                             where j.Field<int>("Id").Equals(id)
                                             select j;
                DataTable dtproudct = query.CopyToDataTable();
                ddl_Category.Items.FindByText(dtproudct.Rows[0]["Value"].ToString()).Selected = true;
                txtItemName.Value = dtproudct.Rows[0]["ItemName"].ToString();
                txt_Description.Value = dtproudct.Rows[0]["Description"].ToString();
                ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
            }
        }
    

    Best Regards,

    Yong Lu

    Tuesday, May 15, 2018 8:10 AM
  • User-1725652363 posted

    This is the code, I haven't any exception but the values are same for every row, he keeps the first one

    <tbody>
            @foreach (Class cs in Model.MyClass)
            {
                 statut = (cs.statut == "yes") ? "enable": "disable";
    
                <tr class="@(cs.statut == "yes" ? "success" : "danger") ">
                    <td rowspan="2" >@cs.title</td>
                    <td>@cs.att[0]</td>
                    <td>@cs.att2[0]</td>
                    <td  rowspan="2">@cs.att3</td>
                    <td rowspan="2"><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">@(cs.statut == "yes" ? "Désactiver" : "Activer") </button></td>
                    <td rowspan="2"><button class="btn btn-primary" data-toggle="modal" data-target="#modify">Modifier </button></td>
                </tr>
                <tr class="@(cs.statut == "yes" ? "success" : "danger") ">
                    <td>@cs.att[1]</td>
                    <td>@cs.att2[1]</td>
                </tr>
                <div class="modal fade bs-example-modal-md" id="modifier" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog modal-md" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel">Modify @cd.title</h4>
                            </div>
                            <div class="modal-body">
                                <form class="form">
                                    <div class="">
                                        <label for="groupe" class="col-sm-3 control-label">Groupe</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="groupe" value="@cs.title">
                                        </div>
                                    </div>
                               
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-primary">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
    
            }
    
        </tbody>

    Tuesday, May 15, 2018 8:40 AM
  • User36583972 posted


    HI Kati Ais

    This is the code, I haven't any exception but the values are same for every row, he keeps the first one

    From your further description, Could you upload a running demo to OneDrive(Including your test material). We can download it and debugging. This will help us quickly analyze your problem.
    Share OneDrive files and folders:

    Thank you for your understanding.

    Best Regards,

    Yong Lu

    Wednesday, May 16, 2018 1:17 AM
  • User-1725652363 posted

    finally I found this tutorial: https://www.youtube.com/watch?v=QmNtbnUfns8

    It should use a partial View and some JS :)

    Thank you Yohann Lu for you effort ^^

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 17, 2018 11:41 AM