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

Last Reply 2 months ago By pandeyism

Posted 2 months 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);
             
         });
    });

 

You are viewing reply posted by: pandeyism 2 months ago.
Posted 2 months 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