ASPX在客户端JQuery背后的页面代码中调用WebMethod - 真正的交易

时间:2017-04-25 20:55:32

标签: jquery asp.net webforms webmethod

是的,我已经阅读了很多,很多帖子都是针对特定细节或其他细微差别而不是主要问题应该是“如何在.NET上的ASPX中调用Method背后的代码” 4.5及以上参数和返回值“,只是基础教程。

我在2017年和2015年的VS上爆炸了。

这是一个简单的WebForm解决方案的代码(YEAH我知道,但我必须在WebForm而不是我亲爱的MVC中)

我使用VStudio提供的基本MasterPage来构建WebForm项目。

以下是SiteMasterPage的有趣部分(请注意,我使用的是EnablePageMethod):

<body>
    <form runat="server">
        <asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
            [...]//Microsoft script declaration
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            [...]        
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>

    </form>
</body>
</html>

现在这是我的Default.aspx:

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="FinalAjaxCallTest._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
            <br />
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Placecholder" id="inputTest01">
    </div>
    <br />
    <div class="btn-group" role="group" aria-label="...">
        <button id="btnTest01" type="button" class="btn btn-warning">Default.aspx/TestReturnResult</button>
        <button type="button" class="btn btn-default">FAKE</button>
        <button type="button" class="btn btn-default">FAKE</button>
    </div>
    <br />
    <div id="content">
        <p>Tee test values should be replaced here</p>
    </div>
    <script>
        $("#btnTest01").click(function (e) {

            console.log("click");

            var dataValue = { data01: "This is", data02: $("#inputTest01").val() };

            $.ajax({
                type: "POST",
                url: "Default.aspx/TestReturnResult",
                data: dataValue,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            })
                .done(function (html) {
                    console.log("ajaxdone");
                    $("#content").clear().append(html);
                });
        });
    </script>
</asp:Content>

守则背后:

Imports System.Web.Services

Public Class _Default
    Inherits Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

    End Sub

    <WebMethod()>
    Public Shared Function TestReturnResult(data01 As String, data02 As String) As String

        Return $"<span class='badges'>{data01} is great with {data02}</span>"

    End Function

End Class

在早期测试中,当我在.NET 4.5.2下时,我有error 500服务器代码,现在我得到了

Status code: 401 / Unauthorized

任何帮助都会非常感激,我不想要我赢得胜利的墙!

1 个答案:

答案 0 :(得分:0)

好的,我最终自己找到了。

2个非常重要的事情是:

1 - 在route.config中设置settings.AutoRedirectMode = RedirectMode.Off

2 - 使用Json.Stringify从ajax发送数据

我最后的ajax代码:

 $("#btnTest01").click(function (e) {
            $.ajax({
                type: "POST",
                url: "<%= ResolveUrl("Default.aspx/TestReturnResult") %>",
                async: true,
                data: JSON.stringify({ data01: "Test01", data02: "Test02" }),
                contentType: 'application/json',
                dataType: 'json'
            })
                .done(function (result) {
                    $("#content").html(result.d);
                });
        });