如何修正JavaScript代码以调用ASCX.cs中的ASP.NET Ajax方法？

问题现状 #

尝试通过JavaScript调用FormUI.ascx.cs中的CheckValidity Ajax方法，但方法无法触发。当前JS代码位于Common.js：

function CheckValidityofId(lookupFunction, fromdate, Id) {
  
   //FormUI是包含CheckValidity方法的ascx.cs文件
   lookupFunction='FormUI.CheckValidity';

    callback = function(response) {
    
        if (response.error) {
            alert(response.error);
        }
        else {
            if (response.value =="NotAssociated")
            {
            document.getElementById(MessageID).innerText="编号未关联";
            }
            else
            {
            document.getElementById(MessageID).innerText="此编号不符合条件";
            }
        }
    }
    if (fromdate.length > 0 && Id.length >0) {
        eval(lookupFunction + "('" + fromdate + "','" + Id + "')");
    }
    return false;
}

后台ASCX代码：

public partial class FormUI : UIView
{
    [Ajax.AjaxMethod()]
    public string CheckValidity(string FromDate, string Id)
    {
      // 业务逻辑实现
    }
}

问题原因 #

1. ASCX控件的Ajax方法注册限制：ASP.NET Ajax的[AjaxMethod]默认仅为页面（Page类）生成客户端代理脚本，用户控件（ASCX）的方法不会自动生成可直接调用的客户端方法。
2. 调用方式错误：当前代码用eval拼接调用，但未传递回调函数，且FormUI.CheckValidity并非可直接访问的客户端方法。
3. 未定义变量：JS中的MessageID未声明，会导致执行报错。

修正方案 #

方案1：将Ajax方法移至页面后台（最简便） #

把CheckValidity方法从ASCX移到当前使用该控件的页面（.aspx.cs）中：

public partial class YourPage : Page
{
    [Ajax.AjaxMethod()]
    public string CheckValidity(string FromDate, string Id)
    {
      // 原ASCX中的业务逻辑
    }
}

然后修改JS调用，直接调用页面的Ajax方法并传递回调：

function CheckValidityofId(fromdate, Id) {
    // 替换为你的页面类名，比如YourPage.CheckValidity
    const ajaxMethod = 'YourPage.CheckValidity';
    // 声明MessageID变量，替换为实际元素ID
    const MessageID = 'your-message-element-id';

    const callback = function(response) {
        if (response.error) {
            alert(response.error);
            return;
        }
        const messageElement = document.getElementById(MessageID);
        if (!messageElement) return;
        
        if (response.value === "NotAssociated") {
            messageElement.innerText = "编号未关联";
        } else {
            messageElement.innerText = "此编号不符合条件";
        }
    }

    if (fromdate.trim().length > 0 && Id.trim().length > 0) {
        // 正确调用Ajax方法并传入回调
        window[ajaxMethod](fromdate, Id, callback);
    }
    return false;
}

方案2：保留ASCX方法，手动注册客户端代理 #

如果必须保留ASCX中的方法，需要在ASCX的后台代码中手动注册客户端代理脚本：

在FormUI.ascx.cs的Page_Load事件中添加：

protected void Page_Load(object sender, EventArgs e)
{
    // 注册Ajax方法的客户端代理
    Ajax.Utility.RegisterTypeForAjax(typeof(FormUI));
}

同时确保页面中引用了ASP.NET Ajax的脚本：

<script src="/ScriptResource.axd?d=..." type="text/javascript"></script>

然后修改JS调用，确保传递回调函数：

function CheckValidityofId(fromdate, Id) {
    const MessageID = 'your-message-element-id';

    const callback = function(response) {
        if (response.error) {
            alert(response.error);
            return;
        }
        const messageElement = document.getElementById(MessageID);
        if (!messageElement) return;
        
        if (response.value === "NotAssociated") {
            messageElement.innerText = "编号未关联";
        } else {
            messageElement.innerText = "此编号不符合条件";
        }
    }

    if (fromdate.trim().length > 0 && Id.trim().length > 0) {
        // 调用ASCX注册的Ajax方法，传入参数和回调
        FormUI.CheckValidity(fromdate, Id, callback);
    }
    return false;
}

方案3：改用jQuery直接调用WebMethod（更灵活） #

如果项目中引入了jQuery，可以改用[WebMethod]属性并直接发起AJAX请求，无需依赖ASP.NET Ajax的客户端代理：

首先修改ASCX后台方法（改为静态方法，添加[WebMethod]）：

public partial class FormUI : UIView
{
    [System.Web.Services.WebMethod()]
    public static string CheckValidity(string FromDate, string Id)
    {
      // 业务逻辑，注意静态方法无法直接访问控件，需通过参数或其他方式处理
    }
}

然后修改JS代码：

function CheckValidityofId(fromdate, Id) {
    const MessageID = 'your-message-element-id';

    if (fromdate.trim().length === 0 || Id.trim().length === 0) {
        return false;
    }

    $.ajax({
        type: "POST",
        url: "FormUI.ascx/CheckValidity", // 注意路径是否正确，若ASCX在子目录需调整
        data: JSON.stringify({ FromDate: fromdate, Id: Id }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            const messageElement = document.getElementById(MessageID);
            if (!messageElement) return;
            
            if (response.d === "NotAssociated") {
                messageElement.innerText = "编号未关联";
            } else {
                messageElement.innerText = "此编号不符合条件";
            }
        },
        error: function(xhr, status, error) {
            alert("请求错误: " + error);
        }
    });

    return false;
}

注意事项 #

• 确保页面中正确引用了所需的脚本（ASP.NET Ajax脚本或jQuery）。
• 替换代码中的your-message-element-id为实际的消息元素ID。
• 若使用方案3，需注意WebMethod必须是静态方法，且请求路径要正确指向ASCX文件。

内容的提问来源于stack exchange，提问作者AMDI