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

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

JavaScript의 클릭 이벤트로 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);

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

추신 : 그것은 '밑줄-밑줄-포스트 포스트'입니다 ... 그리고 그 순서에는 공백이 없어야합니다 ... 어떻게 든 WMD는 밑줄과 문자를 쓸 수 없습니다!

이 __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를 사용하여 .NET 함수를 실행하기 위해 자체 aspx (기본적으로) 스크립트 파일을 호출하는 자체 솔루션을 만들 수도 있습니다.

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 데이터베이스 데이터를 가져오고 표시하는 방법 이 도움이 될 것이라고 생각합니다.

자바 스크립트 코드

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

정적이고 강력한 형식의 프로그래밍은 항상 매우 자연스러운 느낌을 주었으므로 처음에는 응용 프로그램을위한 웹 기반 프런트 엔드를 구축해야 할 때 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 일 수 있으며 웹 페이지 일 필요는 없지만 RESTful 과 같은 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;
    }
}

Global.asax

그런 다음 Global.asax 파일에 HTTP 경로를 등록하면 ASP.NET은 요청을 지시하는 방법을 알 수 있습니다.

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

AJAX 및 컨트롤러를 사용하면 서버 측 작업을 수행하기 위해 언제든지 비동기 적으로 서버에 다시 게시 할 수 있습니다. 이 1-2 펀치는 JavaScript의 유연성과 C # / ASP.NET의 성능을 모두 제공하여 사이트를 방문하는 사람들에게 전반적인 경험을 향상시킵니다. 아무것도 희생하지 않으면 서 두 세계의 장점을 모두 누릴 수 있습니다.

참고 문헌

• 아약스 ,
• jQuery Ajax ,
• Webforms의 컨트롤러

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

이 라이브러리는 Michael Schwarz 라는 MVP로 작성된 AjaxPro라는 라이브러리 입니다. 이 라이브러리는 Microsoft에서 작성하지 않았습니다.

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

서버 측 이벤트 핸들러 (예 : 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. 제어를위한 서버 측 이벤트 핸들러 작성

      protected void btnSayHello_Click (객체 발신자, EventArgs e) {Label1.Text = "Hello World ..."; }

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

      함수 SayHello () {__doPostBack ( "btnSayHello", ""); }

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

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

클라이언트 ID는 ClientIDMode 속성으로 정의 된 ID 생성 정책에 따라 달라 지므로 클라이언트 ID에주의하십시오.

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

일반적인 방법에 대한 웹 서비스를 만들 수 있습니다.
호출하려는 함수 위에 WebMethodAttribute를 추가하기 만하면됩니다.
모든 공통 항목으로 웹 서비스를 사용하면 시스템을보다 쉽게 ​​유지 관리 할 수 ​​있습니다.

__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 NameC # 메소드 또는 VB.NET 메소드에 JavaScript로 액세스하기 위해 사용할 수 있습니다 .

이 시도:

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

아니면 이거

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

JavaScript 함수를 호출하려면 단추의 OnClientClick 속성을 사용하십시오.

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

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

나는 이것이 매우 쉽다고 생각한다!

이것을 시도하십시오 :

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

ddlVoucherType은 선택된 인덱스 변경이 호출 할 컨트롤입니다. 그리고이 컨트롤의 선택된 인덱스 변경에 기능을 추가 할 수 있습니다.

이를 달성하는 가장 간단하고 가장 좋은 방법은 onmouseup()JavaScript 이벤트 를 사용하는 것이 아니라onclick()

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

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

인용구