从JavaScript调用ASP.NET函数?

uut 发布于 2018-02-28 asp.net 最后更新 2018-02-28 01:03 967 浏览

我正在ASP.NET中编写一个网页。我有一些JavaScript代码,并且我有一个提交按钮和一个点击事件。 是否有可能调用我在JavaScript中使用JavaScript单击事件创建的方法?

已邀请:

wet

赞同来自:

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

nautem

赞同来自:

Microsoft AJAX library将完成此操作。您也可以创建自己的解决方案,包括使用AJAX调用自己的aspx(基本上)脚本文件来运行.NET函数。 我建议微软的AJAX库。一旦安装并引用,您只需在页面加载或init中添加一行:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))
然后你可以做这样的事情:
<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
    Return 5
End Function
然后,你可以在你的页面上调用它:
PageClassName.Get5(javascriptCallbackFunction);
函数调用的最后一个参数必须是返回AJAX请求时将执行的JavaScript回调函数。

inisi

赞同来自:

那么,如果你不想使用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);
这将在你的代码文件中使用'eventArgument'作为你从JavaScript传递的'argumentString'来调用'RaisePostBackEvent'方法。现在,你可以打电话给你喜欢的任何其他事件。 P.S:这是'underscore-underscore-doPostBack'...而且,在这个序列中应该没有空间......不知怎的,WMD不允许我写下一个字符后面的下划线!

ueaque

赞同来自:

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

esaepe

赞同来自:

__doPostBack()方法运行良好。 另一个解决方案(非常黑客)是简单地在标记中添加一个不可见的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();

yut

赞同来自:

The Microsoft AJAX library will accomplish this. You could also create your own solution that involves using AJAX to call your own aspx (as basically) script files to run .NET functions.
这是一个名为AjaxPro的库,它写了一个名为Michael Schwarz的MVP。这是图书馆不是由微软写的。 我广泛使用了AjaxPro,并且它是一个非常好的库,我会推荐对服务器进行简单的回调。它确实与Microsoft版本的Ajax无关,并且没有任何问题。不过,我会注意到,微软已经成功制作了Ajax,我只会在真正需要时才使用它。通过将其放入更新面板中,您可以通过很多JavaScript来完成从Microsoft获得的一些非常复杂的功能。

cut

赞同来自:

感谢跨浏览器,这个回复对我来说很简单:

The __doPostBack() method works well.
另一个解决方案(非常黑客)是简单地在标记中添加一个不可见的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(); 
Blockquote

menim

赞同来自:

如果__doPostBack函数没有在页面上生成,则需要插入一个控件来强制它如下所示:

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

cet

赞同来自:

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

ClientScript.GetPostBackEventReference(this, "");

iipsa

赞同来自:

您可以使用PageMethods.Your C# method Name为了访问C#方法或VB.NET方法到JavaScript。

oest

赞同来自:

如果要触发服务器端事件处理程序(例如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. 为您的控件编写服务器端事件处理程序 保护无效btnSayHello_Click(对象发件人,EventArgs e) {      Label1.Text =“Hello World ...”; }
    2. 添加一个客户端函数来调用服务器端事件处理程序 函数SayHello(){         __doPostBack(“btnSayHello”,“”); }
    将上面的代码中的“btnSayHello”替换为您的控件的客户端ID。 通过这样做,如果您的控件位于更新面板内,则该页面不会刷新。这很容易。 还有一件事要说的是:小心客户端ID,因为它取决于你使用ClientIDMode属性定义的ID生成策略。

equi

赞同来自:

静态的强类型编程对我来说一直都很自然,所以起初我不得不为我的应用程序构建基于Web的前端时学习JavaScript(更不用说HTML和CSS)。我会做任何事情来解决这个问题,比如重定向到一个页面,只是为了在OnLoad事件上执行和操作,只要我可以编写纯C#代码。 然而,你会发现,如果你打算与网站合作,你必须有一个开放的思想,并开始思考更多面向Web的(即,不要试图在服务器上做客户端的事情,反之亦然) 。我喜欢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的强大功能,让访问您的网站的用户获得更好的整体体验。在不牺牲任何东西的情况下,你可以得到两全其美的好处。 参考

lipsum

赞同来自:

尝试这个:

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}
或这个
Response.Write("<script>alert('Hello World');</script>");
使用按钮的OnClientClick属性来调用JavaScript函数...

taut

赞同来自:

您也可以通过在JavaScript代码中添加以下代码来获得它:

document.getElementById('<%=btnName.ClientID%>').click()
我觉得这个很容易!

gcum

赞同来自:

I'm trying to implement this but it's not working right. The page is posting back, but my code isn't getting executed. When i debug the page, the RaisePostBackEvent never gets fired. One thing i did differently is I'm doing this in a user control instead of an aspx page.
如果其他人和Merk一样,并且遇到麻烦,我有一个解决方案: 当你有一个用户控件时,你似乎还必须在父页面中创建PostBackEventHandler。然后通过直接调用用户控件的PostBackEventHandler来调用它。见下文:
public void RaisePostBackEvent(string _arg)
{
      UserControlID.RaisePostBackEvent(_arg);
}
其中,UserControlID是您在标记中嵌套时在父页面上为用户提供的控件的ID。 注意:您也可以直接调用属于该用户控件的方法(在这种情况下,您只需要父页面中的RaisePostBackEvent处理程序):
public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}

eenim

赞同来自:

我认为博客文章 How to fetch & show SQL Server database data in ASP.NET page using Ajax (jQuery) 可以帮助您。 JavaScript代码

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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;
}

dsed

赞同来自:

关于:

var button = document.getElementById(/* Button client id */);
button.click();
它应该是这样的:
var button = document.getElementById('<%=formID.ClientID%>');
formID是.aspx文件中的ASP.NET控件ID。

kodit

赞同来自:

请试试这个:

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;
ddlVoucherType是一个控件,选择的索引更改将调用...并且您可以将任何函数放在此控件的选定索引更改上。

nnihil

赞同来自:

实现这个最简单也是最好的方法是使用onmouseup() JavaScript事件而不是onclick() 这样,您将在点击后触发JavaScript,并且不会干扰ASP OnClick()事件。

bquos

赞同来自:

我尝试这个,所以我可以在使用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
            }
        }
    }
    
所以不需要运行额外的代码