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

问题描述 投票:0回答:1

是的,我读过很多很多帖子,这些帖子都有点面向特定的细节或另一个细微的差别,而不是主要问题应该是“如何在 .NET 4.5 上的 ASPX 中调用方法背后的代码和结束参数和返回值”,简单的基本教程。

我对我的 VS 2017 和 2015 感到非常兴奋。

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

我使用 Visual Studio 提供的基本 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
服务器代码,现在我得到了

状态代码:401/未经授权

任何帮助将不胜感激,我不希望我用头撞墙来获胜!

jquery asp.net webforms webmethod
1个回答
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);
                });
        });
© www.soinside.com 2019 - 2024. All rights reserved.