10

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!

4 Answers 4

20

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

Sign up to request clarification or add additional context in comments.

3 Comments

All good answers, hard to pick one as an answer. Picked Yasser's as the further reading link was particularly helpful, but all got me on the right direction. Thank you all
What is home in this example?
@KalaJ home is 'HomeController' its just a name given to the controller.
3

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

Comments

1

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.

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.