locked
Pass Value to Modal RRS feed

  • Question

  • User-797751191 posted

    Hi

       I have below code and i want to pass hdf_Link value to modal but is should be hidden on Modal Popup

    protected void Display(object sender, EventArgs e)
        {
            int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
            GridViewRow row = gvwData.Rows[rowIndex];
    
            HiddenField hdf_Link = (row.FindControl("hdfLink") as HiddenField);
    
            ClientScript.RegisterStartupScript(this.GetType(), "Pop", "Approve();", true);
        }

    Thanks

    Thursday, September 26, 2019 10:12 AM

Answers

  • User475983607 posted

    You've asked this question several times.  The community has provided several solutions and recommendation. 

    Your shared solution requires at least one GET and two POSTs.  It is not clear if your code properly handles the multiple requests as you've only shared a a small piece of the code and have not shared the most important bit of code like the modal and the Approve() code.  

    Please find below the tested code example from your previous thread.  Keep in mind, this code uses the recommended approach for passing values to a Bootstrap Modal.  The row values are passed to the model when the user clicks a link within a data bound server control.   The target modal contains a form element where the user can make a decision to submit the action or cancel.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsDemo
    {
        public class CustomerDocument
        {
            public int DocumentNo { get; set; }
            public string LOC { get; set; }
            public int CustomerNo { get; set; }
            public string CustomerName { get; set; }
            public int Company_Id { get; set; }
        }
    
        public partial class BootstrapModal : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    CustomerDocuments.DataSource = GetCustomerDocument();
                    CustomerDocuments.DataBind();
                }
            }
    
            private List<CustomerDocument> GetCustomerDocument()
            {
                List<CustomerDocument> results = new List<CustomerDocument>()
                {
                    new CustomerDocument()
                    {
                        Company_Id = 1,
                        CustomerName = "Customer 1",
                        CustomerNo = 123,
                        DocumentNo = 2,
                        LOC = "LOC 1"
                    },
                    new CustomerDocument()
                    {
                        Company_Id = 50,
                        CustomerName = "Customer 50",
                        CustomerNo = 4444,
                        DocumentNo = 3,
                        LOC = "LOC 2"
                    }
                };
                return results;
            }
    
            protected void Submit_Click(object sender, EventArgs e)
            {
                Label1.Text = $@"You selected 
                    Doc No: {hdfDocumentNo.Value} 
                    LOC: {hdfLOC.Value} 
                    Customer No: {hdfCustomerNo.Value} 
                    Customer Name: {hdfCustomerName.Value} 
                    Company Name: {hdfCompany_Id.Value}";
            }
        }
    }
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BootstrapModal.aspx.cs" Inherits="WebFormsDemo.BootstrapModal" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="CustomerDocuments" runat="server" AutoGenerateColumns="False">
                    <Columns>
                        <asp:TemplateField HeaderText="Edit">
                            <EditItemTemplate>
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <a href="#" 
                                    data-documentno="<%# Eval("DocumentNo") %>" 
                                    data-loc="<%# Eval("LOC") %>" 
                                    data-customerno="<%# Eval("CustomerNo") %>" 
                                    data-customername="<%# Eval("CustomerName") %>" 
                                    data-company_id="<%# Eval("Company_Id") %>" 
                                    data-toggle="modal" 
                                    data-target="#DeleteRecord">
                                    Delete
                                </a>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
    
            <div class="modal fade" id="DeleteRecord" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <asp:HiddenField ID="hdfDocumentNo" runat="server" />
                            <asp:HiddenField ID="hdfLOC" runat="server" />
                            <asp:HiddenField ID="hdfCustomerNo" runat="server" />
                            <asp:HiddenField ID="hdfCustomerName" runat="server" />
                            <asp:HiddenField ID="hdfCompany_Id" runat="server" />
                            <div>
                                Doc No: <span id="DocumentNo"></span><br />
                                LOC: <span id="LOC"></span><br />
                                Customer No: <span id="CustomerNo"></span><br />
                                Customer Name: <span id="CustomerName"></span><br />
                                Company Id: <span id="Company_Id"></span><br />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <asp:Button ID="Submit" runat="server" Text="Submit" class="btn btn-primary" OnClick="Submit_Click" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    
        <div>
            <pre>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </pre>
        </div>
        
    
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script>
            $('#DeleteRecord').on('show.bs.modal', function (event) {
                var link = $(event.relatedTarget);
    
                var documentno = link.data('documentno');
                var loc = link.data('loc');
                var customerno = link.data('customerno');
                var customername = link.data('customername');           
                var company_id = link.data('company_id');
    
                var modal = $(this);
    
                modal.find('.modal-body #<%=hdfDocumentNo.ClientID%>').val(documentno);
                modal.find('.modal-body #<%=hdfLOC.ClientID%>').val(loc);
                modal.find('.modal-body #<%=hdfCustomerNo.ClientID%>').val(customerno);
                modal.find('.modal-body #<%=hdfCustomerName.ClientID%>').val(customername);
                modal.find('.modal-body #<%=hdfCompany_Id.ClientID%>').val(company_id);
    
                modal.find('.modal-body #DocumentNo').text(documentno);
                modal.find('.modal-body #LOC').text(loc);
                modal.find('.modal-body #CustomerNo').text(customerno);
                modal.find('.modal-body #CustomerName').text(customername);
                modal.find('.modal-body #Company_Id').text(company_id);
            })
        </script>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 26, 2019 11:07 AM

All replies

  • User475983607 posted

    You've asked this question several times.  The community has provided several solutions and recommendation. 

    Your shared solution requires at least one GET and two POSTs.  It is not clear if your code properly handles the multiple requests as you've only shared a a small piece of the code and have not shared the most important bit of code like the modal and the Approve() code.  

    Please find below the tested code example from your previous thread.  Keep in mind, this code uses the recommended approach for passing values to a Bootstrap Modal.  The row values are passed to the model when the user clicks a link within a data bound server control.   The target modal contains a form element where the user can make a decision to submit the action or cancel.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsDemo
    {
        public class CustomerDocument
        {
            public int DocumentNo { get; set; }
            public string LOC { get; set; }
            public int CustomerNo { get; set; }
            public string CustomerName { get; set; }
            public int Company_Id { get; set; }
        }
    
        public partial class BootstrapModal : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    CustomerDocuments.DataSource = GetCustomerDocument();
                    CustomerDocuments.DataBind();
                }
            }
    
            private List<CustomerDocument> GetCustomerDocument()
            {
                List<CustomerDocument> results = new List<CustomerDocument>()
                {
                    new CustomerDocument()
                    {
                        Company_Id = 1,
                        CustomerName = "Customer 1",
                        CustomerNo = 123,
                        DocumentNo = 2,
                        LOC = "LOC 1"
                    },
                    new CustomerDocument()
                    {
                        Company_Id = 50,
                        CustomerName = "Customer 50",
                        CustomerNo = 4444,
                        DocumentNo = 3,
                        LOC = "LOC 2"
                    }
                };
                return results;
            }
    
            protected void Submit_Click(object sender, EventArgs e)
            {
                Label1.Text = $@"You selected 
                    Doc No: {hdfDocumentNo.Value} 
                    LOC: {hdfLOC.Value} 
                    Customer No: {hdfCustomerNo.Value} 
                    Customer Name: {hdfCustomerName.Value} 
                    Company Name: {hdfCompany_Id.Value}";
            }
        }
    }
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BootstrapModal.aspx.cs" Inherits="WebFormsDemo.BootstrapModal" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="CustomerDocuments" runat="server" AutoGenerateColumns="False">
                    <Columns>
                        <asp:TemplateField HeaderText="Edit">
                            <EditItemTemplate>
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <a href="#" 
                                    data-documentno="<%# Eval("DocumentNo") %>" 
                                    data-loc="<%# Eval("LOC") %>" 
                                    data-customerno="<%# Eval("CustomerNo") %>" 
                                    data-customername="<%# Eval("CustomerName") %>" 
                                    data-company_id="<%# Eval("Company_Id") %>" 
                                    data-toggle="modal" 
                                    data-target="#DeleteRecord">
                                    Delete
                                </a>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
    
            <div class="modal fade" id="DeleteRecord" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <asp:HiddenField ID="hdfDocumentNo" runat="server" />
                            <asp:HiddenField ID="hdfLOC" runat="server" />
                            <asp:HiddenField ID="hdfCustomerNo" runat="server" />
                            <asp:HiddenField ID="hdfCustomerName" runat="server" />
                            <asp:HiddenField ID="hdfCompany_Id" runat="server" />
                            <div>
                                Doc No: <span id="DocumentNo"></span><br />
                                LOC: <span id="LOC"></span><br />
                                Customer No: <span id="CustomerNo"></span><br />
                                Customer Name: <span id="CustomerName"></span><br />
                                Company Id: <span id="Company_Id"></span><br />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <asp:Button ID="Submit" runat="server" Text="Submit" class="btn btn-primary" OnClick="Submit_Click" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    
        <div>
            <pre>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </pre>
        </div>
        
    
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script>
            $('#DeleteRecord').on('show.bs.modal', function (event) {
                var link = $(event.relatedTarget);
    
                var documentno = link.data('documentno');
                var loc = link.data('loc');
                var customerno = link.data('customerno');
                var customername = link.data('customername');           
                var company_id = link.data('company_id');
    
                var modal = $(this);
    
                modal.find('.modal-body #<%=hdfDocumentNo.ClientID%>').val(documentno);
                modal.find('.modal-body #<%=hdfLOC.ClientID%>').val(loc);
                modal.find('.modal-body #<%=hdfCustomerNo.ClientID%>').val(customerno);
                modal.find('.modal-body #<%=hdfCustomerName.ClientID%>').val(customername);
                modal.find('.modal-body #<%=hdfCompany_Id.ClientID%>').val(company_id);
    
                modal.find('.modal-body #DocumentNo').text(documentno);
                modal.find('.modal-body #LOC').text(loc);
                modal.find('.modal-body #CustomerNo').text(customerno);
                modal.find('.modal-body #CustomerName').text(customername);
                modal.find('.modal-body #Company_Id').text(company_id);
            })
        </script>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 26, 2019 11:07 AM
  • User-797751191 posted

    Hi

     Thnx for reply. I want to get value from Gridview row

    int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
    GridViewRow row = gvwData.Rows[rowIndex];

    lblUrl.Text = Convert.ToString(row.FindControl("hdfLink"));

    Thanks

    Thursday, September 26, 2019 11:23 AM
  • User475983607 posted

     Thnx for reply. I want to get value from Gridview row

    That is exactly what the example does... It gets the values from a GridView row!

    I can't help fix your code as there is not enough code to find the bugs in your design.  I strongly recommend following the Bootstrap standard pattern for passing values to the modal.  Otherwise, there is not much I can to you help you... You're on your own to write code and debug.

    Thursday, September 26, 2019 1:14 PM
  • User-797751191 posted

    Hi mgebhard

      Below code is working . Is it ok

    lblId.Text = ((HiddenField)row.FindControl("hdfId")).Value;

    Thanks

    Thursday, September 26, 2019 1:29 PM
  • User475983607 posted

    Hi mgebhard

      Below code is working . Is it ok

    lblId.Text = ((HiddenField)row.FindControl("hdfId")).Value;

    Thanks

    If you tested the code and the code is working as expected then logically the code is okay.  If you want the community to test/debug your code then you'll need to post code that reproduces any issues.

    Thursday, September 26, 2019 2:05 PM