Populate (Bind) HTML Table first row in TextBoxes on Page Load using jQuery in ASP.Net MVC

malar

SOLVED CLOSED ACTIVE ANSWERED
User: malar
Posted: on Sep 12, 2021 03:56 AM
Forum: ASP.Net MVC
Answer: 1
Views: 5290
Sample Code: Download

Hi Team,

In View Page, Based on HTML table row click , corresponding data’s are binding to labels.

But when page loads , initially labels are empty and if click HTML table row it is binding perfectly.

How to make HTML table first row as selected one and binding the same to labels in page load itself.

This is the coding i used to get the data on row click. This need to reflect on pageload without rowclick for first row in HTML table.

Let me know how to achieve this.

Thanks in advance.

function getdata() {
    var table = document.getElementById("tbl_ProjectDetails");
    var rows = table.rows;
    $("#tbl_ProjectDetails tbody").delegate("tr", "click", function (e) {
        var f0 = document.getElementById('lblActivityCode');
        var f1 = document.getElementById('txtPROJECTFROMDATE');
        var f2 = document.getElementById('txtPROJECTTODATE');
        var arr = $('#tbl_ProjectDetails').dataTable().fnGetData($(this));

        f0.innerHTML = (arr[0]).replace(/<\/?span[^>]*>/g, "");
        f1.innerHTML = (arr[1]).replace(/<\/?span[^>]*>/g, "");
        f2.innerHTML = (arr[2]).replace(/<\/?span[^>]*>/g, "");
    });
}

<table class="table table-striped table-bordered table-hover" id="tbl_ProjectDetails">
<thead>
<tr>
    <th>ActivityCode</th>
    <th>FromDate</th>
    <th>ToDate</th>
    <th class="noExl"></th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.ActivityDetails)
{
    <tr>
        <td><span>@item.ActivityCode</span></td>
        <td><span>@item.PROJECTFROMDATE</span></td>
        <td><span>@item.PROJECTTODATE</span></td>
        <td class="noExl">
            <button type="button" class="btn btn-warning" onclick="getdata();">Details</button>
        </td>
    </tr>
}
</tbody>
</table>

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

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on Sep 13, 2021 07:22 AM
Report

Hi malar,

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

Model

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<Customer> customers = new List<Customer>();
        customers.Add(new Customer { Id = 1, Name = "John Hammond", Country = "United States" });
        customers.Add(new Customer { Id = 2, Name = "Mudassar Khan", Country = "India" });
        customers.Add(new Customer { Id = 3, Name = "Suzanne Mathews", Country = "France" });
        customers.Add(new Customer { Id = 4, Name = "Robert Schidner", Country = "Russia" });
        ViewBag.Customers = customers;
        return View();
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table class="table table-striped table-bordered table-hover" id="tblCustomers">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Country</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var customer in ViewBag.Customers)
            {
                <tr>
                    <td><span>@customer.Id</span></td>
                    <td><span>@customer.Name</span></td>
                    <td><span>@customer.Country</span></td>
                    <td>
                        <button type="button" class="btn btn-warning" onclick="getdata();">Details</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <hr />
    <table>
        <tr>
            <th>Id</th>
            <td><span id="lblId"></span></td>
        </tr>
        <tr>
            <th>Name</th>
            <td><input type="text" id="txtName" /></td>
        </tr>
        <tr>
            <th>Country</th>
            <td><input type="text" id="txtCountry" /></td>
        </tr>
    </table>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var row = $("#tblCustomers tbody tr").eq(0);
            $('#lblId').html($(row).find('td').eq(0).find('span').html());
            $('#txtName').val($(row).find('td').eq(1).find('span').html());
            $('#txtCountry').val($(row).find('td').eq(2).find('span').html());
        });
        function getdata() {
            $("#tblCustomers tbody tr").on("click", function (e) {
                $('#lblId').html($(this).find('td').eq(0).find('span').html());
                $('#txtName').val($(this).find('td').eq(1).find('span').html());
                $('#txtCountry').val($(this).find('td').eq(2).find('span').html());
            });
        }
    </script>
</body>
</html>

Screenshot

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

Populate (Bind) HTML Table first row in TextBoxes on Page Load using jQuery in ASP.Net MVC

Company

Explore

Follow us

Contact Us