从JavaScript调用ASP.NET函数？

时间：2008-08-06 17:16:37

标签： javascript c# asp.net onclick

我正在ASP.NET中编写一个网页。我有一些JavaScript代码，我有一个带有点击事件的提交按钮。

是否可以使用JavaScript的click事件调用我在ASP中创建的方法？

19 个答案:

答案 0 :(得分：91)

好吧，如果您不想使用Ajax或任何其他方式来实现它，并且只是想要发生正常的ASP.NET回发，那么就是这样做的（不使用任何其他库）：

虽然有点棘手......：）

我。在您的代码文件中（假设您使用的是C＃和.NET 2.0或更高版本）将以下接口添加到您的Page类，使其看起来像

public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}

II。这应该添加（使用 Tab - Tab ）这个函数到你的代码文件中：

public void RaisePostBackEvent(string eventArgument) { }

III。在JavaScript中的onclick事件中，编写以下代码：

var pageId = '<%=  Page.ClientID %>';
__doPostBack(pageId, argumentString);

这将在您的代码文件中调用'RaisePostBackEvent'方法，并将'eventArgument'作为您从JavaScript传递的'argumentString'。现在，您可以调用您喜欢的任何其他活动。

P.S：那是'下划线 - 下划线-doPostBack'......并且，该序列中应该没有空格......不知何故WMD不允许我写下一个字符后跟下划线！

答案 1 :(得分：57)

__doPostBack()方法效果很好。

另一个解决方案（非常hackish）是在标记中添加一个不可见的ASP按钮，然后使用JavaScript方法单击它。

<div style="display: none;">
   <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>

从JavaScript中，使用 ClientID 检索对该按钮的引用，然后在其上调用 .click（）方法。

var button = document.getElementById(/* button client id */);

button.click();

答案 2 :(得分：18)

Microsoft AJAX library将完成此任务。您还可以创建自己的解决方案，包括使用AJAX调用您自己的aspx（基本上）脚本文件来运行.NET函数。

我建议使用Microsoft AJAX库。安装并引用后，只需在页面加载或init中添加一行：

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

然后你可以做以下事情：

<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
    Return 5
End Function

然后，您可以在页面上将其称为：

PageClassName.Get5(javascriptCallbackFunction);

函数调用的最后一个参数必须是返回AJAX请求时将执行的javascript回调函数。

答案 3 :(得分：11)

您可以使用.NET Ajax PageMethods异步执行此操作。请参阅here或here。

答案 4 :(得分：4)

静态，强类型编程对我来说一直都很自然，所以起初我不得不为我的应用程序构建基于Web的前端时学习JavaScript（更不用说HTML和CSS）了。我会做任何事情来解决这个问题，例如重定向到页面只是为了对OnLoad事件执行和操作，只要我能编写纯C＃。

然而，你会发现，如果你要与网站合作，你必须有一个开放的思想，并开始考虑更多的面向Web（也就是说，不要尝试在服务器上做客户端的事情和副-versa）。我喜欢ASP.NET webforms并且仍然使用它（以及MVC），但我会说通过尝试使事情更简单并隐藏客户端和服务器的分离，它可能会混淆新手并实际上最终制作东西有时更难。

我的建议是学习一些基本的JavaScript（如何注册事件，检索DOM对象，操纵CSS等），你会发现网页编程更加愉快（更不用说了）。很多人提到了不同的Ajax库，但我没有看到任何实际的Ajax示例，所以就这么说了。 （如果您不熟悉Ajax，那就是制作异步HTTP请求来刷新内容（或者可能在您的场景中执行服务器端操作），而无需重新加载整个页面或执行完整的回发。

<强>客户端： 

<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request

xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
    if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
          document.getElementById("resultText").innerHTML = xmlhttp.responseText;
    }
};
</script>

就是这样。虽然名称可能会产生误导，但结果也可以是纯文本或JSON，但您不仅限于XML。 jQuery提供了一个更简单的界面来进行Ajax调用（简化其他JavaScript任务）。

请求可以是HTTP-POST或HTTP-GET，也不一定是网页，但您可以发布到任何侦听HTTP请求的服务，例如RESTful API。 ASP.NET MVC 4 Web API使得设置服务器端Web服务也能轻而易举地处理请求。但是很多人不知道你也可以将API控制器添加到web表单项目中，并使用它们来处理这样的Ajax调用。

服务器端： 

public class DataController : ApiController
{
    public HttpResponseMessage<string[]> Get()
    {
        HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
            Repository.Get(true),
            new MediaTypeHeaderValue("application/json")
        );

        return response;
    }
}

<强> Global.asax中

然后只需在Global.asax文件中注册HTTP路由，这样ASP.NET就会知道如何指导请求。

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}

使用AJAX和控制器，您可以随时异步回发到服务器以执行任何服务器端操作。这种一键式提供了JavaScript的灵活性和C＃/ ASP.NET的强大功能，使访问您网站的人们获得了更好的整体体验。在不牺牲任何东西的情况下，你将获得两全其美。

<强>参考

答案 5 :(得分：4)

我认为博客文章 How to fetch & show SQL Server database data in ASP.NET page using Ajax (jQuery) 会对您有所帮助。

JavaScript代码 

<script src="http://code.jquery.com/jquery-3.3.1.js" />
<script language="javascript" type="text/javascript">

    function GetCompanies() {
        $("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCompanies",
            data: "{}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
    }

    function OnSuccess(data) {
        var TableContent = "<table border='0'>" +
                                "<tr>" +
                                    "<td>Rank</td>" +
                                    "<td>Company Name</td>" +
                                    "<td>Revenue</td>" +
                                    "<td>Industry</td>" +
                                "</tr>";
        for (var i = 0; i < data.d.length; i++) {
            TableContent += "<tr>" +
                                    "<td>"+ data.d[i].Rank +"</td>" +
                                    "<td>"+data.d[i].CompanyName+"</td>" +
                                    "<td>"+data.d[i].Revenue+"</td>" +
                                    "<td>"+data.d[i].Industry+"</td>" +
                                "</tr>";
        }
        TableContent += "</table>";

        $("#UpdatePanel").html(TableContent);
    }

    function OnError(data) {

    }
</script>

ASP.NET服务器端功能 

[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<TopCompany> GetCompanies()
{
    System.Threading.Thread.Sleep(5000);
    List<TopCompany> allCompany = new List<TopCompany>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        allCompany = dc.TopCompanies.ToList();
    }
    return allCompany;
}

答案 6 :(得分：3)

  

Microsoft AJAX库将实现此目的。您还可以创建自己的解决方案，包括使用AJAX调用您自己的aspx（基本上）脚本文件来运行.NET函数。

这是一个名为AjaxPro的库，它编写了一个名为Michael Schwarz的MVP。这个库不是微软编写的。

我已经广泛使用了AjaxPro，它是一个非常好的库，我建议对服务器进行简单的回调。它与Microsoft版本的Ajax一起运行良好，没有任何问题。但是，我会注意到，微软制作Ajax的难易程度，我只会在必要时使用它。需要大量的JavaScript来完成一些非常复杂的功能，只需将其放入更新面板即可从Microsoft获得。

答案 7 :(得分：2)

如果要触发服务器端事件处理程序（例如，Button的单击事件），这两种情况（即同步/异步）都很容易。

用于触发控件的事件处理程序： 如果您已在页面上添加了ScriptManager，则跳过步骤1.

  1. 在页面客户端脚本部分

    中添加以下内容 
    //<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>

    1. 为您的控件编写服务器端事件处理程序

      protected void btnSayHello_Click（object sender，EventArgs e） {      Label1.Text =“Hello World ......”; }

    2. 添加客户端函数以调用服务器端事件处理程序

      function SayHello（）{         __doPostBack（“btnSayHello”，“”）; }

    2. 将上面代码中的“btnSayHello”替换为您控件的客户端ID。

    通过这样做，如果您的控件位于更新面板内，则页面将不会刷新。这很容易。

    另一个要说的是：小心客户端ID，因为它取决于您使用ClientIDMode属性定义的ID生成策略。

答案 8 :(得分：2)

  

我正在尝试实施此功能，但它无法正常工作。页面是   回发，但我的代码没有被执行。当我调试   在页面中，RaisePostBackEvent永远不会被触发。我做过的一件事   不同的是我在用户控件而不是aspx中这样做   页。

如果其他人像Merk一样，并且遇到麻烦，我有一个解决方案：

当您拥有用户控件时，您似乎还必须在父页面中创建PostBackEventHandler。然后你可以通过直接调用它来调用用户控件的PostBackEventHandler。见下文：

public void RaisePostBackEvent(string _arg)
{
    UserControlID.RaisePostBackEvent(_arg);
}

其中UserControlID是您在标记中嵌套用户控件时在父页面上为其提供的ID。

注意：您也可以直接调用属于该用户控件的方法（在这种情况下，您只需要父页面中的RaisePostBackEvent处理程序）：

public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}

答案 9 :(得分：1)

您可能希望为常用方法创建Web服务 只需在要调用的函数上添加一个WebMethodAttribute就可以了。这就是它 拥有所有常见内容的Web服务也使系统更易于维护。

答案 10 :(得分：1)

如果页面上没有生成__doPostBack函数，则需要插入一个控件来强制它：

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />

答案 11 :(得分：1)

关于：

var button = document.getElementById(/* Button client id */);

button.click();

应该是这样的：

var button = document.getElementById('<%=formID.ClientID%>');

其中formID是.aspx文件中的ASP.NET控件ID。

答案 12 :(得分：0)

我试试这个，所以我可以在使用jQuery时运行Asp.Net方法。

  1. 在jQuery代码中重定向页面

    window.location = "Page.aspx?key=1";

  2. 然后在页面加载中使用查询字符串

    protected void Page_Load(object sender, EventArgs e)
{
    if (Request.QueryString["key"] != null)
    {
        string key= Request.QueryString["key"];
        if (key=="1")
        {
            // Some code
        }
    }
}

    3. 所以不需要运行额外的代码

答案 13 :(得分：0)

请试试这个：

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;

ddlVoucherType是一个控件，所选索引更改将调用...并且您可以将任何函数放在此控件的所选索引更改上。

答案 14 :(得分：0)

您也可以在JavaScript代码中添加以下内容来获取它：

document.getElementById('<%=btnName.ClientID%>').click()

我觉得这个很容易！

答案 15 :(得分：0)

试试这个：

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}

或者这个

Response.Write("<script>alert('Hello World');</script>");

使用按钮的OnClientClick属性来调用JavaScript函数...

答案 16 :(得分：0)

您可以使用PageMethods.Your C# method Name来访问JavaScript中的C＃方法或VB.NET方法。

答案 17 :(得分：0)

如果您遇到对象预期错误，请将此行添加到页面加载。

ClientScript.GetPostBackEventReference(this, "");

答案 18 :(得分：0)

感谢跨浏览器，这个回复对我来说很轻松：

  

__doPostBack（）方法效果很好。

另一个解决方案（非常hackish）是在标记中添加一个不可见的ASP按钮，然后使用JavaScript方法单击它。

<div style="display: none;"> 
    <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" /> 
</div>

从您的JavaScript中，使用其ClientID检索对该按钮的引用，然后在其上调用.Click（）方法：

var button = document.getElementByID(/* button client id */); 

button.Click();
  

块引用

相关问题
最新问题