CODEWITHSUNDEEP
jqueryjsonasp.net-mvc-3
Citrus
Citrus

Reputation: 766

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

I have a jQuery function that on the click of a div element, gets that elements predefined ID value. What I want to do is load that parent elements children, so I'm planning to dynamically build some html using jQuery. What I don't know how to do, is make a call to a controller (ASP.NET MVC 3) and have the controller return a collection to the client.

I know how to send a JSON object from jQuery to a controller, but not the other way around.

Thanks in advance!

Upvotes: 10

Views: 28164

Answers (4)

Stephen
Stephen

Reputation: 115

I am using MVC, pass value from controller to view (pass Json data to Jquery table)

@model Objectlist
<script type="text/javascript">

    $(document).ready(function() {
      var json = @Html.Raw(Model));
    });

</script>

Code behind:

string Objectlist = Newtonsoft.Json.JsonConvert.SerializeObject(ViewModelObject);
return View(Objectlist );

Solution come from here: How to get JSON object from Razor Model object in javascript

Upvotes: 0

Yasser Shaikh
Yasser Shaikh

Reputation: 47804

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);
}

Further Reading

Upvotes: 20

Kirill Bestemyanov
Kirill Bestemyanov

Reputation: 11964

Sample:

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)};
    }

Upvotes: 3

Nick
Nick

Reputation: 6618

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.

Upvotes: 1

Related Questions