Populate TextBoxes on Button Click using Web API in ASP.Net

Hello Everyone,

I want to call the Web api when I enter the medical record number in the textbox to fill the remaining data defined in api controller

How can i assign the values in the textboxes instead of the below. can you please let me know. Thanks

My Class:

using System.Collections.Generic;
using System.Linq;
using System.Text;

public class SickLeaveData
{
    public string Pat_MR { get; set; }
    public Boolean IsCitizen { get; set; }
    public string MedicalRecordID { get; set; }
    public string PatientID { get; set; }
}

My Controller: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;

/// <summary>
/// Summary description for SickLeaveController
/// </summary>
public class SickLeaveController : ApiController
{	
     public IEnumerable<SickLeaveData> Get(string Pat_MRnumber)  
     {
         string Pat_MRNo = Pat_MRnumber;  
         return new List<SickLeaveData>  
         {  
             new SickLeaveData{Pat_MR="1308155",IsCitizen=true,MedicalRecordID="1308155",PatientID="01072377730"}
              
         }.Where(s => s.Pat_MR == Pat_MRNo);  
     }  
}  

I want to load data when I enter Mr Nu,ber in the textbox.

Thanks

<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#GetData").click(function () {
            var Id = prompt("Enter Customer Id");
            $("#tblPopulation").show();
            $.ajax({
                url: '/api/Demo',
                dataType: "json",
                type: "Get",
                //contentType: 'application/json; charset=utf-8',  
                data: { Id: Id },
                success: function (data) {
                    var tr;
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        tr = tr + "<tr>";
                        tr = tr + "<td>" + data[i].Pat_MR + "</td>";
                        tr = tr + "<td>" + data[i].IsCitizen + "</td>";
                        tr = tr + "<td>" + data[i].MedicalRecordID + "</td>";
                        tr = tr + "<td>" + data[i].PatientID + "</td>";

                        tr = tr + "</tr>";
                    }
                    $('#tblPopulation').append(tr);
                    tblFormate();
                },
                error: function (xhr) {
                    alert('No Valid Data');
                }
            });
        });
    });

    function tblFormate() {
        var table = $('#tblPopulation').DataTable({
            "lengthMenu": [[5, 10, 50, 100, 150, -1], [5, 10, 50, 100, 150, "All"]]
        });
        //Apply the search  
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).header()).on('keyup change', function () {
                table
            .column(colIdx)
            .search(this.value)
            .draw();
            });
        });
    } 
</script>

My Html:

<table id="tblPopulation" class="table table-bordered"> 
    <tr>
        <td>Id</td>
        <td>
            <input id="Text1" type="text" />
        </td>
    </tr>
    <tr>
        <td>Customer Name</td>
        <td>
            <input id="Text2" type="text" />
        </td>
    </tr>
    <tr>
        <td>Address</td>
        <td>
            <input id="Text3" type="text" />
        </td>
    </tr>
    <tr>
        <td>City</td>
        <td>
            <input id="Text4" type="text" />
        </td>
    </tr>
    <tr>
        <td>Pincode</td>
        <td>
            <input id="Text5" type="text" />
        </td>
    </tr> 
</table>
<input type="button" id="GetData" value="Get Data" /> <br />