Show (Display) selected ASP.Net GridView row other details from database on Modal Popup using C# and VB.Net

Last Reply 6 months ago By dharmendr

Posted 6 months ago

i have used gridview to show plant details and used link button in gridview to open modal popup to show description of particular selected plant from the gridview

So when user clicks on View LinkButton, it should show that selected plants description from database in modal popup.

 

protected void Display(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
    int rowIndex = ((sender as LinkButton).NamingContainer as GridViewRow).RowIndex;
 
    int lbl1 = Convert.ToInt32(GridView2.DataKeys[rowIndex].Values[0]);
 
    SqlCommand cm = new SqlCommand();
    cm.Connection = con;
    con.Open();
    cm.CommandType = CommandType.Text;
    cm.CommandText = "select * from plants where p_id=@Id ";
    cm.Parameters.AddWithValue("@Id", lbl1); 
    SqlDataReader dr1 = cm.ExecuteReader();
    if (dr1.HasRows)
    { 
        while (dr1.Read())
        {                     
            dscpp.Text = dr1["descp"].ToString();
        }
    }
    dr1.Close();
    con.Close(); 
}

But it shows nothing. kindly check given code.

Posted 6 months ago

Hi fkz2899,

Since you want to display only deccription field there is no need to use ExecuteReader. You can simply use ExecuteScalar.

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <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() {
            $('[id*=myModal]').modal('show');
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:GridView ID="GridView2" DataKeyNames="EmployeeID" AutoGenerateColumns="false"
        CssClass="table table-striped table-hover" GridLines="None" runat="server">
        <Columns>
            <asp:TemplateField HeaderText="pid" ItemStyle-Width="50px" HeaderStyle-BackColor="Black"
                HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <asp:Label ID="pid" runat="server" Text='<%#Eval("EmployeeID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Plant Name" ItemStyle-Width="50px" HeaderStyle-BackColor="Black"
                HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <asp:Label ID="pname" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText=" Photo" ItemStyle-Width="70px" HeaderStyle-BackColor="Black"
                HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <asp:Image ID="Image1" Width="150px" Height="150px" DataImageUrlField="Photo" ImageUrl='<%#Eval ("Photo") %>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText=" Category" ItemStyle-Width="50px" HeaderStyle-BackColor="Black"
                HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <asp:Label ID="ct" runat="server" Text='<%#Eval("Address") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="60px" HeaderStyle-BackColor="Black"
                HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <asp:Label ID="qty" runat="server" Text='<%#Eval("City") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Price" ItemStyle-Width="70px" HeaderStyle-BackColor="Black"
                HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <asp:Label ID="price" runat="server" Text='<%#Eval("Country") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Description" HeaderStyle-BackColor="Black" HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="View" CssClass="btn btn-info"
                        OnClick="Display"></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Action" ItemStyle-Width="150px" HeaderStyle-BackColor="Black"
                HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <a href="?id=<%#Eval("EmployeeID") %>">
                        <asp:Button ID="btnEdit" runat="server" Text="Edit" CssClass="btn btn-primary" />
                    </a>
                    <asp:Button ID="btndelete" runat="server" OnClientClick="return confirm('Are you sure you want to delete this?');"
                        Text="Delete" CssClass="btn btn-danger" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <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">
                            Description</h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                            <div class="form-group">
                                <asp:Label ID="lbldesc" runat="server" Font-Size="Large" Text="Description"></asp:Label>
                                <br />
                                <asp:Label ID="dscpp" runat="server" Text=""></asp:Label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnSave" runat="server" Text="OK" CssClass="btn btn-success" />
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[1].ConnectionString);
        SqlCommand cm = new SqlCommand();
        cm.Connection = con;
        con.Open();
        cm.CommandType = CommandType.Text;
        cm.CommandText = "SELECT EmployeeID,FirstName+' '+LastName Name,Photo,Address,City,Country FROM Employees";
        GridView2.DataSource = cm.ExecuteReader();
        GridView2.DataBind();
        con.Close();
    }
}

protected void Display(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
    int rowIndex = ((sender as LinkButton).NamingContainer as GridViewRow).RowIndex;
    int lbl1 = Convert.ToInt32(GridView2.DataKeys[rowIndex].Values[0]);
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[1].ConnectionString);
    SqlCommand cm = new SqlCommand();
    cm.Connection = con;
    con.Open();
    cm.CommandType = CommandType.Text;
    cm.CommandText = "SELECT Notes FROM Employees WHERE EmployeeID=@Id ";
    cm.Parameters.AddWithValue("@Id", lbl1);
    dscpp.Text = Convert.ToString(cm.ExecuteScalar());
    con.Close();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings(1).ConnectionString)
        Dim cm As SqlCommand = New SqlCommand()
        cm.Connection = con
        con.Open()
        cm.CommandType = CommandType.Text
        cm.CommandText = "SELECT EmployeeID,FirstName+' '+LastName Name,Photo,Address,City,Country FROM Employees"
        GridView2.DataSource = cm.ExecuteReader()
        GridView2.DataBind()
        con.Close()
    End If
End Sub

Protected Sub Display(ByVal sender As Object, ByVal e As EventArgs)
    ClientScript.RegisterStartupScript(Me.[GetType](), "Pop", "openModal();", True)
    Dim rowIndex As Integer = (TryCast((TryCast(sender, LinkButton)).NamingContainer, GridViewRow)).RowIndex
    Dim lbl1 As Integer = Convert.ToInt32(GridView2.DataKeys(rowIndex).Values(0))
    Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings(1).ConnectionString)
    Dim cm As SqlCommand = New SqlCommand()
    cm.Connection = con
    con.Open()
    cm.CommandType = CommandType.Text
    cm.CommandText = "SELECT Notes FROM Employees WHERE EmployeeID=@Id "
    cm.Parameters.AddWithValue("@Id", lbl1)
    dscpp.Text = Convert.ToString(cm.ExecuteScalar())
    con.Close()
End Sub

Screenshot