使用外部 js 调用 aspx.cs 函数（点击按钮）答案

【问题标题】：using external js to call aspx.cs function (on button click)使用外部 js 调用 aspx.cs 函数（点击按钮）
【发布时间】：2017-01-23 23:10:35
【问题描述】：

我正在尝试在单击按钮时使用外部 javascript 调用 aspx.cs 函数。

这里是aspx

<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%= ResolveUrl ("~/Scripts/lookup.js") %>"></script>
</head>
<body>

        <section class="webdesigntuts-workshop">
            <asp:ScriptManager ID='ScriptManager1' runat='server' EnablePageMethods='true' />
    <form id="form1" runat="server">            
        <asp:TextBox type="search" name="search" id="sform" placeholder="What are you looking for?" runat="server" />       
         <asp:TextBox type="search" name="hdnText" id="hdnText" runat="server" />

        <button id="Button1"  runat="server" onclientclick="lookup();return false;">Search</button>
    </form>
</section>

</body>

这是我的 javascript lookup.js，它位于 Scripts 文件夹中。

function Signup() {
    var query = document.getElementById('<%=sform.ClientID %>').value;


    PageMethods.lookupfromjs_Click(query);

    function onSucess(result) {
        alert(result);
    }

    function onError(result) {
        alert('Cannot process your request at the moment, please try later.');
    }
}

这里是 aspx.cs 函数。

protected void lookupfromjs_Click(String query)
        {

            if (!String.IsNullOrEmpty(query))
            {
                hdnText.Text = "query= " + query + " look up number " + lookup_no++;

                // sform.Text= "You are looking up the term " + query;

            }
        }

在 VS 或浏览器中没有这样的错误。但是我在浏览器中的断点似乎没有启动。浏览器正确加载了 java 脚本。然而，点击按钮似乎什么也没发生。

任何帮助将不胜感激。

【问题讨论】：

这是什么？ 'protected void lookupfromjs_Click(字符串查询)
AFAIK aspx.cs 中的方法需要是静态的并且还用[System.Web.Services.WebMethod] 标记。你已经试过了吗？
谢谢你..我错过了“静态”

标签： javascript c# asp.net external

【解决方案1】：

如果您使用的是.aspx 文件，那么您使用的是webforms 框架。如果您使用 web 表单，那么通常的做法是在页面后面的代码中使用带有事件处理程序的 <asp:Button runat="server" ...></asp:Button>。如果你想避免postbacks，那么你使用了错误的框架。

也就是说，在某些情况下，回发当然是不必要的繁重，而您只想在服务器上运行一小段代码 sn-p。然后可以使用页面方法。

为了使后面代码中的方法可用作page method，该方法必须：

使用[WebMethod] 属性进行装饰 - System.Web.Services.WebMethod
声明public static

请注意，页面方法不能与页面上的控件一起使用。使用ajax 请求调用页面方法。没有进行整页生成。使用 page 方法对页面的任何更新都必须在方法返回后使用javascript 完成。

您的代码中至少有几个不同的明显错误：

您调用lookup(); return false;，但javascript方法调用Signup
你有这个：<%=sform.ClientID %> 在你的lookup.js 文件中。但是该文件是使用<script ... ></script> 标签引入的，这是浏览器的单独请求，由静态处理程序处理。所以<%=sform.ClientID %> 不会被解析。
您的所谓的 web 方法未正确定义，并且它尝试使用页面中的控件，就好像它是一个回发事件处理程序一样。
等

工作样本（对我有用）：

网络表单：

<head runat="server">
    <title></title>
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/lookup.js") %>"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"
            EnablePageMethods="true">
        </asp:ScriptManager>
        <asp:TextBox type="search" name="search" ID="sform" placeholder="What are you looking for?" runat="server" />
        <asp:TextBox type="search" name="hdnText" ID="hdnText" runat="server" />
        <button id="Button1" onclick="Signup('<%= sform.ClientID %>', '<%= hdnText.ClientID %>');">Search</button>
    </form>
</body>

JavaScript：

function Signup(sformId, hdnId) {
    var query = document.getElementById(sformId).value;
    var res = PageMethods.lookupfromjs_Click(query, onSucess, onError);
    function onSucess(result) {
        document.getElementById(hdnId).value = result;
        alert(result);

    }
    function onError(result) {
        alert('Cannot process your request at the moment, please try later.');
    }
}

页面方法：

[System.Web.Services.WebMethod]
public static string lookupfromjs_Click(String query)
{
    return "query was " + HttpUtility.UrlEncode(query);
}

【讨论】：