挣扎求ASP.NET C# Ajax新手提问

Question

我用这些简单的代码更改了代码

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('#RadioButtonYes').click(function () {
                var enterdata = document.getElementById("RadioButtonYes").value;
                $.ajax({
                    type: "GET",
                    url: "radiobutton03ask.aspx/SyncData",
                    contentType: "application/json charset=utf-8",
                    dataType: "json",
                    data: { 'data': enterdata },
                    success: function (response) {
                        text1 = "ajaxyes";
                        alert(text1);
                    },
                    failure: function (response) {
                        alert(response.d);
                    }
                });

            });
            $('#RadioButtonNo').click(function () {
                var enterdata = document.getElementById("RadioButtonNo").value;
                $.ajax({
                    type: "GET",
                    url: "radiobutton03ask.aspx/SyncData",
                    contentType: "application/json charset=utf-8",
                    dataType: "json",
                    data: { 'data': enterdata },
                    success: function (response) {
                        text2 = "ajaxno";
                        alert(text2);
                    },
                    failure: function (response) {
                        alert(response.d);
                    }
                });

            });
        });
    </script>
        <div>
            <asp:RadioButton ID="RadioButtonYes" Text="Yes" runat="server" Checked="true" GroupName="G" />
            <asp:RadioButton ID="RadioButtonNo" Text="No" runat="server" GroupName="G" />
        </div>

.cs 端

我试图添加一些调试消息，但没有用。

public partial class Radio_Button__radiobutton03ask : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    public void SyncData(string data)
    {
        if (data != "")
        {
            if (data == "RadioButtonYes")
            {
                Response.Write("SyncDataYes");
                //return RadioButtonYes;
            }
            else if (data == "RadioButtonNo")
            {
                Response.Write("SyncDataNo");
                //return RadioButtonNo;
            }
            else
            {
                Response.Write("SyncDataOther");
            }
        }
    }
}

我正在帮助公司调试一些旧项目（C# webforms），但努力简单 ajax。

目标是在按下单选按钮时正常运行 ajax "ajaxyes" and.cs "SyncDataYes" 消息，但上面的代码在按下时没有响应。

我已经尝试了很多我在网上找到的修复程序，但似乎没有一个效果很好，如果有人可以提供帮助，我将不胜感激。

Answer 1

首先，这里有很多问题。

第一：

[WebMethod]
public void SyncData(string data)

您为什么将例程标记/制作为“无效”。 当然 c# 中的 Void 意味着 function 不会返回任何东西！！！！ - 这应该是第一个明显的问题！

并且由于您在 web 页面内部使用它（而不是单独的 asmx 页面？那么您需要将例程设置为 static - 因为不会在此处创建页面 class 实例（没有回发）。

接下来：

Response.Write("SyncDataNo");

您为什么要尝试使用 Response.Write？ 响应写入仅用于写入 web 页。 但是 ajax 的整个想法是 web 页面不是也不会被发送到服务器以供代码隐藏进行操作。 所以，response write 在这里完全没有意义，它不能被使用。 并且您甚至可以看到编译器不允许这样做（现在您已修复并从该例程中删除了 void）。

一个所谓的“ajax”调用？

这里的想法是您不必回发 web 页面。 这很棒，因为您不会获得浏览器“微调器”和所有等待时间。 它也很棒，因为它运行得非常快，因为您没有也没有将 web 页面发回服务器。

当然，最大的缺点是后面的代码无法查看、使用或修改 web 页面上的任何控件。 （因为 web 页面仍然位于用户桌面上）。 因此 web 方法的代码无法查看或修改页面上的控件（调用 JavaScript 和 ajax 调用已对控件的更改执行）。

因此，让我们使用以上所有信息，并修复此代码。

让我们制作一个简单的 C 到 F 温度转换器。

所以，首先，那个 web 方法是返回一个值，所以我们删除了 void。

接下来，正如我所说，当我们调用这样的 web 方法时，不会重新创建页面 class“实例”，因此该方法也必须标记为 static。（我假设你知道那是什么意思，对吧？？？） .

行。 所以 web 方法应该是这样的：

    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]
    public static Double ConvertToC(Double MyC)
    {
        Double CelResult = (MyC * 1.8) + 32;
        return CelResult;
    }

因此，我们必须创建此例程 static。（页面 class 未重新创建，web 页面仍位于用户桌面上）。

因此，假设我们的标记如下所示：

    <div style="text-align:right;width:20%">
        <label style="font-size:large">Enter Celsious Tempature</label>
        <asp:TextBox ID="txtC" runat="server" style="font-size:large;margin-left:5px;text-align:center" 
            TextMode="Number" Width="80px" Wrap="False"
            ClientIDMode="Static">
        </asp:TextBox>
        <br /> <br />

        <div style="text-align:center">
            <asp:Button ID="cmdConvert" runat="server" Text="Convert to °F" CssClass="btn"
                OnClientClick="MyConvert();return false"/>
        </div>
        <br />
        <label style="font-size:large">Fahrenheit</label>
        <asp:TextBox ID="txtF" runat="server" style="font-size:large;margin-left:5px;text-align:center" 
            Width="80px" Wrap="false"
            ClientIDMode="Static">
        </asp:TextBox>
    </div>

    <script>
        function MyConvert() {
            var txtC = $("#txtC");
            var txtF = $("#txtF");
            $.ajax({
                type: "POST",
                url: "Autocom.aspx/ConvertToC",
                data: JSON.stringify({ MyC: txtC.val()}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (MyReturn) {
                    txtF.val(MyReturn.d);
                },
                error: function (xhr, status, error) {
                    var errorMessage = xhr.status + ': ' + xhr.statusText
                    alert('Error - ' + errorMessage)
                }
            });
        }

我也有点懒，所以我使用了 clientID mode = static，因为这使得 jQuery 选择器很好用并且易于输入。

所以，当我们运行上面的代码时，我们得到这个结果：

所以，现在你的“烂摊子”。

您在这里的目标并不特别是您的样本。

（去喝咖啡，但要学习，然后尝试上面的方法）。

编辑：试试这个示例代码

您在页面中的 c# 方法：

    [WebMethod]
    public static string SyncData(string data)
    {
        string sResult = "";
        if (data != "")
        {
            if (data == "Yes")
            {
                sResult = "SyncDataYes";
            }
            else if (data == "No")
            {
                sResult = "SyncDataNo";
            }
            else
            {
                sResult = "SyncDataOther";
            }
        }
        return sResult;
    }

你的标记是这样的：

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

        <asp:RadioButton ID="RadioButtonYes" Text="Yes" runat="server" 
            Checked="true" GroupName="G"
            onclick="MyBtnClick('Yes')"
            ClientIDMode="Static"
            />
        <asp:RadioButton ID="RadioButtonNo" Text="No" runat="server" 
            GroupName="G"
            onclick="MyBtnClick('No')"
            ClientIDMode="Static"
            />
        <br />
        <h3>Result</h3>
        <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"></asp:TextBox>

    <script>

        function MyBtnClick(sYesNo) {
            $.ajax({
                type: "POST",
                url: "TestAjax.aspx/SyncData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify({data : sYesNo }),
                success: function (MyResult) {
                    $('#TextBox1').val(MyResult.d);
                },
                failure: function (MyResult) {                        
                    alert('error');
                }
            });
        }
</script>

Answer 2

由于在服务器端运行的 ASP 控件的 ID 将在客户端生成不同的 ID，因此这两个事件处理程序绑定将不起作用。

$('#RadioButtonYes').click(function () {...}
$('#RadioButtonNo').click(function () {...}

您可以尝试 2 种解决方案：

1. 使用控件的 ClientID 进行事件绑定

   $('#<%=RadioButtonYes.ClientID%>').click(function () {...}

   $('#<%=RadioButtonYes.ClientID%>').click(function () {...}

2. 将 ClientIDMode="Static" 属性添加到 ASP 控件

   <asp:RadioButton ID="RadioButtonYes" Text="Yes" runat="server" ClientIDMode="Static" Checked="true" GroupName="G" />

   <asp:RadioButton ID="RadioButtonNo" Text="No" runat="server" ClientIDMode="Static" GroupName="G" />

** 更新：**

您的代码还有两个问题：

1 - 您的 ajax 请求 ( json ) 的数据类型与服务器代码 ( text/plain ) 的响应类型不匹配。 您可以在此处查看不匹配 ajax 请求的数据类型的演示： https://jsfiddle.net/p2yzLqu1/3/

2 - 您使用了错误的 ajax 回调 function failure 。 我们应该改用done （成功）和fail （错误）回调函数。 请检查上面演示中使用done和fail回调的示例。