Open (Show) modal popup on nested Repeater Button Click using C# and VB.Net in ASP.Net

RichardSa
 
on Sep 12, 2021 11:10 PM
Sample_109813.zip
760 Views

Hello Forum,

I have a datalist with nested repeater control. The Datalist displays the questions based on the AdminName and EventName. Then the repeater will display names and image of each person and based on the Admin name and event URL.  

I have two buttons (Edit and Delete Buttons) inside the datalist. These buttons will be used to insert Names and Images of each person into the "Names" and "Imgdata" columns of the table.

I want to link these (Edit and Delete) buttons to each Question inside the Datalist control, so that when a user clicks on the "Add" button a popup window will appear where name and image will be added to that particular Question in the DataList.

HTML

<asp:Label ID="Adminlbl" runat="server" Text="Richard" />
<asp:Label ID="electlbl" runat="server" Text="2021 Youth Elections" />
<asp:DataList runat="server" ID="dlquestion" CssClass="row" CellPadding="4" OnItemDataBound="dlquestion_ItemDataBound" Width="100%">
    <ItemTemplate>
        <div class="card p-3 mb5 bg-white rounded" style="border: 1px solid #d1d5d4; margin: 0 auto; padding: 10px; width: 100%; border-radius: 10px;">
            <asp:Label ID="lblQuestion" Text='<%# Eval("BallotQuestion") %>' runat="server" Font-Bold="true" Font-Names="Varela Round" Font-Size="16pt" />
            <asp:Repeater ID="rptOptions" runat="server">
                <ItemTemplate>
                    <div runat="server" id="innerTable">
                        <div class="" id="middleTable">
                            <img alt="lock" src="images/home/lock.png" height="80" />
                            <br />
                            <div>
                                <asp:Label ID="Label1" runat="server" Text="NAME: " Font-Bold="true" Font-Size="13pt"></asp:Label>
                                <asp:Label ID="candlbl" runat="server" Text='<%# Eval("CandidateName") %>' />
                            </div>
                            <br />
                            <div>
                                <asp:Label ID="Label2" runat="server" Text="BIO: " Font-Bold="true" Font-Size="13pt"></asp:Label>
                                <asp:Label ID="biolabel" Text='<%# Eval("Shortbio") %>' runat="server" />
                            </div>
                            <br />
                            <br />
                        </div>
                        <div >
                            <br />
                            <asp:Button ID="Button2" runat="server" Text="Edit" CssClass="btn btn-info" Font-Size="10pt" />
                            <asp:Button ID="Button3" runat="server" Text="Delete" CssClass="btn btn-danger" Font-Size="10pt" />
                        </div>
                        <hr />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
            <asp:Button ID="Button1" runat="server" Text="Add Option" CssClass="btn btn-primary" />
        </div>
    </ItemTemplate>
</asp:DataList>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string query = "SELECT DISTINCT BallotQuestion FROM Election WHERE AdminName = '" + Adminlbl.Text + "' AND ElectionName = '" + electlbl.Text + "'";
        DataTable dt = GetData(query);
        dlquestion.RepeatColumns = dt.Rows.Count;
        dlquestion.DataSource = dt;
        dlquestion.DataBind();
        dlquestion.RepeatColumns = 1;
        dlquestion.RepeatDirection = RepeatDirection.Vertical;
    }
}
 
protected void dlquestion_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        string BallotQuestion = (e.Item.FindControl("lblQuestion") as Label).Text;
        Repeater rptOptions = e.Item.FindControl("rptOptions") as Repeater;
        string query = "SELECT CandidateName, Shortbio FROM Election WHERE BallotQuestion = '" + BallotQuestion + "' AND AdminName = '" + Adminlbl.Text + "' AND ElectionName = '" + electlbl.Text + "'";
        rptOptions.DataSource = GetData(query);
        rptOptions.DataBind();
    }
}
 
private DataTable GetData(string query)
{
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection("Server=.;DataBase=Test;UID=sa;PWD=pass@123;"))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 13, 2021 05:41 AM
on Sep 14, 2021 12:20 AM

Hi RichardSa,

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

HTML

<asp:Label ID="Adminlbl" runat="server" Text="Richard" />
<asp:Label ID="electlbl" runat="server" Text="2021 Youth Elections" />
<asp:DataList runat="server" ID="dlquestion" CssClass="row" CellPadding="4" OnItemDataBound="dlquestion_ItemDataBound" Width="100%">
    <ItemTemplate>
        <div class="card p-3 mb5 bg-white rounded" style="border: 1px solid #d1d5d4; margin: 0 auto; padding: 10px; width: 100%; border-radius: 10px;">
            <asp:Label ID="lblQuestion" Text='<%# Eval("BallotQuestion") %>' runat="server" Font-Bold="true" Font-Names="Varela Round" Font-Size="16pt" />
            <asp:Repeater ID="rptOptions" runat="server">
                <ItemTemplate>
                    <div runat="server" id="innerTable">
                        <div class="" id="middleTable">
                            <img alt="lock" src="images/home/lock.png" height="80" />
                            <br />
                            <div>
                                <asp:HiddenField ID="hfElectionID" runat="server" Value='<%# Eval("Id") %>' />
                                <asp:Label ID="Label1" runat="server" Text="NAME: " Font-Bold="true" Font-Size="13pt"></asp:Label>
                                <asp:Label ID="candlbl" runat="server" Text='<%# Eval("CandidateName") %>' />
                            </div>
                            <br />
                            <div>
                                <asp:Label ID="Label2" runat="server" Text="BIO: " Font-Bold="true" Font-Size="13pt"></asp:Label>
                                <asp:Label ID="biolabel" Text='<%# Eval("Shortbio") %>' runat="server" />
                            </div>
                            <br />
                            <br />
                        </div>
                        <div>
                            <br />
                            <asp:Button ID="Button2" runat="server" Text="Edit" CssClass="btn btn-info" Font-Size="10pt" OnClick="OnEdit" />
                            <asp:Button ID="Button3" runat="server" Text="Delete" CssClass="btn btn-danger" Font-Size="10pt" />
                        </div>
                        <hr />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
            <asp:Button ID="Button1" runat="server" Text="Add Option" CssClass="btn btn-primary" />
        </div>
    </ItemTemplate>
</asp:DataList>
<div id="dialog" style="display: none">
    <asp:HiddenField ID="hfID" runat="server" />
    Name: <asp:TextBox runat="server" ID="txtName" />
    <asp:FileUpload ID="fuUpload" runat="server" />
    <asp:Button Text="Update" runat="server" OnClick="OnUpdate" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
    function ShowPopup() {
        $("#dialog").dialog({
            title: "Update record",
            modal: true,
            width: "480"
        });
    }
</script>

Namespaces

C#

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

VB.Net

Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string query = "SELECT DISTINCT BallotQuestion FROM Election WHERE AdminName = '" + Adminlbl.Text + "' AND ElectionName = '" + electlbl.Text + "'";
        DataTable dt = GetData(query);
        dlquestion.RepeatColumns = dt.Rows.Count;
        dlquestion.DataSource = dt;
        dlquestion.DataBind();
        dlquestion.RepeatColumns = 1;
        dlquestion.RepeatDirection = RepeatDirection.Vertical;
    }
}

protected void dlquestion_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        string BallotQuestion = (e.Item.FindControl("lblQuestion") as Label).Text;
        Repeater rptOptions = e.Item.FindControl("rptOptions") as Repeater;
        string query = "SELECT Id,CandidateName, Shortbio FROM Election WHERE BallotQuestion = '" + BallotQuestion + "' AND AdminName = '" + Adminlbl.Text + "' AND ElectionName = '" + electlbl.Text + "'";
        rptOptions.DataSource = GetData(query);
        rptOptions.DataBind();
    }
}

private DataTable GetData(string query)
{
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection("Server=.;DataBase=Test;UID=sa;PWD=pass@123;"))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

protected void OnEdit(object sender, EventArgs e)
{
    RepeaterItem item = (sender as Button).NamingContainer as RepeaterItem;
    hfID.Value = (item.FindControl("hfElectionID") as HiddenField).Value;
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}

protected void OnUpdate(object sender, EventArgs e)
{
    int id = Convert.ToInt32(hfID.Value);
    string name = txtName.Text;
    // Cod for updating the name and image based on the id.
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim query As String = "SELECT DISTINCT BallotQuestion FROM Election WHERE AdminName = '" _
                & Adminlbl.Text & "' AND ElectionName = '" & electlbl.Text & "'"
        Dim dt As DataTable = GetData(query)
        dlquestion.RepeatColumns = dt.Rows.Count
        dlquestion.DataSource = dt
        dlquestion.DataBind()
        dlquestion.RepeatColumns = 1
        dlquestion.RepeatDirection = RepeatDirection.Vertical
    End If
End Sub

Protected Sub dlquestion_ItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim BallotQuestion As String = TryCast(e.Item.FindControl("lblQuestion"), Label).Text
        Dim rptOptions As Repeater = TryCast(e.Item.FindControl("rptOptions"), Repeater)
        Dim query As String = "SELECT Id,CandidateName, Shortbio FROM Election WHERE BallotQuestion = '" _
                & BallotQuestion & "' AND AdminName = '" & Adminlbl.Text & "' AND ElectionName = '" & electlbl.Text & "'"
        rptOptions.DataSource = GetData(query)
        rptOptions.DataBind()
    End If
End Sub

Private Function GetData(ByVal query As String) As DataTable
    Dim cmd As SqlCommand = New SqlCommand(query)
    Using con As SqlConnection = New SqlConnection("Server=.;DataBase=Test;UID=sa;PWD=pass@123;")
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

Protected Sub OnEdit(ByVal sender As Object, ByVal e As EventArgs)
    Dim item As RepeaterItem = TryCast(TryCast(sender, Button).NamingContainer, RepeaterItem)
    hfID.Value = (TryCast(item.FindControl("hfElectionID"), HiddenField)).Value
    ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopup();", True)
End Sub

Protected Sub OnUpdate(ByVal sender As Object, ByVal e As EventArgs)
    Dim id As Integer = Convert.ToInt32(hfID.Value)
    Dim name As String = txtName.Text
    ' Cod for updating the name and image based on the id.
End Sub

Screenshot