通过Jquery AJAX从web方法获取数据后未选中ASP.NET复选框

Question

I am using Jquery ajax to call a webmethod, this webmethod accesses my database and returns a true or false value. I want the checkbox to be checked or not based on that boolean value that is being returned.

Below is the server side code.

[WebMethod]
public static bool FillData(string emailAddr)
{
    ConnectionUtility ConnectionObj = new ConnectionUtility();
    //Fill modal with correct data from database
    SqlConnection ConState = ConnectionObj.GetConnectionState();
    SqlCommand cmd = new SqlCommand("Select * from tblEmployee where Email='" + emailAddr + "'", ConState);
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    da.Fill(dt);

    string subscriptionUser = dt.Rows[0]["IsSubscriptionUser"].ToString();
    return Convert.ToBoolean(subscriptionUser);
}

Clientside:

function editdata(id, firstname, lastname, email, phonenumber, company, role, empid) {

    document.getElementById("LblHeadderText").innerHTML = "Update";


    <%--  $('#<%=TxtEmail.ClientID%>').attr('readonly', true);--%> //Commented on 12 Dec 2016 to allow user to update username/email 

    jQuery("#<%=TxtId.ClientID%>").val(id);
    jQuery("#<%=TxtFirstName.ClientID%>").val(firstname);
    jQuery("#<%=TxtLastName.ClientID%>").val(lastname);
    jQuery("#<%=TxtEmail.ClientID%>").val(email);

    jQuery("#<%=TxtPhoneNumber.ClientID%>").val(phonenumber);
    jQuery("#<%=DdlAssignRole.ClientID%>").val(role);
    jQuery("#<%=TxtOldAssignedRole.ClientID%>").val(role);

    jQuery("#<%=DpdEmployee.ClientID%>").val(empid);

    jQuery("#<%=btnSubmit.ClientID%>").hide();
    jQuery("#<%=btnUpdate.ClientID%>").show();

    $('[Id*=HfOldEmail]').val(email);

    document.getElementById('<%=btnUpdate.ClientID%>').disabled = false;

    $.ajax({
        type: "GET",
        url: "UserList.aspx/FillData",
        data: JSON.stringify({ emailAddr: email }),
        success: checkCheckBox,
        error: function (r) {
            alert(r.responseText);
        },
        failure: function (r) {
            alert(r.responseText);
        }
    });
}

function checkCheckBox(checked)
{
    $("#<%=chkbxSubscriptionUser%>").prop("checked", checked);
}

I have debugged the server side code and it does work as expected. It returns true or false correctly. I have tried every alternative I can think of, I even tried using session variables.

I'm sure it's an easy fix, but I'm inexperienced with Jquery, and I'm just implementing a feature to an application that was originally contracted out.

Help would be greatly appreciated.

Answer 1

In Application_Start comment below line

//RouteConfig.RegisterRoutes(RouteTable.Routes);

Make sure that you EnablePageMethods in your ScriptManager

<asp:ScriptManager runat="server" EnablePageMethods="true">

Update checkCheckBox function as below

function checkCheckBox(checked)
{
    //$("#<%=chkbxSubscriptionUser%>").prop("checked", checked);
    $("#<%=chkbxSubscriptionUser.ClientID%>").prop('checked', checked);
}

Update AJAX Call

$.ajax({
    type: "POST",
    url: "UserList.aspx/FillData",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ emailAddr: email }),
    dataType: "json",
    success: function (r) {
        checkCheckBox(r.d);
    }
    , error: function (r) {
        alert(r.responseText);
    },
    failure: function (r) {
        alert(r.responseText);
    }
});