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

Question

I am trying to call an aspx.cs function using an external javascript when a button is clicked on. 我试图在单击按钮时使用外部JavaScript调用aspx.cs函数。

Here is the aspx 这是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>

Here is my javascript lookup.js which is placed in the Scripts folder. 这是我的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.');
    }
}

here is the aspx.cs function. 这是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;

            }
        }

There are no errors as such in VS or in browser. 在VS或浏览器中没有这样的错误。 But my breakpoints in browser dont seem to kick in. The java script is loaded correctly by the browser. 但我在浏览器中的断点似乎没有起作用。浏览器正确加载了java脚本。 However on button click nothing seems to happen. 然而，按钮点击似乎没有任何事情发生。

Any help would be appreciated. 任何帮助，将不胜感激。

Answer 1

If you are working with .aspx files, you are using the webforms framework. 如果您正在使用.aspx文件，那么您正在使用webforms框架。 If you use webforms, then the normal thing to do here would be to have an <asp:Button runat="server" ...></asp:Button> with an event handler in the code behind page. 如果你使用webforms，那么在这里做的正常事情就是在代码隐藏页面中有一个带有事件处理程序的<asp:Button runat="server" ...></asp:Button> 。 If you want to avoid postbacks then you are using the wrong framework. 如果你想避免postbacks那么你使用错误的框架。

That said, there are of course cases where a post back is unnecessarily heavy, and you just want to run a tiny code snippet on the server. 也就是说，当然有一种情况是回帖不必要，你只想在服务器上运行一个很小的代码片段。 Page methods can then be used. 然后可以使用页面方法。

In order for a method in the code behind to be usable as a page method , the method must: 为了使代码中的方法可用作page method ，该方法必须：

Be decorated with the [WebMethod] attribute - System.Web.Services.WebMethod 使用[WebMethod]属性 - System.Web.Services.WebMethod进行修饰
Be declared public static 被宣布为public static

Note that a page method is not able to work with controls on the page. 请注意，页面方法无法使用页面上的控件。 A page method is called using an ajax request. 使用ajax请求调用页面方法。 There is not full page generation going on. 没有完整的页面生成。 Any updates to the page that is using the page method must be done using javascript after the method returns. 在方法返回后，必须使用javascript对使用页面方法的页面进行任何更新。

There are at least a few different apparent errors in your code: 您的代码中至少有几个不同的明显错误：

You call lookup(); return false; 你调用lookup(); return false; lookup(); return false; yet the javascript method is called Signup 然而javascript方法称为Signup
You have this: <%=sform.ClientID %> in your lookup.js file. 你在lookup.js文件中有这个： <%=sform.ClientID %> 。 But that file is brought in using a <script ... ></script> tag, which is a separate request by the browser, handled by a static handler. 但是该文件是使用<script ... ></script>标记引入的，该标记是浏览器的单独请求，由静态处理程序处理。 So the <%=sform.ClientID %> will not be resolved. 因此<%=sform.ClientID %>将无法解析。
Your so called web method is not correctly defined, and it tries to work with controls in the page as if it was a post back event handler. 你所谓的 Web方法没有正确定义，并尝试在页面与控制工作，如果它是一个回传事件处理程序。
Etc 等等

Working sample (works for me): 工作样本（适合我）：

Web form: 网页形式：

<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: 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.');
    }
}

Page method: 页面方法：

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-01-24 12:23:51

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-01-24 12:23:51

解决方案1
0 已采纳 2017-01-24 12:23:51