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 >
        <div >
            <div >
                Enter Your Mobile Number:<input id="txtMobileNumber" type="text" />
            </div>
        </div>
    </nav>
    <div>            
        <br />
        <br />
        <table  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?

CodePudding user response：

Please Modify your code in javascript

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

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

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


}

    function fnLoadDetail(e) {

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

    }