I have a table in cshtml which contain simple data and filled by jquery response by id in ThI want to know how jquery can handle draw anchor href by using id th in my table with condition if object response not nulllttable id34tblwellcore34 class34table tablevcenter cardtable34gt ltthead class34tablesuccess34 style34backgroundwhite34gt lttrgt ltth style34fontsize 80 fontweight 70034gtNoltthgt l

Add Anchor Link in HTML Table cell using jQuery Ajax in ASP.Net MVC

ruben000...

SOLVED CLOSED ACTIVE ANSWERED
User: ruben00000
Posted: on Aug 06, 2024 06:55 AM
Forum: ASP.Net MVC
Answer: 1
Views: 624
Sample Code: Download

I have a table in cshtml which contain simple data and filled by jquery response by id in Th

I want to know how jquery can handle draw anchor href by using id th in my table with condition if object response not null

<table id="_tblwellcore" class="table table-vcenter card-table">
    <thead class="table-success" style="background:white;">
        <tr> 
            <th style="font-size: 80%; font-weight: 700;">No</th>
            <th style="font-size: 80%; font-weight: 700;">Data</th>
        </tr>
    </thead>
    <tr>  
        <td id="_no"></td>
        <td id="_data"></td>
    </tr>
</table>

function getdata() {
   $.ajax({
       cache: false,
       type: 'GET',
       url: '/Home/GetData',
       data: { uwi: uwi },
       contentType: 'application/json; charset=utf-8',
       datatype: 'json',
       success: function (response) {
          $.each(response, function (i, obj) {
            $(row).find("#_no").text(obj.no== null ? '-' : obj.no);
            if(obj.data != null){
                //draw anchor href
                //ex : <a href="@Url.Action("ViewData", "Home",new{ filename = obj.no})" target="_blank"><i class="fa fa-eye" aria-hidden="true"></i></a>
            }
          }
       }
   })
}

i wish someone can help me. thanks

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Aug 06, 2024 10:57 PM
Report

Hi ruben00000,

Refer below example.

Database

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

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.Customers.ToList());
    }

    public ActionResult GetData()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return Json(entities.Customers.Take(5).ToList(), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult ViewData(string name)
    {
        return View();
    }
}

View

@model IEnumerable<Customer>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body class="container">
    <table id="_tblwellcore" class="table table-vcenter card-table">
        <thead class="table-success">
            <tr>
                <th style="font-size: 80%; font-weight: 700;">No</th>
                <th style="font-size: 80%; font-weight: 700;">Data</th>
            </tr>
        </thead>
        <tr>
            <td id="_no"></td>
            <td id="_data"></td>
        </tr>
    </table>
    <script type="text/javascript">
        $(function () {
            getdata();
        });

        function getdata() {
            $.ajax({
                cache: false,
                type: 'GET',
                url: '/Home/GetData',
                data: {},
                contentType: 'application/json; charset=utf-8',
                datatype: 'json',
                success: function (response) {
                    var row = $("[id*=_tblwellcore] tbody tr:first-child").clone(true);
                    $("[id*=_tblwellcore] tbody tr:first-child").remove();
                    $.each(response, function (i, obj) {
                        $("td", row).eq(0).html(obj.CustomerID);
                         var link = '@Url.Action("ViewData", "Home", new { name = "-1" })';
                        link = link.replace("-1", encodeURIComponent(obj.ContactName));
                        $("td", row).eq(1).html("<a href='" + link + "' target='_blank'>View</a>");
                        $("[id*=_tblwellcore] tbody").append(row);
                        row = $("[id*=_tblwellcore] tbody tr:first-child").clone(true);
                    });
                }
            })
        }
    </script>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Add Anchor Link in HTML Table cell using jQuery Ajax in ASP.Net MVC

Company

Explore

Follow us

Contact Us