Get Anchor tag HREF (Text) on jQuery DataTable row click in ASP.Net

Last Reply one month ago By pandeyism

Posted one month ago

how to get link from anchor tag to textbox in jquery datatable.

here when i tried i am getting full anchor tag to textbox.

i want to bind only link address from anchor tag to textbox.

Edit Update row in jQuery DataTables using Ajax JSON and WebService in ASP.Net

    $(document).ready(function () {
        $.ajax({
            url: '<%= Page.ResolveUrl("~/WebService.asmx/GetFiles")%>',
            method: 'post',
            dataType: 'json',
            success: function (data) {
                $('#datatable').dataTable({
                    paging: true,
                    sort: true,
                    pageLength: 3,
                    searching: true,
                    data: data,
                    columns: [
                        { 'data': 'Id' },
                        { 'data': 'Name' },
                          { 'data': 'link',
                             'render': function (data, type, row, meta)
                             {
                                 return '<a class="btn btn-info" role="button" href="' + "//" + row.link + '" target="_blank">click </a>'
                             }
                         }
                    ]
                });
            }, error: function (response) {
                alert(response.responseText);
            }
        });
        $('body').on('click', '[id*=btnEdit]', function () {
             var data = $(this).parents('tr').find('td');
             var name = data.eq(1).html()
             var link = data.eq(2).getAttribute('href');//not working
             // var href = $(this).attr('href');
             $('[id*=TxtedtStrnameedit]').val(name); 
             $('[id*=TxtedtStrLinkedit]').val(link);
             
         });
    });

 

Posted one month ago

Hi jovceka,

Refer below sample.

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.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: '<%= Page.ResolveUrl("~/WebService.asmx/GetFiles")%>',
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $('#datatable').dataTable({
                        paging: true,
                        sort: true,
                        pageLength: 3,
                        searching: true,
                        data: data,
                        columns: [
                        { 'data': 'Id' },
                        { 'data': 'Name' },
                          {
                              'data': 'link',
                              'render': function (data, type, row, meta) {
                                  return '<a id="lnk" class="btn btn-info" role="button" href="' + "/" + row.Link + '" target="_blank">click </a>'
                              }
                          }
                    ]
                    });
                }, error: function (response) {
                    alert(response.responseText);
                }
            });
            $('body').on('click', '[id*=lnk]', function () {
                var data = $(this).parents('tr').find('td');
                var name = data.eq(1).html()
                var link = $(data.eq(2)).find('a').attr('href');
                $('[id*=TxtedtStrnameedit]').val(name);
                $('[id*=TxtedtStrLinkedit]').val(link);
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    Name : <input type="text" id="TxtedtStrnameedit" /><br />
    Link : <input type="text" id="TxtedtStrLinkedit" />
    <div style="width: 100%; border: 1px solid black; padding: 3px">
        <table id="datatable">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Image</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Image</th>
                </tr>
            </tfoot>
        </table>
    </div>
    </form>
</body>
</html>

WebService

C#

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public class File
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Link { get; set; }
    }

    [WebMethod]
    public void GetFiles()
    {
        string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        List<File> files = new List<File>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SELECT id,Name,path FROM tblFilesPath", con);
            cmd.CommandType = CommandType.Text;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                File file = new File();
                file.Id = Convert.ToInt32(rdr["id"]);
                file.Name = rdr["Name"].ToString();
                file.Link = rdr["path"].ToString();
                files.Add(file);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(files));
    }
}

VB.Net

Imports System.Web
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services
Imports System.Web.Services.Protocols
  
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService
  
    Public Class File
        Public Property Id As Integer
        Public Property Name As String
        Public Property Link As String
    End Class
  
    <WebMethod()> _
    Public Sub GetFiles()
        Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim files As List(Of File) = New List(Of File)()
        Using con As SqlConnection = New SqlConnection(cs)
            Dim cmd As SqlCommand = New SqlCommand("SELECT id,Name,path FROM tblFilesPath", con)
            cmd.CommandType = CommandType.Text
            con.Open()
            Dim rdr As SqlDataReader = cmd.ExecuteReader()
            While rdr.Read()
                Dim file As File = New File()
                file.Id = Convert.ToInt32(rdr("id"))
                file.Name = rdr("Name").ToString()
                file.Link =  rdr("path").ToString()
                files.Add(file)
            End While
        End Using
        Dim js As JavaScriptSerializer = New JavaScriptSerializer()
        Context.Response.Write(js.Serialize(files))
    End Sub
End Class

Screenshot