Jquery asp.net 버튼클릭 이벤트 via ajax

Jquery asp.net 버튼클릭 이벤트 via ajax

누가 나를 올바른 방향으로 인도해 줄 수 있을까 해서요.asp.net 버튼과 클릭 이벤트(서버측 코드 실행)가 있습니다.제가 하고 싶은 건 에이잭스와 쥬리를 통해 이 이벤트를 호출하는 겁니다.어떻게 할 수 있을까요?그렇다면 몇 가지 예를 들어보고 싶습니다.

잘 부탁드립니다

이것이 바로 jQuery가 ASP에서 빛을 발하는 부분입니다.넷 디벨로퍼다음과 같은 ASP 버튼이 있다고 가정합니다.

그럴 때 페이지 소스를 보면 ID가 btn대박은 아니지만 $ctr001_btn대박 또는 그와 비슷한 것을 볼 수 있습니다.Javascript에서 찾는 것은 골칫거리입니다.jQuery를 입력합니다.

$(표준)ready(function) {$("input[id$='btnAwesome']). (function() {)을 클릭합니다.// 클라이언트 측 버튼을 클릭해 주세요.
});});

id$=이(가) btnAwesome으로 끝나는 ID에 대해 regex 조회를 수행하고 있습니다.

편집:

클라이언트 측의 버튼 클릭 이벤트에서 Ajax 콜을 호출하시겠습니까?뭐라고 부르려고 했어?jQuery를 사용하여 ASP에 Ajax 콜을 발신하는 것에 관한 매우 좋은 기사가 많이 있습니다.메서드의 배후에 있는 넷코드.

요점은 WebMethod Atribut으로 마크된 스태틱메서드를 작성하는 것입니다.그런 다음 $.ajax를 사용하여 jQuery를 사용하여 호출할 수 있습니다.

$.1940입력: "POST",url: "PageName.aspx/MethodName",데이터: "{}",내용유형: "application/json; charset=utf-8",데이터 유형: "json",성공: 함수(msg) {// 여기서 뭔가 재미있는 일을 하세요.
}});

Web Method의 내용은 http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/에서 배웠습니다.

정말 좋은 ASP들이 많이 있어요.인터넷/jQuery 관련 정보의 반환에 msg.d를 사용해야 하는 이유에 대해 자세히 읽어보십시오.Net 3.5 (3.0 이후일 수도 있음)같은 것.

그로머의 대답은 마음에 들지만 의문이 남는다.여러 'btnAwesome'이 서로 다른 컨트롤에 있다면?

그 가능성을 충족시키기 위해 저는 다음과 같이 하겠습니다.

$(document).ready(function() {
  $('#<%=myButton.ClientID %>').click(function() {
    // Do client side button click stuff here.
  });
});

정규 매치는 아니지만, 제 생각에는 정규 매치가 필요한 것은 아닙니다.특정 버튼을 참조하는 경우 다음과 같은 정확한 텍스트가 필요합니다.

그러나 모든 btn대박에 대해 같은 액션을 취하고 싶다면 그로머의 답변을 따르세요.

ASP.NET 웹 폼 페이지에는 이미 "_doPostBack"이라고 불리는 PostBack 처리를 위한 JavaScript 메서드가 있습니다.

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

코드 파일에서 다음을 사용하여 PostBack을 실행하는 JavaScript를 생성합니다.이 방법을 사용하면 적절한 클라이언트가컨트롤의 ID가 사용됩니다.

protected string GetLoginPostBack()
{
    return Page.ClientScript.GetPostBackEventReference(btnLogin, string.Empty);
}

그런 다음 ASPX 페이지에서 javascript 블록을 추가합니다.

<script language="javascript">
function btnLogin_Click() {
  <%= GetLoginPostBack() %>;
}
</script>

최종 javascript는 다음과 같이 렌더링됩니다.

<script language="javascript">
function btnLogin_Click() {
  __doPostBack('btnLogin','');
}
</script>

이제 javascript에서 "btnLogin_Click()"을 사용하여 버튼 클릭을 서버에 전송할 수 있습니다.

클라이언트 측에서 버튼 클릭 이벤트를 처리할 때 클라이언트를 사용합니다.단추의 ID를 가져오는 ID 속성:

$(document).ready(function() {
$("#<%=myButton.ClientID %>,#<%=muSecondButton.ClientID%>").click(

    function() {
     $.get("/myPage.aspx",{id:$(this).attr('id')},function(data) {
       // do something with the data
     return false;
     }
    });
 });

서버의 페이지에서 다음을 수행합니다.

protected void Page_Load(object sender,EventArgs e) {
 // check if it is an ajax request
 if (Request.Headers["X-Requested-With"] == "XMLHttpRequest") {
  if (Request.QueryString["id"]==myButton.ClientID) {
    // call the click event handler of the myButton here
    Response.End();
  }
  if (Request.QueryString["id"]==mySecondButton.ClientID) {
    // call the click event handler of the mySecondButton here
    Response.End();
  }
 }
}

저는 이것을 하고 싶다는 것을 알게 되었고, 위의 답변을 검토하여 하이브리드 어프로치를 실시했습니다.조금 까다로워졌지만, 제가 한 일은 다음과 같습니다.

내 버튼은 서버 측 포스트에서 이미 작동했습니다.계속 작동하도록 하고 싶었기 때문에 "OnClick"은 그대로 두었지만 OnClientClick:

OnClientClick="if (!OnClick_Submit()) return false;"

중요한 경우에 대비하여 풀버튼 요소를 다음에 나타냅니다.

<asp:Button UseSubmitBehavior="false" runat="server" Class="ms-ButtonHeightWidth jiveSiteSettingsSubmit" OnClientClick="if (!OnClick_Submit()) return false;" OnClick="BtnSave_Click" Text="<%$Resources:wss,multipages_okbutton_text%>" id="BtnOK" accesskey="<%$Resources:wss,okbutton_accesskey%>" Enabled="true"/>

실행 시 HTML 버튼의 클릭 속성을 검사하면 실제로 다음과 같습니다.

if (!OnClick_Submit()) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderMain$ctl03$RptControls$BtnOK", "", true, "", "", false, true))

그리고 Javascript에서 OnClick_Submit 메서드를 추가했습니다.제 경우 사용자에게 대화상자를 보여줄 필요가 있는지 확인해야 했습니다.대화상자를 표시하면 false가 반환되어 이벤트 처리가 중지됩니다.대화 상자를 표시하지 않으면 true를 반환하여 이벤트 처리를 계속하고 포스트백 로직이 이전과 같이 실행됩니다.

function OnClick_Submit() {
    var initiallyActive = initialState.socialized && initialState.activityEnabled;
    var socialized = IsSocialized();
    var enabled = ActivityStreamsEnabled();

    var displayDialog;

    // Omitted the setting of displayDialog for clarity

    if (displayDialog) {
        $("#myDialog").dialog('open');
        return false;
    }
    else {
        return true;
    }
}

대화상자가 받아들여질 때 실행되는 Javascript 코드에서는 사용자가 대화상자와 어떻게 상호작용했느냐에 따라 다음 작업을 수행합니다.

$("#myDialog").dialog('close');
__doPostBack('message', '');

상기의 「메시지」는, 실제로 송신하는 메세지에 따라서 다릅니다.

하지만 잠깐만, 더 있어!

서버측 코드로 되돌아가서 OnLoad를 다음과 같이 변경했습니다.

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e)
    if (IsPostBack)
    {
        return;
    }

    // OnLoad logic removed for clarity
}

수신인:

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e)
    if (IsPostBack)
    {
        switch (Request.Form["__EVENTTARGET"])
        {
            case "message1":
                // We did a __doPostBack with the "message1" command provided
                Page.Validate();
                BtnSave_Click(this, new CommandEventArgs("message1", null));
                break;

            case "message2":
                // We did a __doPostBack with the "message2" command provided
                Page.Validate();
                BtnSave_Click(this, new CommandEventArgs("message2", null));
                break;
            }
            return;
    }

    // OnLoad logic removed for clarity
}

그런 다음 BtnSave_Click 메서드에서 다음을 수행합니다.

CommandEventArgs commandEventArgs = e as CommandEventArgs;
string message = (commandEventArgs == null) ? null : commandEventArgs.CommandName;

마지막으로 메시지 유무와 그 메시지의 가치를 바탕으로 논리를 제시할 수 있습니다.

언급URL : https://stackoverflow.com/questions/855747/jquery-asp-net-button-click-event-via-ajax