asp.net mvc에서 컨트롤러에 대한 간단한 Ajax 호출 만들기

109

ASP.NET MVC Ajax 호출을 시작하려고합니다.

제어 장치:

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

전망:

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

데이터를 반환하는 컨트롤러 메서드로 경고를 인쇄하기 만하면됩니다. 위의 코드는 내보기에 "chamara"를 인쇄합니다. 경고가 발생하지 않습니다.

최신 정보

컨트롤러를 아래와 같이 수정했고 작동을 시작합니다. 나는 그것이 왜 지금 작동하는지 명확한 아이디어가 없습니다. 누군가 설명 해주세요. 매개 변수 "a"는 동일한 메소드 이름과 매개 변수를 가진 두 개의 메소드를 추가 할 수 없기 때문에 추가 한 것과 관련이 없습니다. 나는 이것이 해결책이 아니라 작동한다고 생각합니다.

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }

— 차 마라
소스

json 형식의 문자열을 반환합니다 {"name":"chamara"}. 그런 다음 읽기 시도data['name']

— Raab

1

보기에서 두 번째 jQuery 라이브러리를 제거하십시오. 코드는 그대로 작동해야합니다. 스크립트 오류가 발생하여 경고가 표시되지 않는 것 같습니다.

— Terence

23

업데이트를 완료 한 후

첫 번째는 기본 HttpGet 요청으로 FirstAjax 작업을 호출하고 빈 Html 뷰를 렌더링합니다. (이전에 당신은 그것을 가지고 있지 않았습니다)
나중에 해당 뷰의 DOM 요소를로드하면 Ajax 호출이 시작되고 경고가 표시됩니다.

이전에는 HTML을 렌더링하지 않고 브라우저에 JSON 만 반환했습니다. 이제 JSON 데이터를 가져올 수있는 HTML보기가 렌더링되었습니다.

HTML이 아닌 일반 데이터로 JSON을 직접 렌더링 할 수 없습니다.

— asb
소스

52

그렇지 않은 경우 데이터 속성을 제거하십시오. POSTING서버에 대한 (컨트롤러는 매개 변수를 기대하지 않습니다).

그리고 AJAX 메소드 에서 정적 문자열 대신 사용 Razor하고 사용할 수 있습니다 @Url.Action.

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

업데이트에서 :

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});

— 대런
소스

3

@chamara-죄송합니다. HttpPost를 제거합니다 (서버에 아무것도 게시하지 않으므로 중복 속성이 됨). 컨트롤러가 히트하지 않습니다. 또한 내가 당신을 뿌린대로 AJAX 함수에서 "type : POST"를 제거하십시오.

— Darren

18

Razor를 사용하여 다음과 같이 작업을 호출하여 URL을 동적으로 변경합니다.

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

— gdmanandamohon
소스

Url.Action에 대한 매개 변수는이 답변에서 거꾸로되어 있습니다. Url.Action (actionName, controllerName)

— xd6_

1

이것의 팬이 아니고, 뷰와 자바 스크립트의 결합을 장려하지만, 어, 사용자 이름이 체크 아웃 되나요?

— Halter

@Halter UX는 사용자가 모든 작업에서 리디렉션하도록 강요하지 않을 때 크게 향상됩니다. 그리고 서버 측이 신경 쓰지 말아야 할 클라이언트 측에서 일어나는 많은 일들이 있습니다.

— Kolob Canyon

@KolobCanyon 당신은 100 % 맞습니다. 내 의견은 자바 스크립트에서 면도기로 URL을 렌더링하는 것과 관련이 있습니다. 이것은 자바 스크립트를 뷰 (cshtml)와 밀접하게 연결합니다. 좋은 대답이지만 긴밀한 결합을 수정하려면 URL을 chstml의 데이터 속성에 덤프하고 javascript에서 읽을 수 있습니다. 혼란을 드려 죄송합니다!

— Halter

5

첫 번째로 한 페이지에 두 개의 다른 버전의 jquery 라이브러리를 가질 필요가 없습니다. "1.9.1"또는 "2.0.0"은 ajax 호출이 작동하도록하기에 충분합니다.

컨트롤러 코드는 다음과 같습니다.

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

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

보기는 다음과 같아야합니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>

— Lokesh_Ram
소스

5

Ajax 호출에서 C # Method를 눌러야하는 경우 요청이 수신되면 두 가지 문제 유형과 url을 전달하면되며 URL 만 지정하면됩니다. 잘 작동하는 아래 코드를 따르십시오.

C # 코드 :

    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

요청을받는 경우 자바 스크립트 코드

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

Post Request 및 [HttpGet]에서 [HttpPost]에 대한 자바 스크립트 코드

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

참고 : View Controller와 동일한 컨트롤러에서 FirstAjax를 사용하는 경우 url에 컨트롤러 이름이 필요하지 않습니다. 처럼url: 'FirstAjax',

— 무하마드 아사드
소스

4

UPDATE 질문입니다.

동일한 이름과 서명을 가진 두 개의 메소드를 가질 수 없으므로 ActionName 속성을 사용해야합니다.

최신 정보:

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

메서드가 동작이되는 방법에 대한 자세한 내용은 이 링크 를 참조하십시오 . 그래도 아주 좋은 참조.

— RGR
소스

1

전망;

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

컨트롤러 방법;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }

— 외 니군
소스

0

대신 url: serviceURL, 사용

url: '<%= serviceURL%>',

그리고 successFunc에 2 개의 매개 변수를 전달하고 있습니까?

function successFunc(data)
 {
   alert(data);
 }

— 스왑
소스

0

global.asax에 "JsonValueProviderFactory"를 추가합니다.

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

— 야쉬
소스

JsonValueProviderFactory는 무엇입니까?

— Kiquenet