jquery를 사용하여 서버 측 메소드를 호출하는 방법은 무엇입니까?

Question

jquery를 사용하여 서버 측 메서드를 호출하려고하는데, 클라이언트 측에서 동적으로 생성 된 텍스트 상자의 textchange 이벤트에서이 ID를 가져 오는 방법을 알지 못합니다. 누군가 내가이 일을하도록 도울 수 있습니까? 다음과 같이 사용하여 스크립트 메신저는 다음과 같습니다

<script type="text/javascript"> 

    $(init); 

    function init() { 

     $('#test').droppable( //Div Control where i'll be dropping items 
      { 
       drop: handleDropEvent 
      }); 

     $('a').each(function(idx, item) { 
     $(item).draggable({ cursor: 'move', helper: 'clone' }) 
     }); 
    } 

    function handleDropEvent(event, ui) { 
     var draggable = ui.draggable; 
     document.getElementById('test').innerHTML += addColumn(draggable.attr('text')) + '<br>'; 
    } 
    $('.textChangeClass').live('change', function() { 
/* Evokes on the text change event for the entire textboxes of class .textChangeClass. Is it possible to specify the dynamic textbox generated @ clientside here? (like for e.g. : $('#mytextbox').click(function()) */ 

    $.ajax({ 
     type: "POST", 
     url: "Webtop.aspx/ServerSideMethod",   //This is not getting called at all. 
     data: "{'param1': AssignedToID}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     async: true, 
     cache: false, 
     success: function(msg) { 
     alert("From Server"); 
     } 
    }) 

    }); 

    }); 
    function addColumn(column) { 

     var iHtml; 

     //This is how i'm generating the textboxes along with a checkbox bound by a div. 
     iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;">&nbsp;' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input class="textChangeClass" type="text" id="aln' + column + '">&nbsp;</div>'; 
     return iHtml 
    } 
    </script> 

Answer 1

1. 나는 ")};"당신은 여분의 생각 이것은 아마도 문제가 아니지만.
2. "AssignedToID"란 무엇입니까? 그 주위에 작은 따옴표를 추가하십시오. 몇 년 전에 json에서 인용문과 관련된 이상한 문제가 있었던 것을 기억하는 것 같습니다.
3. Fiddler/firebug/etc에서 요청을 볼 수 있습니까? 내용이 정확합니까?

유추 된 세미콜론도주의해야합니다. 만약 당신이 자바 스크립트를 축소했다면 (예, 이것이 임베디드임이 확실합니다. 그러나 언젠가 그것이 분리 된 js 파일로 옮겨지기를 희망합니다.) 결국에는 문제가 생길 것입니다. 다른 개발자가 따라오고, 리팩토링을하고, ajax 호출 후에 반환 값을 추가해야한다고 상상해보십시오.

$.ajax({...})return foo} 

편집

피들러/방화범 넷 패널 그들은 당신이 요청과 서버의 응답을 검사 할 수 있습니다 ... 당신의 친구입니다. 이 방법은 당신이 (당신이 결국 다른 이유로 할 수 있지만)

편집

질문의 다른 부분에 대답하기 위해, 당신의 텍스트 상자에 액세스 할 수있는 오류 처리기를 추가 할 필요가 없습니다 change 이벤트는 이벤트 처리기 내부에서 'this'키워드를 사용하여 트리거되었습니다.

$('.textChangeClass').live('change', function(event) { 
    //Note that the 'event' parameter has interesting things in it too. 
    var changedText = $(this).val(); 
    alert("The value in the textbox is: '" + changedText + "'"); 
    var data = { 
     param1: changedText 
    }; 
    $.ajax({ 
     ... 
     //Using json2 library here to create json string 
     data: JSON.stringify(data), 
     ... 
    }); 
}); 

이벤트 처리기에 선택적 'event'매개 변수를 추가했음을 유의하십시오. 그것은 흥미로운 것들을 가지고 있으며 jQuery를 처음 접하는 사람들이 종종 간과하는 것입니다. 그것에 대해 읽으십시오 here.

Answer 2

당신은 그렇지 않으면 불을 얻을 것 텍스트 상자의 생성 후 텍스트 상자에 이벤트를 추가하는 당신에게 코드를 작성해야합니다.

바로 위 단계가 작업

편집을 할 것입니다 따라 텍스트 상자에 텍스트 상자 또는 바인드 이벤트에 이벤트를 추가하는 코드를 작성 후 텍스트 상자

를 추가

아약스 호출에 오류 기능을 추가하면 오류가 발생합니다 ... 계속 하시겠습니까

$.ajax({ 
    type: "post", url: "/SomeController/SomeAction", 
    success: function (data, text) { 
     //... 
    }, 
    error: function (request, status, error) { 
     alert(request.responseText); 
    } 
});