[Asp.net] MVC Controller 에서 jQuery로 동적으로 데이터 얻는 방법

Posted by RAY.D
2015. 4. 27. 10:22 Web/ASP.NET MVC
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.




How to get data from ASP.NET MVC controller to jQuery dynamically?



Here is the code for how you send data from Controller to json:

 $.ajax({
    url: '@Url.Action("GetData", "Home")',
    type: "GET",
    success: function (result) {
        $("#somediv").append(result.FirstName);
        $("#somediv").append(result.LastName);
        $("#somediv").append(result.Age);
    }
});

Consider a class like the one below....

 public class User
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

your action should look like this.

public JsonResult GetData(){

User user = new User();
user.FirstName = "Yasser";
user.LastName = "Shaikh";
user.Age = 100;

return Json(user, JsonRequestBehavior.AllowGet);
}






You can make use of the jquery ajax function and the MVC Razor Url property:

$.ajax({
    url: '@Url.Action("Home")',
    type: "GET",
    success: function (data) {
        $("my-div").append(data);
    }
});

The value of the success property is a function with one argument: data. This is the result of what is returned from your controller.




Javascript:

$.ajax({
        type: 'POST',
        url: '@(Url.Action("SomeAction", "SomeController"))',
        data: someInputData,
        error: OnErrorFunction,
        success: function (data, textStatus, XMLHttpRequest) {
            alert(JSON.stringify(data));
        },
        dataType: "json"
    });

Controller:

public ActionResult SomeAction(InputDataType someInputData)
    {
        if (someInputData== null)
            return null;
        return new JsonResult {Data = SomeOutputData(someInputData)};
    }