source

ASP에서 JQuery를 사용하여 컨트롤러 작업을 호출하는 방법.NET MVC

lovecheck 2023. 9. 4. 20:25
반응형

ASP에서 JQuery를 사용하여 컨트롤러 작업을 호출하는 방법.NET MVC

한동안 이에 대해 읽어 본 결과 다음을 사용하여 컨트롤러 작업을 호출할 수 있습니다.

$.ajax("MyController/MyAction", function(data) {
    alert(data);
});

이것은 제가 Jquery lib와 함께 MicrosoftMvcAjax.js 또는 MicrosoftAjax.js를 추가해야 한다는 것을 의미합니까?

또한 $.ajax() 함수에서 두 번째 매개 변수는 무엇을 포함해야 합니까?

마지막으로 asp.net mvcw with ajax 및 jquery에서 도움이 될 수 있는 스택 오버플로 또는 사이트 외부의 다른 링크가 있습니까?

감사해요.

여기서 jQuery.jax()를 읽기 시작할 수 있습니다.

실제로 컨트롤러 작업은 Url을 통해 액세스할 수 있는 공개 방법입니다. 따라서 MicrosoftMvcAjax 또는 jQuery와 같은 Ajax 호출에서 작업을 호출할 수 있습니다.저는 jQuery가 가장 간단합니다.제가 위에 제시한 링크에서 많은 예시를 얻었습니다.Ajax 호출의 일반적인 예는 다음과 같습니다.

$.ajax({
    // edit to add steve's suggestion.
    //url: "/ControllerName/ActionName",
    url: '<%= Url.Action("ActionName", "ControllerName") %>',
    success: function(data) {
         // your data could be a View or Json or what ever you returned in your action method 
         // parse your data here
         alert(data);
    }
});

더 많은 예는 여기에서 확인할 수 있습니다.

이전 응답은 ASP입니다.NET 전용

jquery(CDN에서 제공)에 대한 참조가 필요합니다. http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

코드 블록은 비슷하지만 더 단순한...

$.ajax({ url: '/Controller/Action/Id',
         success: function(data) { alert(data); }, 
         statusCode : {
             404: function(content) { alert('cannot find resource'); },
             500: function(content) { alert('internal server error'); }
         }, 
         error: function(req, status, errorObj) {
               // handle status === "timeout"
               // handle other errors
         }
});

필요한 핸들러를 몇 개 추가했는데, 코드를 디버깅하는 경우 404와 500이 항상 발생합니다.또한 시간 초과와 같은 많은 다른 오류가 오류 처리기를 통해 필터링됩니다.

ASP.NET MVC 컨트롤러는 요청을 처리하므로 올바른 URL을 요청하기만 하면 컨트롤러가 해당 URL을 선택합니다.ASP.NET 이외의 환경에서 작업하는 이 코드 샘플

다음과 같이 Javascript / Jquery를 사용하여 Controller 메서드를 매우 쉽게 호출할 수 있습니다.

다음은 일부 클래스 개체의 배열을 반환하는 컨트롤러 메서드라고 가정합니다.클래스가 'A'라고 합니다.

public JsonResult SubMenu_Click(string param1, string param2)

    {
       A[] arr = null;
        try
        {
            Processing...
           Get Result and fill arr.

        }
        catch { }


        return Json(arr , JsonRequestBehavior.AllowGet);

    }

다음은 복잡한 유형(클래스)입니다.

 public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

 }

이제 JQUERY의 컨트롤러 메소드를 호출할 차례가 되었습니다.컨트롤러 메소드를 호출하는 Jquery 함수는 다음과 같습니다.

function callControllerMethod(value1 , value2) {
    var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1 &param2=value2'
    $.getJSON(strMethodUrl, receieveResponse);
}


function receieveResponse(response) {

    if (response != null) {
        for (var i = 0; i < response.length; i++) {
           alert(response[i].property1);
        }
    }
}

위의 Jquery 함수 'callControllerMethod'에서 컨트롤러 메서드 url을 개발하고 이를 'strMehodUrl'이라는 변수에 넣고 getJ를 호출합니다.Jquery API의 SON 메서드입니다.

receiveResponse는 컨트롤러 메서드의 응답 또는 반환 값을 수신하는 콜백 함수입니다.

여기서는 C# 클래스 개체를 사용할 수 없기 때문에 JSON을 사용했습니다.

javascript 함수에 직접 들어가므로 다음과 같이 컨트롤러 메서드의 결과(arr)를 JSON 개체로 변환했습니다.

Json(arr , JsonRequestBehavior.AllowGet);

그리고 그 Json 객체를 반환했습니다.

이제 Javascript/JQuery의 콜백 기능에서 이 결과 JSON 객체를 사용하여 UI에 대한 응답 데이터를 보여주는 작업을 수행할 수 있습니다.

자세한 내용은 여기를 클릭하십시오.

다음과 같은 jQuery AJAX 메서드를 사용하여 컨트롤러의 작업을 쉽게 호출할 수 있습니다.

이 예에서 내 컨트롤러 이름은 학생입니다.

컨트롤러 작업

 public ActionResult Test()
 {
     return View();
 }

컨트롤러의 Any View에서 다음과 같은 Test() 작업을 호출할 수 있습니다.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "@Url.Action("Test", "Student")",
            success: function (result, status, xhr) {
                alert("Result: " + status + " " + xhr.status + " " + xhr.statusText)
            },
            error: function (xhr, status, error) {
                alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
            }
        });
    });
</script>

위 게시물에 대한 답변으로 당신의 라인이 아닌 이 라인이 필요하다고 생각합니다:-

var strMethodUrl = '@Url.Action("SubMenu_Click", "Logging")?param1='+value1+' &param2='+value2

또는 실제 문자열 value1 및 value2를 컨트롤러로 전송합니다.

하지만 저는 컨트롤러를 한 번만 호출합니다.매번 '수신 응답'을 누르는 것처럼 보이지만, 컨트롤러 메서드의 중단점은 페이지가 새로 고쳐질 때까지 한 번만 재생된다는 것을 보여줍니다.


여기 효과적인 해결책이 있습니다.cshtml 페이지의 경우:-

   <button type="button" onclick="ButtonClick();"> Call &raquo;</button>

<script>
    function ButtonClick()
    {
        callControllerMethod2("1", "2");
    }
    function callControllerMethod2(value1, value2)
    {
        var response = null;
        $.ajax({
            async: true,
            url: "Logging/SubMenu_Click?param1=" + value1 + " &param2=" + value2,
            cache: false,
            dataType: "json",
            success: function (data) { receiveResponse(data); }
        });
    }
    function receiveResponse(response)
    {
        if (response != null)
        {
            for (var i = 0; i < response.length; i++)
            {
                alert(response[i].Data);
            }
        }
    }
</script>

컨트롤러의 경우:

public class A
{
    public string Id { get; set; }
    public string Data { get; set; }

}
public JsonResult SubMenu_Click(string param1, string param2)
{
    A[] arr = new A[] {new A(){ Id = "1", Data = DateTime.Now.Millisecond.ToString() } };
    return Json(arr , JsonRequestBehavior.AllowGet);
}

시간이 호출될 때마다 변경되는 것을 볼 수 있으므로 값에 대한 캐싱이 없습니다...

언급URL : https://stackoverflow.com/questions/6119098/how-to-call-controller-actions-using-jquery-in-asp-net-mvc

반응형