从JavaScript调用ASP.NET函数?

2020/11/17 20:42 · javascript ·  · 0评论

我正在用ASP.NET编写网页。我有一些JavaScript代码,并且有一个带有click事件的Submit按钮。

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

好吧,如果您不想使用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);

This will call the 'RaisePostBackEvent' method in your code file with the 'eventArgument' as the 'argumentString' you passed from the JavaScript. Now, you can call any other event you like.

P.S: That is 'underscore-underscore-doPostBack' ... And, there should be no space in that sequence... Somehow the WMD does not allow me to write to underscores followed by a character!

__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();

微软AJAX库将做到这一点。您还可以创建自己的解决方案,其中涉及使用AJAX调用自己的aspx(基本上是这样)脚本文件来运行.NET函数。

我建议使用Microsoft AJAX库。安装并引用后,您只需在页面加载或初始化中添加一行:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

然后,您可以执行以下操作:

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

然后,您可以在页面上将其称为:

PageClassName.Get5(javascriptCallbackFunction);

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

您可以使用.NET Ajax PageMethods异步进行此操作。看到这里这里

我认为博客文章如何使用Ajax(jQuery)在ASP.NET页面中获取和显示SQL Server数据库数据会有所帮助。

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

静态的,强类型的编程对我来说一直很自然,因此,当我不得不为我的应用程序构建基于Web的前端时,我一开始拒绝学习JavaScript(更不用说HTML和CSS了)。我将采取任何措施来解决此问题,例如重定向到页面以执行OnLoad事件并对其进行操作,只要我可以编写纯C#代码即可。

但是,您会发现,如果要使用网站,则必须具有开放的思维,并开始考虑面向更多的网络(也就是说,不要尝试在服务器上做客户端操作,反之亦然) 。我喜欢ASP.NET Web表单,并且仍然使用它(以及MVC),但是我会说,通过尝试使事情变得更简单并隐藏客户端和服务器之间的分隔,这可能会使新来者感到困惑,并最终使事情变得更加困难。

我的建议是学习一些基本的JavaScript(如何注册事件,检索DOM对象,操作CSS等),并且您会发现Web编程更加有趣(更不用说更轻松了)。很多人提到了不同的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的强大功能,使访问您网站的人们获得了更好的整体体验。在不牺牲任何东西的情况下,您将两全其美。

参考文献

Microsoft AJAX库将完成此任务。您还可以创建自己的解决方案,其中涉及使用AJAX调用您自己的aspx(基本上)脚本文件来运行.NET函数。

这是一个名为AjaxPro的库,它被编写为名为Michael Schwarz的MVP 该库不是由Microsoft编写的。

我已经广泛使用了AjaxPro,它是一个非常不错的库,建议对服务器进行简单的回调。它在Microsoft版本的Ajax上运行良好,没有任何问题。但是,我要指出的是,微软使Ajax变得多么容易,我只会在确实需要时才使用它。只需将JavaScript放到更新面板中,它就需要很多JavaScript来完成一些真正复杂的功能。

如果要触发服务器端事件处理程序(例如Button的click事件),则在两种情况下(即同步/异步)都非常容易。

要触发控件的事件处理程序:如果已经在页面上添加了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. 添加一个客户端函数来调用服务器端事件处理程序

      函数SayHello(){__doPostBack(“ btnSayHello”,“”); }

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

这样,如果您的控件位于更新面板中,则该页面将不会刷新。那太简单了。

要说的另一件事是:请注意客户端ID,因为它取决于您使用ClientIDMode属性定义的ID生成策略。

我正在尝试实现此功能,但是它无法正常工作。该页面正在回发,但我的代码未执行。当我调试页面时,RaisePostBackEvent永远不会被解雇。我做的不同的一件事是我在用户控件而不是aspx页面中执行此操作。

如果还有其他人像默克,并且对此难以解决,我有一个解决方案:

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

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

其中UserControlID是您将其嵌套在标记中时在父页面上赋予用户控件的ID。

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

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

您可能想为常用方法创建一个Web服务。

只需在要调用的函数上添加一个WebMethodAttribute即可。


具有所有常用内容的Web服务也使系统更易于维护。

如果未在页面上生成__doPostBack函数,则需要插入一个控件以强制执行以下操作:

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

关于:

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

button.click();

应该是这样的:

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

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

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

ClientScript.GetPostBackEventReference(this, "");

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

试试这个:

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

或这个

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

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

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

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

我认为这很容易!

请尝试以下方法:

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

ddlVoucherType是一个控件,选定的索引更改将被调用...您可以在此控件的选定索引的更改上放置任何函数。

实现此目的的最简单,最好的方法是使用onmouseup()JavaScript事件,而不是onclick()

这样,您将在单击后触发JavaScript,并且不会干扰ASPOnClick()事件。

我尝试了这一点,因此可以在使用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
            }
        }
    }
    

因此,无需运行额外的代码

感谢跨浏览器,此回复对我来说像是轻轻松松:

__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(); 

块引用

本文地址:http://javascript.askforanswer.com/congjavascriptdiaoyongasp-nethanshu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!