不刷新页面

时间:2015-12-12 13:09:55

标签: javascript jquery asp.net ajax webforms

我正在阅读很多关于此事的文章和帖子,但我无法解决我的问题。

我在aspx.cs页面中有一些方法。方法不返回任何内容,它只是更改标签,文本框中的值......

[System.Web.Services.WebMethod]
public void MethodName()
{
   //some code
}

在前端我有单选按钮,应该调用此方法。当我调用重新加载页面的常规服务器端方法(rdbMethodName_CheckedChanged)时,它工作。现在我想调用这个方法而不重新加载。我试过用Ajax

<asp:RadioButton ID="rbTwoSub" runat="server" GroupName="Subscription" value="2" AutoPostBack="false" OnCheckedChanged="rdbMethodName_CheckedChanged" />

要调用ajax方法,我将AutoPostBack设置为false并创建js以进行调用

$("#ctl00_PageContent_rbTwoSub").change(function () {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: "buy_sql_tools_new.aspx/MethodName?Product=ProductName",
                success: function (data) {
                    console.log('Success: ', data);
                },
                error: function (data) {
                    console.log('Error: ', error);
                }
            });
        });

此代码在控制台控制台html代码中返回没有参数的页面,并且不调用此方法。

我只需要调用后端方法来改变所有值,就是这样。有没有人知道如何做到这一点。

我想到的只有一件事就是将所有C#代码重写为javascript代码并仅在点击时调用js方法

- - - - - - - - 编辑2015年12月16日

嗨,我试着打电话给简单的ajax帖子,它会返回我的单值,但它也不起作用

这是下面的代码

            $.ajax({
                type: "POST",
                url: "buy_sql_tools_new.aspx/HelloWorld",
                data: "{}",
                contentType: "application/json",
                dataType: "json",
                success: function (msg) {
                    alert(msg);
                },
                error: function (msg) {
                    console.log('error' + msg);
                }
            });

aspx.cs

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string HelloWorld()
{
    return "Hello";
}

1 个答案:

答案 0 :(得分:2)

您的网络方法应该是静态的。此外,如果您想要在ajax调用成功时实际更改某些内容,则必须返回要更新的数据。

尝试做这样的事情。请注意,该示例使用JSON.NET进行序列化。

jQuery代码:

    $(document).ready(function () { 

        $("input:radio[name='Subscription']").click(function () {

            var selectedRadio = $("input:radio[name='Subscription']:checked").val();

            //Code to fetch complex datatype
            $.ajax({
                type: "POST",
                url: "buy_sql_tools_new.aspx/GetProduct?product=ProductName",
                dataType: "json",
                data: "{ id :'" + selectedRadio + "'}",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                  //perform the desired operations here eg. change labels and etc by getting the values from data object.
                },
                error: function () {
                    console.log('error');
                }
            });

        });            
    });
</script>

代码隐藏中的WebMethod:

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string GetProduct(string product)
    {
        string result = string.Empty;
        try
        {
            //Get the product
            Product product = new Product();
            product.Name = "Sql tool";
            product.Price = 3.99M;
            result = JsonConvert.SerializeObject(product);
            //example output
            //{
            //  "Name": "Apple",
            //  "Price": 3.99,
            //}
        }
        catch (Exception ex)
        {
             result = ex.ToString();
            //Exception Handling Logic goes here
        }
        return result;
    }

希望您觉得这很有帮助。