Open AnchorLink HREF (URL) in Bootstrap Modal Popup in ASP.Net using jQuery

Hi ramco1917,

Please refer below sample.

Database

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

Download Northwind Database

HTML

HOME

<div class="container-fluid">
    <asp:PlaceHolder ID="PlaceHolderTable" runat="server"></asp:PlaceHolder>
</div>
<div id="modal_form_horizontal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h5 class="modal-title">Add/Update Record</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>&nbsp;
            </div>
            <div class="form-horizontal">
                <div class="modal-body" style="padding-left: 40px;">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="modalUrl">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function BindData(ele) {
        $('#modal_form_horizontal').modal('show').find('.modalUrl').html('');
    };

    $('body').on('click', '#btnEdit', function (e) {
        $('#modal_form_horizontal').find('.modal-title').html('Customer Orders');
        $('#modal_form_horizontal').modal('show').find('.modalUrl').load($(this).attr('href'));
        return false;
    });
</script>

Default

<asp:Repeater ID="rptOrders" runat="server">
    <HeaderTemplate>
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Order No</th>
                    <th>Price</th>
                </tr>
            </thead>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td class="customerID">
                <%# Eval("CustomerID") %>
            </td>
            <td class="orderID">
                <%# Eval("OrderID")%>
            </td>
            <td class="freight">
                <%# Eval("Freight")%>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Namespaces

C#

using System.Data; 
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Web.Services;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Text
Imports System.Web.Services

Code

C#

Home

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        List<Data> items = new List<Data>();
        items.Add(new Data { CustomerId = "ALFKI", ContactName = "Alfreds Futterkiste", Country = "UK" });
        items.Add(new Data { CustomerId = "ANATR", ContactName = "Around the Horn", Country = "Germany" });
        items.Add(new Data { CustomerId = "ANTON", ContactName = "Island Trading", Country = "France" });

        StringBuilder htmlTable = new StringBuilder();
        htmlTable.Append("<table class='table table-bordered table-hover datatable-highlight' id='tbldata'>");
        htmlTable.Append("<thead><tr><th style='display:none;'>#</th><th>Name</th><th>Country</th><th class='text-center nosort'>Actions</th><th class='text-center nosort'>Add</th></tr></thead>");
        htmlTable.Append("<tbody>");
        foreach (var colum in items)
        {
            htmlTable.Append("<tr>");
            htmlTable.Append("<td style='display:none;'>" + colum.CustomerId + "</td>");
            htmlTable.Append("<td>" + colum.ContactName + "</td>");
            htmlTable.Append("<td>" + colum.Country + "</td>");
            htmlTable.Append("<td class='text-center'> <a id='btnEdit' style='cursor:pointer;' class='list-icons-item text-primary-600' title='Edit' href='Default.aspx?val=" + colum.CustomerId + "'><i class='icon-pencil7 mr-1'></i> Edit </a>" + "</td>");
            htmlTable.Append("<td class='text-center'> <a id='btnAdd' style='cursor:pointer;' class='list-icons-item text-primary-600' data-toggle='modal' data-backdrop='static' data-keyboard='false' onclick='BindData(this);'><i class='icon-pencil7 mr-1'></i>Add</a></td>");
            htmlTable.Append("</tr>");
        }
        htmlTable.Append("</tbody>");
        htmlTable.Append("</table>");

        PlaceHolderTable.Controls.Add(new Literal { Text = htmlTable.ToString() });
    }
}

public class Data
{
    public string CustomerId { get; set; }
    public string ContactName { get; set; }
    public string Country { get; set; }
}

Defualt

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT CustomerID,OrderID,Freight FROM [Orders] WHERE CustomerID = @Id", con))
            {
                cmd.Parameters.AddWithValue("@Id", Request.QueryString["val"]);
                SqlDataAdapter sdr = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                sdr.Fill(dt);
                rptOrders.DataSource = dt;
                rptOrders.DataBind();
            }
        }
    }
}

VB.Net

Home

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString

        Using con As SqlConnection = New SqlConnection(constr)

            Using cmd As SqlCommand = New SqlCommand("SELECT CustomerID,OrderID,Freight FROM [Orders] WHERE CustomerID = @Id", con)
                cmd.Parameters.AddWithValue("@Id", Request.QueryString("val"))
                Dim sdr As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim dt As DataTable = New DataTable()
                sdr.Fill(dt)
                rptOrders.DataSource = dt
                rptOrders.DataBind()
            End Using
        End Using
    End If
End Sub

Defualt

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim items As List(Of Data) = New List(Of Data)()
        items.Add(New Data With {
            .CustomerId = "ALFKI",
            .ContactName = "Alfreds Futterkiste",
            .Country = "UK"
        })
        items.Add(New Data With {
            .CustomerId = "ANATR",
            .ContactName = "Around the Horn",
            .Country = "Germany"
        })
        items.Add(New Data With {
            .CustomerId = "ANTON",
            .ContactName = "Island Trading",
            .Country = "France"
        })
        Dim htmlTable As StringBuilder = New StringBuilder()
        htmlTable.Append("<table class='table table-bordered table-hover datatable-highlight' id='tbldata'>")
        htmlTable.Append("<thead><tr><th style='display:none;'>#</th><th>Name</th><th>Country</th><th class='text-center nosort'>Actions</th><th class='text-center nosort'>Add</th></tr></thead>")
        htmlTable.Append("<tbody>")

        For Each colum In items
            htmlTable.Append("<tr>")
            htmlTable.Append("<td style='display:none;'>" & colum.CustomerId & "</td>")
            htmlTable.Append("<td>" & colum.ContactName & "</td>")
            htmlTable.Append("<td>" & colum.Country & "</td>")
            htmlTable.Append("<td class='text-center'> <a id='btnEdit' style='cursor:pointer;' class='list-icons-item text-primary-600' title='Edit' href='Default.aspx?val=" & colum.CustomerId & "'><i class='icon-pencil7 mr-1'></i> Edit </a>" & "</td>")
            htmlTable.Append("<td class='text-center'> <a id='btnAdd' style='cursor:pointer;' class='list-icons-item text-primary-600' data-toggle='modal' data-backdrop='static' data-keyboard='false' onclick='BindData(this);'><i class='icon-pencil7 mr-1'></i>Add</a></td>")
            htmlTable.Append("</tr>")
        Next

        htmlTable.Append("</tbody>")
        htmlTable.Append("</table>")
        PlaceHolderTable.Controls.Add(New Literal With {
            .Text = htmlTable.ToString()
        })
    End If
End Sub

Public Class Data
    Public Property CustomerId As String
    Public Property ContactName As String
    Public Property Country As String
End Class

Screenshot