locked
Help please with data population RRS feed

  • Question

  • User531283421 posted

    I am trying to populate a bootstrap 4 modal from c#.

    I can get the data for the modal box and can get the modal to open from the code behind.  My problem is the span which is runat server and I have also tried a label control will not display the correct value.

    Here is my code.

    <div class="row">
                    <div class="offer-slider">
                        <asp:Repeater runat="server" ID="rptProducts" OnItemDataBound="rptProducts_OnItemDataBound" OnDataBinding="rptProducts_OnDataBinding">
                            
                            <ItemTemplate>
                                <div class="col-md-4">
                                    <!--Single Product Start-->
                                    <div class="single-product mb-25">
                                        <div class="product-img img-full">
                                            <a href="single-product.html">
                                                <img src="img/product/product12.jpg" alt="" />
                                            </a>
                                            <span class="onsale">Sale!</span>
                                            <div class="product-action">
                                                <ul>
    
                                                    <li>
                                                        <asp:UpdatePanel runat="server" ID="panel1">
                                                            <ContentTemplate>
                                                                <asp:LinkButton ID="btnOpenModal" OnClick="btnOpenModal_Click" CausesValidation="false" CommandArgument='<%# Eval("ProductId").ToString() %>' runat="server" CssClass="fa fa-search"></asp:LinkButton>
                                                                
                                                            </ContentTemplate>
                                                        </asp:UpdatePanel>
                                                    </li>
                                                    <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                                    <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                                </ul>
    
                                            </div>
                                        </div>
                                        <div class="product-content">
                                            <h2><a href="#">Sed sollicitudin</a></h2>
                                            <div class="product-price">
                                                <div class="price-box">
                                                    <span class="regular-price">£10.00pan>
                                                </div>
                                                <div class="add-to-cart">
                                                    <a href="#">Add To Cart</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--Single Product End-->
                                </div>
    
                            </ItemTemplate>
                            
                        </asp:Repeater>
    
                    </div>
                </div>
     protected void btnOpenModal_Click(object sender, EventArgs e)
            {
                //Reference the Repeater Item using Button.
                RepeaterItem item = (sender as LinkButton).NamingContainer as RepeaterItem;
                if (item != null) ProdId = ((LinkButton)item.FindControl("btnOpenModal")).CommandArgument;
                var button = (LinkButton)item.FindControl("btnOpenModal");
                var pd = WebGetMethods.GetProductDetailsByProductId(button.CommandArgument);
    
                HtmlGenericControl newPrice =  Master.FindControl("spanNewPrice") as HtmlGenericControl;
    
                newPrice.InnerText = pd.Price.ToString("c2");
                //this shows the correct value in an alert box
               // ScriptManager.RegisterStartupScript(Page, Page.GetType(), "alert", "alert('" + pd.Price.ToString("c2") + "');", true);
    //open the modal box but values do not transfer to modal ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#open-modal').modal();", true); }

    this is the modal box from the master page

    <div class="modal fade" id="open-modal" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-close"></i></button>
                  </div>
                  <div class="modal-body">
                    <div class="row">
                        <!--Modal Img-->
                        <div class="col-md-5">
                            <!--Modal Tab Content Start-->
                            <div class="tab-content product-details-large" id="myTabContent">
                              <div class="tab-pane fade show active" id="single-slide1" role="tabpanel" aria-labelledby="single-slide-tab-1">
                                  <!--Single Product Image Start-->
                                  <div class="single-product-img img-full">
                                    <img src="img/single-product/large/single-product1.jpg" alt="">
                                  </div>
                                  <!--Single Product Image End-->
                              </div>
                              <div class="tab-pane fade" id="single-slide2" role="tabpanel" aria-labelledby="single-slide-tab-2">
                                  <!--Single Product Image Start-->
                                  <div class="single-product-img img-full">
                                    <img src="img/single-product/large/single-product2.jpg" alt="">
                                  </div>
                                  <!--Single Product Image End-->
                              </div>
                              <div class="tab-pane fade" id="single-slide3" role="tabpanel" aria-labelledby="single-slide-tab-3">
                                  <!--Single Product Image Start-->
                                  <div class="single-product-img img-full">
                                    <img src="img/single-product/large/single-product3.jpg" alt="">
                                  </div>
                                  <!--Single Product Image End-->
                              </div>
                              <div class="tab-pane fade" id="single-slide4" role="tabpanel" aria-labelledby="single-slide-tab-4">
                                  <!--Single Product Image Start-->
                                  <div class="single-product-img img-full">
                                    <img src="img/single-product/large/single-product4.jpg" alt="">
                                  </div>
                                  <!--Single Product Image End-->
                              </div>
                              <div class="tab-pane fade" id="single-slide5" role="tabpanel" aria-labelledby="single-slide-tab-4">
                                  <!--Single Product Image Start-->
                                  <div class="single-product-img img-full">
                                    <img src="img/single-product/large/single-product5.jpg" alt="">
                                  </div>
                                  <!--Single Product Image End-->
                              </div>
                              <div class="tab-pane fade" id="single-slide6" role="tabpanel" aria-labelledby="single-slide-tab-4">
                                  <!--Single Product Image Start-->
                                  <div class="single-product-img img-full">
                                      <img src="/img/single-product/large/single-product6.jpg" alt=""/>
                                  </div>
                                  <!--Single Product Image End-->
                              </div>
                            </div>
                            <!--Modal Content End-->
                            <!--Modal Tab Menu Start-->
                            <div class="single-product-menu">
                                <div class="nav single-slide-menu owl-carousel" role="tablist">
                                    <div class="single-tab-menu img-full">
                                        <a class="active" data-toggle="tab" id="single-slide-tab-1" href="#single-slide1"><img src="img/single-product/small/single-product1.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-2" href="#single-slide2"><img src="img/single-product/small/single-product2.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-3" href="#single-slide3"><img src="img/single-product/small/single-product3.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-4" href="#single-slide4"><img src="img/single-product/small/single-product4.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-5" href="#single-slide5"><img src="img/single-product/small/single-product5.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-6" href="#single-slide6"><img src="img/single-product/small/single-product6.jpg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                            <!--Modal Tab Menu End-->
                        </div>
                        <!--Modal Img-->
                        <!--Modal Content-->
                        <div class="col-md-7">
                            <div class="modal-product-info">
                                <h1>Sit voluptatem</h1>
                                <div class="modal-product-price">
                                   <span class="old-price">$74.00</span>
                                   <span runat="server" id="spanNewPrice" class="new-price">£0.00 NOT WORKING</span>
                               </div>
                               <a href="single-product.html" class="see-all">See all features</a>
                               <div class="add-to-cart quantity">
                                    <div class="add-quantity" action="#">
                                         <div class="modal-quantity">
                                             <input type="number" value="1">
                                         </div>
                                        <div class="add-to-link">
                                            <button class="form-button" data-text="add to cart">add to cart</button>
                                        </div>
                                    </div>
                               </div>
                               <div class="cart-description">
                                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco,Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus.</p>
                               </div>
                                <div class="social-share">
                                   <h3>Share this product</h3>
                                   <ul class="socil-icon2">
                                       <li><a href=""><i class="fa fa-facebook"></i></a></li>
                                       <li><a href=""><i class="fa fa-twitter"></i></a></li>
                                       <li><a href=""><i class="fa fa-pinterest"></i></a></li>
                                       <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                       <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                                   </ul>
                                </div>
                            </div>
                        </div>
                        <!--Modal Content-->
                    </div>
                  </div>
                </div>
              </div>
            </div>

    Sunday, December 1, 2019 9:52 AM

All replies

  • User1535942433 posted

    Hi WebGeeks,

    Accroding to your description and codes, I found you have set the linkbutton inside the updatepanel but the model popup outside the updatepanel, if you click the button, the page will not refresh, that means it will not update the modelpopup’s value.  To solve this issue, I suggest you could make the modelpopup inside the updatepanle and bind a postback trigger for the link button.

    Mode details, you could refer to below codes:

    <div class="row">
    
            <div class="offer-slider">
    
                        <asp:Repeater runat="server" ID="rptProducts" OnItemDataBound="rptProducts_OnItemDataBound" OnDataBinding="rptProducts_OnDataBinding" OnItemCommand="rptProducts_ItemCommand">
    
                            <ItemTemplate>
    
                                <div class="col-md-4">
    
                                    <!--Single Product Start-->
    
                                    <div class="single-product mb-25">
    
                                        <div class="product-img img-full">
    
                                            <a href="single-product.html">
    
                                                <img src="image/image5.jpg" alt="" />
    
                                            </a>
    
                                            <span class="onsale">Sale!</span>
    
                                            <div class="product-action">
    
                                                <ul>
    
                                                    <li>
    
                                                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    
                                                            <ContentTemplate>
    
                                                                <asp:LinkButton ID="btnOpenModal" OnClick="btnOpenModal_Click" CausesValidation="false" CommandName="ProdId" CommandArgument='<%# Eval("ProductId").ToString() %>' runat="server" CssClass="fa fa-search">fffff</asp:LinkButton>
    
                                                        </ContentTemplate>
    
                                                            <Triggers>
    
                                                                <asp:PostBackTrigger  ControlID="btnOpenModal"/>
    
                                                            </Triggers>
    
                                                        </asp:UpdatePanel>
    
                                                       
    
                                                    </li>
    
                                                    <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
    
                                                    <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
    
                                                </ul>
    
     
    
                                            </div>
    
                                        </div>
    
                                        <div class="product-content">
    
                                            <h2><a href="#">Sed sollicitudin</a></h2>
    
                                            <div class="product-price">
    
                                                <div class="price-box">
    
                                                    <span class="regular-price">£10.00pan>
    
                                                </div>
    
                                                <div class="add-to-cart">
    
                                                    <a href="#">Add To Cart</a>
    
                                                </div>
    
                                            </div>
    
                                        </div>
    
                                    </div>
    
                                    <!--Single Product End-->
    
                                </div>
    
                            </ItemTemplate>
    
                        </asp:Repeater>
    
                        </div>
    
                </div>

    Code-Behind:

    private void BindRepeator()
    
            {
    
                string str, strSql;
    
                str = System.Configuration.ConfigurationManager.ConnectionStrings["aspnet-TestApplicationWithDatabase-20190820030542ConnectionString"].ConnectionString;
    
                SqlConnection conn = new SqlConnection(str);
    
                strSql = "select * from Product";
    
                SqlDataAdapter da = new SqlDataAdapter(strSql, str);
    
                DataSet ds = new DataSet();
    
                da.Fill(ds, "Product");
    
                conn.Close();
    
                rptProducts.DataSource = ds.Tables[0].DefaultView;
    
                rptProducts.DataBind();
    
                conn.Close();
    
            }
    
            protected void Page_Load(object sender, EventArgs e)
    
            {
    
                if (!IsPostBack)
    
                {
    
                    BindRepeator();
    
                }
    
            }
    
            protected void btnOpenModal_Click(object sender, EventArgs e)
    
            {
    
     
    
                //Reference the Repeater Item using Button.
    
                RepeaterItem item = (sender as LinkButton).NamingContainer as RepeaterItem;
    
                //if (item != null)
    
                //    ProdId = ((LinkButton)item.FindControl("btnOpenModal")).CommandArgument;
    
                var button = (LinkButton)item.FindControl("btnOpenModal");
    
                //var pd = WebGetMethods.GetProductDetailsByProductId(button.CommandArgument);
    
                HtmlGenericControl newPrice = Master.FindControl("spanNewPrice") as HtmlGenericControl;
    
     
    
                newPrice.InnerText = "dasda";
    
                // this.Master.spanNewPrice_1 = "1";
    
     
    
                ScriptManager.RegisterStartupScript(this, this.GetType(), "myModal", "$('#myModal').modal('show');", true);
    
            }

    master page:

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    
        <script src="Scripts/jquery-1.10.2.min.js"></script>
    
        <script src="Scripts/bootstrap.min.js"></script>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
           
    
     
    
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    
                        </asp:ContentPlaceHolder>
    
                        <!-- /.modal -->
    
                        <div class="modal fade" id="myModal">
    
                            <div class="modal-dialog" role="document">
    
                                <div class="modal-content">
    
                                    <div class="modal-header">
    
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-close"></i></button>
    
                                    </div>
    
                                    <div class="modal-body">
    
                                        <div class="row">
    
                                            <!--Modal Img-->
    
                                            <div class="col-md-5">
    
                                                <!--Modal Tab Content Start-->
    
                                                <div class="tab-content product-details-large" id="myTabContent">
    
                                                    <div class="tab-pane fade show active" id="single-slide1" role="tabpanel" aria-labelledby="single-slide-tab-1">
    
                                                        <!--Single Product Image Start-->
    
                                                        <div class="single-product-img img-full">
    
                                                            <img src="image/image6.jpg" alt="">
    
                                                        </div>
    
                                                        <!--Single Product Image End-->
    
                                                    </div>
    
                                                    <div class="tab-pane fade" id="single-slide2" role="tabpanel" aria-labelledby="single-slide-tab-2">
    
                                                        <!--Single Product Image Start-->
    
                                                        <div class="single-product-img img-full">
    
                                                            <img src="image/image6.jpg" alt="">
    
                                                        </div>
    
                                                        <!--Single Product Image End-->
    
                                                    </div>
    
                                                    <div class="tab-pane fade" id="single-slide3" role="tabpanel" aria-labelledby="single-slide-tab-3">
    
                                                        <!--Single Product Image Start-->
    
                                                        <div class="single-product-img img-full">
    
                                                            <img src="image/image6.jpg" alt="">
    
                                                        </div>
    
                                                        <!--Single Product Image End-->
    
                                                    </div>
    
                                                    <div class="tab-pane fade" id="single-slide4" role="tabpanel" aria-labelledby="single-slide-tab-4">
    
                                                        <!--Single Product Image Start-->
    
                                                        <div class="single-product-img img-full">
    
                                                            <img src="image/image6.jpg" alt="">
    
                                                        </div>
    
                                                        <!--Single Product Image End-->
    
                                                    </div>
    
                                                    <div class="tab-pane fade" id="single-slide5" role="tabpanel" aria-labelledby="single-slide-tab-4">
    
                                                        <!--Single Product Image Start-->
    
                                                        <div class="single-product-img img-full">
    
                                                            <img src="image/image6.jpg" alt="">
    
                                                        </div>
    
                                                        <!--Single Product Image End-->
    
                                                    </div>
    
                                                    <div class="tab-pane fade" id="single-slide6" role="tabpanel" aria-labelledby="single-slide-tab-4">
    
                                                        <!--Single Product Image Start-->
    
                                                        <div class="single-product-img img-full">
    
                                                            <img src="image/image6.jpg" alt="" />
    
                                                        </div>
    
                                                        <!--Single Product Image End-->
    
                                                    </div>
    
                                                </div>
    
                                                <!--Modal Content End-->
    
                                                <!--Modal Tab Menu Start-->
    
                                                <div class="single-product-menu">
    
                                                    <div class="nav single-slide-menu owl-carousel" role="tablist">
    
                                                        <div class="single-tab-menu img-full">
    
                                                            <a class="active" data-toggle="tab" id="single-slide-tab-1" href="#single-slide1">
    
                                                                <img src="image/image6.jpg" alt=""></a>
    
                                                        </div>
    
                                                        <div class="single-tab-menu img-full">
    
                                                            <a data-toggle="tab" id="single-slide-tab-2" href="#single-slide2">
    
                                                                <img src="image/image6.jpg" alt=""></a>
    
                                                        </div>
    
                                                        <div class="single-tab-menu img-full">
    
                                                            <a data-toggle="tab" id="single-slide-tab-3" href="#single-slide3">
    
                                                                <img src="image/image6.jpg" alt=""></a>
    
                                                        </div>
    
                                                        <div class="single-tab-menu img-full">
    
                                                            <a data-toggle="tab" id="single-slide-tab-4" href="#single-slide4">
    
                                                                <img src="image/image6.jpg" alt=""></a>
    
                                                        </div>
    
                                                        <div class="single-tab-menu img-full">
    
                                                            <a data-toggle="tab" id="single-slide-tab-5" href="#single-slide5">
    
                                                                <img src="image/image6.jpg" alt=""></a>
    
                                                        </div>
    
                                                        <div class="single-tab-menu img-full">
    
                                                            <a data-toggle="tab" id="single-slide-tab-6" href="#single-slide6">
    
                                                                <img src="image/image6.jpg" alt=""></a>
    
                                                        </div>
    
                                                    </div>
    
                                                </div>
    
                                                <!--Modal Tab Menu End-->
    
                                            </div>
    
                                            <!--Modal Img-->
    
                                            <!--Modal Content-->
    
                                            <div class="col-md-7">
    
                                                <div class="modal-product-info">
    
                                                    <h1>Sit voluptatem</h1>
    
                                                    <div class="modal-product-price">
    
                                                        <span class="old-price">$74.00</span>
    
                                                        <span runat="server" id="spanNewPrice" class="new-price">£0.00 NOT WORKING</span>
    
                                                    </div>
    
                                                    <a href="single-product.html" class="see-all">See all features</a>
    
                                                    <div class="add-to-cart quantity">
    
                                                        <div class="add-quantity" action="#">
    
                                                            <div class="modal-quantity">
    
                                                                <input type="number" value="1">
    
                                                            </div>
    
                                                            <div class="add-to-link">
    
                                                                <button class="form-button" data-text="add to cart">add to cart</button>
    
                                                            </div>
    
                                                        </div>
    
                                                    </div>
    
                                                    <div class="cart-description">
    
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco,Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus.</p>
    
                                                    </div>
    
                                                    <div class="social-share">
    
                                                        <h3>Share this product</h3>
    
                                                        <ul class="socil-icon2">
    
                                                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    
                                                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    
                                                            <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
    
                                                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
    
                                                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
    
                                                        </ul>
    
                                                    </div>
    
                                                </div>
    
                                            </div>
    
                                            <!--Modal Content-->
    
                                        </div>
    
                                    </div>
    
                                </div>
    
                            </div>
    
                        </div>
    
     

    Link:

    UpdatePanel and Triggers: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.updatepanel.triggers?view=netframework-4.8:

    UpdatePanel:https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.updatepanel?view=netframework-4.8

    Result:

    Best regards,

    Yijing Sun

    Monday, December 2, 2019 10:09 AM