JavaScript에서 ASP.NET 함수를 호출하시겠습니까?

Question

ASP.NET에서 웹 페이지를 작성 중입니다.JavaScript 코드가 있고 클릭 이벤트가 있는 제출 버튼이 있습니다.

JavaScript의 클릭 이벤트를 사용하여 ASP에서 만든 메서드를 호출할 수 있습니까?

Answer 1

글쎄요, Ajax나 다른 방법을 사용하고 싶지 않고 단지 일반적인 ASP.NET 포스트백이 발생하기를 원한다면 다음 방법을 따르세요(다른 라이브러리를 사용하지 않고):

조금 까다롭긴 하지만..:)

나.코드 파일에서(C# 및 .NET 2.0 이상을 사용한다고 가정) 페이지 클래스에 다음 인터페이스를 추가하여 다음과 같이 만듭니다.

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

ii.이 추가해야합니다 (사용 탭-탭) 이 함수를 코드 파일에 추가합니다.

public void RaisePostBackEvent(string eventArgument) { }

iii.JavaScript의 onclick 이벤트에서 다음 코드를 작성하세요.

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

이렇게 하면 JavaScript에서 전달한 'argumentString'으로 'eventArgument'를 사용하여 코드 파일에서 'RaisePostBackEvent' 메서드가 호출됩니다.이제 원하는 다른 이벤트를 호출할 수 있습니다.

추신:그것은 '밑줄-밑줄-doPostBack'입니다...그리고, 그 순서에는 공백이 없어야 합니다...어떻게 든 WMD에서는 밑줄과 문자를 쓰는 것을 허용하지 않습니다!

Answer 2

그만큼 __doPostBack() 방법이 잘 작동합니다.

(아주 해킹적인) 또 다른 해결책은 마크업에 보이지 않는 ASP 버튼을 추가하고 JavaScript 메서드를 사용하여 클릭하는 것입니다.

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

JavaScript에서 다음을 사용하여 버튼에 대한 참조를 검색합니다. 클라이언트 ID 그런 다음 .딸깍 하는 소리() 그것에 대한 방법.

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

button.click();

Answer 3

그만큼 마이크로소프트 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 콜백 함수여야 합니다.

Answer 4

.NET Ajax PageMethods를 사용하여 비동기적으로 수행할 수 있습니다.보다 여기 또는 여기.

Answer 5

정적이며 강력한 형식의 프로그래밍은 항상 나에게 매우 자연스러운 느낌을 주었기 때문에 처음에는 애플리케이션을 위한 웹 기반 프런트엔드를 구축해야 할 때 JavaScript(HTML 및 CSS는 말할 것도 없고)를 배우는 것을 거부했습니다.순수한 C#을 코딩할 수 있다면 OnLoad 이벤트를 수행하고 작업하기 위해 페이지로 리디렉션하는 등 이 문제를 해결하기 위해 무엇이든 할 것입니다.

그러나 웹 사이트 작업을 하려면 열린 마음을 갖고 좀 더 웹 지향적으로 생각해야 한다는 사실을 알게 될 것입니다. 즉, 서버에서 클라이언트 측 작업을 수행하려고 하지 말고 그 반대의 경우도 마찬가지입니다. .저는 ASP.NET 웹 양식을 좋아하고 아직도 사용하고 있습니다. 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 요청을 수신하는 모든 서비스에 게시할 수 있습니다. 평안한 API.ASP.NET MVC 4 웹 API를 사용하면 서버 측 웹 서비스를 설정하여 요청을 쉽게 처리할 수 있습니다.그러나 많은 사람들은 웹 양식 프로젝트에 API 컨트롤러를 추가하고 이를 사용하여 이와 같은 Ajax 호출을 처리할 수도 있다는 사실을 모릅니다.

서버 측:

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

        return response;
    }
}

글로벌.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의 강력한 기능을 모두 제공하여 사이트를 방문하는 사람들에게 전반적으로 더 나은 경험을 제공합니다.아무것도 희생하지 않고 두 가지 장점을 모두 누릴 수 있습니다.

참고자료

• 아약스,
• jQuery 아약스,
• 웹 양식의 컨트롤러

Answer 6

제 생각에는 블로그 포스팅이 Ajax(jQuery)를 사용하여 ASP.NET 페이지에서 SQL Server 데이터베이스 데이터를 가져오고 표시하는 방법 너를 도울 것이다.

자바스크립트 코드

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

Answer 7

Microsoft AJAX 라이브러리가 이를 수행합니다.또한 AJAX를 사용하여 자체 aspx(기본적으로) 스크립트 파일을 호출하여 .NET 기능을 실행하는 것과 관련된 자체 솔루션을 만들 수도 있습니다.

이것은 MVP라는 이름으로 작성된 AjaxPro라는 라이브러리입니다. 마이클 슈워츠.이 라이브러리는 Microsoft에서 작성한 것이 아닙니다.

나는 AjaxPro를 광범위하게 사용해 왔으며 서버에 대한 간단한 콜백에 추천하고 싶은 매우 훌륭한 라이브러리입니다.Microsoft 버전의 Ajax에서는 문제 없이 잘 작동합니다.그러나 Microsoft가 Ajax를 얼마나 쉽게 만들었는지를 고려하면 꼭 필요한 경우에만 사용할 것입니다.Microsoft에서 업데이트 패널에 놓아서 얻을 수 있는 매우 복잡한 기능을 수행하려면 많은 JavaScript가 필요합니다.

Answer 8

예를 들어 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();
       }
   }
   //]]>
   

   2. 컨트롤을 위한 서버 측 이벤트 핸들러 작성

      보호 된 void btnsayhello_click (Object Sender, Eventargs e) {label1.text = "Hello World ...";}

   3. 서버측 이벤트 핸들러를 호출하는 클라이언트 함수 추가

      함수 sayhello () {__dopostback ( "btnsayhello", "");}

위 코드의 "btnSayHello"를 컨트롤의 클라이언트 ID로 바꿉니다.

이렇게 하면 컨트롤이 업데이트 패널 내에 있으면 페이지가 새로 고쳐지지 않습니다.정말 쉽습니다.

또 한 가지 말씀드릴 점은 다음과 같습니다.클라이언트 ID는 ClientIDMode 속성으로 정의된 ID 생성 정책에 따라 달라지므로 주의하세요.

Answer 9

이것을 구현하려고 하는데 제대로 작동하지 않습니다.페이지가 다시 게시되지만 내 코드가 실행되지 않습니다.페이지를 디버깅 할 때 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();
}

Answer 10

일반적인 방법에 대한 웹 서비스를 만들고 싶을 수도 있습니다.
호출하려는 함수 위에 WebMethodAttribute를 추가하기만 하면 됩니다.
모든 일반적인 내용을 포함하는 웹 서비스를 사용하면 시스템을 더 쉽게 유지 관리할 수 있습니다.

Answer 11

__doPostBack 함수가 페이지에 생성되지 않으면 다음과 같이 강제로 적용하는 컨트롤을 삽입해야 합니다.

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

Answer 12

에 관하여:

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

button.click();

다음과 같아야 합니다:

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

여기서 formID는 .aspx 파일의 ASP.NET 컨트롤 ID입니다.

Answer 13

개체 예상 오류가 발생하는 경우 페이지 로드에 이 줄을 추가하세요.

ClientScript.GetPostBackEventReference(this, "");

Answer 14

당신이 사용할 수있는 PageMethods.Your C# method Name C# 메소드 또는 VB.NET 메소드에 JavaScript로 액세스하기 위해.

Answer 15

이 시도:

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

아니면 이거

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

JavaScript 함수를 호출하려면 버튼의 OnClientClick 속성을 사용하세요.

Answer 16

JavaScript 코드에 다음 줄을 추가하여 얻을 수도 있습니다.

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

내 생각에 이것은 매우 쉬운 일이다!

Answer 17

이것을 시도해 보십시오:

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

ddlVoucherType은 선택한 인덱스 변경이 호출되는 컨트롤입니다.그리고 이 컨트롤의 선택된 인덱스 변경에 어떤 기능이라도 넣을 수 있습니다.

Answer 18

이를 달성하는 가장 간단하고 좋은 방법은 다음을 사용하는 것입니다. onmouseup() 자바스크립트 이벤트가 아닌 onclick()

이렇게 하면 클릭한 후에 JavaScript가 실행되고 ASP를 방해하지 않습니다. OnClick() 이벤트.

Answer 19

나는 이것을 시도하고 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
           }
       }
   }
   

따라서 추가 코드를 실행할 필요가 없습니다.

Answer 20

이 답변은 크로스 브라우저 덕분에 나에게 매우 쉽습니다.

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

인용구