How to put a link inside HTML table, when clicked on navigate to a view (ID)

Question

MVC project.

Here is my View for the search. This will display the information as the user enters his mobile nr. Js code to follow.

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                Enter Your Mobile Number:<input id="txtMobileNumber" type="text" />
            </div>
        </div>
    </nav>
    <div>            
        <br />
        <br />
        <table class="table table-striped" id="tblCustomers" cellpadding="0" cellspacing="0">
            <tr>
                <th style="width: 90px">employee_name</th>
                <th style="width: 120px">mobile_number</th>
                <th style="width: 90px">service_plan</th>
                <th style="width: 90px">usuge_limit</th>
            </tr>
        </table>

Javascript code that completes the search:

    $(function () {            
        $("#txtMobileNumber").keyup(function () {
            GetCustomers();
        });
    });
    function GetCustomers() {
        var customerName = $.trim($("#txtMobileNumber").val());
        $.ajax({
            type: "POST",
            url: "/Home/SearchCustomers",
            data: "{customerName:'" + customerName + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (customers) {
                var table = $("#tblCustomers");
                table.find("tr:not(:first)").remove();
                $.each(customers, function (i, customer) {
                    var table = $("#tblCustomers");
                    var row = table[0].insertRow(-1);
                    $(row).append("<td />");
                    $(row).find("td").eq(0).html(customer.employee_name);
                    $(row).append("<td />");
                    $(row).find("td").eq(1).html(customer.mobile_number);
                    $(row).append("</a><td />");
                    $(row).find("td").eq(2).html(customer.service_plan);
                    $(row).append("<td />");
                    $(row).find("td").eq(3).html(customer.usuge_limit);
                });
            }
        });
    }

Now I want, that if I type in a mobile number, the column of the mobile number should be a hyperlink so that a user can click on it to see his info and edit.

Sort of like using an ActionResult to go to /Home/ViewPage/mobilenumberhere

Where can this be added? above or below in Js code?

Answer 1

Please Modify your code in javascript

$('#tblCustomers tbody').html('');
$.each(customers, function (i, customer) {
    $('#tblCustomers tbody').append(
        '<tr>' +
        '<td class="documentType">' + customer.employee_name + '</td> ' +
        '<td style="text-align: left;font-size: x-large;" class=""><a  target="_blank" href="/Home/ViewPage/' + customer.mobile_number + '">' + customer.mobile_number + ' </td>  ' +
        '<td class="releaseDate">' + customer.service_plan + '</td> ' +
        '<td class="releaseDate">' + customer.usuge_limit + '</td> ' +
        '</tr>'
    );

    //-------------- Second Option

    $('#tblCustomers tbody').append(
        '<tr>' +
        '<td class="documentType">' + customer.employee_name + '</td> ' +
        '<td style="text-align: left;font-size: x-large;" class=""><a onClick="fnLoadDetail(this)">' + customer.mobile_number + ' </td>  ' +
        '<td class="releaseDate">' + customer.service_plan + '</td> ' +
        '<td class="releaseDate">' + customer.usuge_limit + '</td> ' +
        '</tr>'
    );


}

    function fnLoadDetail(e) {

        window.open('/Home/ViewPage/' + e.text(),'_blank');

    }