如何通过Ajax请求将参数传递给ASP.NET .aspx页面的WebMethod方法

问题原因及修复方案 #

1. 后台WebMethod缺少static修饰 #

ASP.NET 页面的WebMethod必须声明为静态方法才能被前端AJAX调用，修改后台代码：

[System.Web.Services.WebMethod]
public static void CustomActionOn(string itemStockCode)
{
    // 原有逻辑不变，注意静态方法无法直接访问页面实例成员，获取登录用户请用HttpContext.Current.User
    products = new LogicRules.B2B.BL_Product().GetAllProductsForSAPUpdate().OrderBy(x => x.ItemName).ToList();
    var selectedProduct = products.Where(x => x.ItemStockCode == itemStockCode).FirstOrDefault();
    selectedProduct.PublishOnB2B = true;
    new Core.Log.ArkLogs().WriteProductUpdateLog(JsonConvert.SerializeObject(selectedProduct), HttpContext.Current.User.Identity.GetUserId<int>(), "Product", "ISBN", selectedProduct.ItemStockCode);
    var retValues = new SapFunction.ProductFunction().updateProduct(selectedProduct);
}


[System.Web.Services.WebMethod]
public static void CustomActionOff(string itemStockCode)
{
    // 同理添加static修饰，用户获取逻辑同上调整
    products = new LogicRules.B2B.BL_Product().GetAllProductsForSAPUpdate().OrderBy(x => x.ItemName).ToList();
    var selectedProduct = products.Where(x => x.ItemStockCode == itemStockCode).FirstOrDefault();
    selectedProduct.PublishOnB2B = false;
    new Core.Log.ArkLogs().WriteProductUpdateLog(JsonConvert.SerializeObject(selectedProduct), HttpContext.Current.User.Identity.GetUserId<int>(), "Product", "ISBN", selectedProduct.ItemStockCode);
    var retValues = new SapFunction.ProductFunction().updateProduct(selectedProduct);
}

2. 前端AJAX参数格式错误 #

手动拼接的JSON字符串用了单引号，不符合JSON规范，且拼接容易出现转义问题，改用JSON.stringify序列化JS对象，同时添加回调方便排查问题：

function customActionOn(itemStockCode) {
    $.ajax({
        url: '/SAPManagement/SAPUpdate.aspx/CustomActionOn',
        dataType: 'json',
        type: 'POST',
        data: JSON.stringify({ itemStockCode: itemStockCode }),
        contentType: 'application/json; charset=utf-8',
        success: function(res) {
            console.log('调用成功', res);
        },
        error: function(err) {
            console.log('调用失败', err);
        }
    });
}

function customActionOff(itemStockCode) {
    $.ajax({
        url: '/SAPManagement/SAPUpdate.aspx/CustomActionOff',
        dataType: 'json',
        type: 'POST',
        data: JSON.stringify({ itemStockCode: itemStockCode }),
        contentType: 'application/json; charset=utf-8',
        success: function(res) {
            console.log('调用成功', res);
        },
        error: function(err) {
            console.log('调用失败', err);
        }
    });
}

3. 按钮点击触发页面回发打断请求 #

asp:Button默认是submit类型，点击后会触发表单提交、页面刷新，导致AJAX请求被中断，需要在OnClientClick事件最后加return false阻止默认行为。如果ItemStockCode是字符串类型，绑定时还要额外加引号，否则JS会报变量未定义错误：

<telerik:GridTemplateColumn UniqueName="GetDeatils" ShowFilterIcon="false" AllowFiltering="false" HeaderText="Open and Close The Product On The Web" FilterControlWidth="10px" AutoPostBackOnFilter="false">
    <ItemTemplate>
        <asp:Button ID="Button3" runat="server" CssClass="btn btn-block green" Text="Open" OnClientClick='<%# "customActionOn(\""+Eval("ItemStockCode").ToString()+"\");return false;" %>'></asp:Button>
        <asp:Button ID="Button1" runat="server" CssClass="btn btn-block red" Text="Close" OnClientClick='<%# "customActionOff(\""+Eval("ItemStockCode").ToString()+"\");return false;" %>'></asp:Button>
    </ItemTemplate>
</telerik:GridTemplateColumn>

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