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

Question

我正在尝试在单击按钮时使用外部 java 脚本调用 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>

这是我的 java 脚本 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 脚本。但是点击按钮似乎没有任何反应。

如有任何帮助，我们将不胜感激。

Answer 1

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

就是说，当然在某些情况下 post 背部不必要地沉重，而您只想运行服务器上的一小段代码。然后就可以使用页面方法了。

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

用[WebMethod]属性装饰 - System.Web.Services.WebMethod
被宣布public static

请注意，页面方法无法与页面上的控件一起使用。使用 ajax 请求调用页面方法。没有完整的页面生成正在进行。对使用 page 方法的页面的任何更新都必须在方法 returns.

之后使用 javascript 完成

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

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

工作示例（对我有用）：

网络表单：

<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);
}

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

using external js to call aspx.cs function (on button click)

javascript

c#

asp.net

external