Reputation: 766
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
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
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);
}
Upvotes: 20
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
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