How to update DataList record on Button click without page postback using C# in ASP.Net

I have a datalist that holds user record, inside the datalist i have a button that submites the Datalist record to database table, but i want to use Update panel to update the datalist ones the submit button is clicked. see codes

<div>
    <asp:DataList ID="DataInterests" runat="server" OnItemDataBound="DataInterests_ItemDataBound"
        Width="100%">
        <ItemTemplate>
            <div class="box box box-solid direct-chat direct-chat " style="margin-bottom: 8px">
                <asp:Image ID="Imagesp" Text='<%#Eval("ImageBanner")%>' runat="server" src='<%#getSRCSPONSORED(Container.DataItem)%>'
                    class="    gamma-container animated slideInLeft" Style="background-repeat: no-repeat;"
                    alt="" data-aria-label-part="" background-image='<%# ("../BannerImage/") %>'
                    ImageAlign="TextTop" Width="100%" />
                <div class="" style="position: absolute; bottom: 100px; top: 50px; left: 101px; right: 45px">
                    <asp:Image ID="Imagepro" Text='<%#Eval("ImageName")%>' runat="server" src='<%#getSRCCLUBPHOTOS(Container.DataItem)%>'
                        class=" img-circle   animated zoomIn " Style="background-repeat: no-repeat; border-color: #FFFFFF;
                        border-width: 2px; border-style: Solid;" alt="" data-aria-label-part="" background-image='<%# ("../PROFILEPHOTOS/") %>'
                        Height="60px" Width="60px" />
                    <div class="" style="position: relative; right: 82px; bottom: 55px; left: 48px">
                        <asp:Label ID="Label27" runat="server" Text="" CssClass=" " ForeColor="White" Font-Size="Large"></asp:Label>
                    </div>
                </div>
                <div class=" well-sm " style="">
                    <div class="  gamma-container " style="width: 100%; clear: both;">
                        <asp:LinkButton ID="btnphotos" runat="server">
                <div style="overflow:hidden; overflow-y:hidden; overflow-x:hidden">
                    </div>
                        </asp:LinkButton></div>
                    <span class="caption">
                        <div style="margin-top: 20px">
                            <asp:Label ID="lblName" Text='<%#Eval("Name") %>' runat="server" CssClass="h3" />
                            <asp:Label ID="hfRecommId" Text='<%#Eval("UserName") %>' runat="server" />
                        </div>
                        <p>
                        </p>
                        <p>
                            <asp:LinkButton ID="btnRecom" runat="server" CssClass="btn btn-primary">
                                <asp:Label ID="Label45" runat="server" Text="" CssClass="glyphicon glyphicon-plus"></asp:Label>
                                Submit
                            </asp:LinkButton>
                            <a href="#" class="btn">Action</a></p>
                    </span>
                </div>
            </div>
        </ItemTemplate>
    </asp:DataList>
    <div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('[id*=btnRecom]').click(function () {
                    var obj = {};
                    obj.username = $(this).closest('tr').find('[id*=hfRecommId]').text();
                    obj.name = $(this).closest('tr').find("[id*=lblName]").text();
                    var rowIndex = $(this).closest('tr')[0].rowIndex;
                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/OnRecommended",
                        data: JSON.stringify(obj),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            // Here populate your all records.
                            //As per your need data here
                        },
                        failure: function (response) {
                            alert(response.d);
                        },
                        error: function (response) {
                            alert(response.d);
                        }
                    });
                    return false;
                });
            });
        </script>
    </div>
</div>

public static List<Records> OnRecommended(string username, string name)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = new SqlCommand("Insert into Customers Values(@UserName,@Name)", con);
    cmd.Parameters.AddWithValue("@UserName", username);
    cmd.Parameters.AddWithValue("@Name", name);
    con.Open();
    cmd.ExecuteNonQuery();
    con.Close();
    List<Records> records = GetRecords();
    return records;
}
 
public static List<Records> GetRecords()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = new SqlCommand("Select Name as UserName,Name From Customers", con);
    cmd.Connection = con;
    List<Records> records = new List<Records>();
    con.Open();
    SqlDataReader sdr = cmd.ExecuteReader();
    while (sdr.Read())
    {
        records.Add(new Records
        {
            UserName = sdr["UserName"].ToString(),
            Name = sdr["Name"].ToString(),
        });
    }
 
    con.Close();
    return records;
}
 
public class Records
{
    public string UserName { get; set; }
    public string Name { get; set; }
}