How to return Json object from MVC controller to view
When you do return Json(...)
you are specifically telling MVC not to use a view, and to serve serialized JSON data. Your browser opens a download dialog because it doesn't know what to do with this data.
If you instead want to return a view, just do return View(...)
like you normally would:
var dictionary = listLocation.ToDictionary(x => x.label, x => x.value);
return View(new { Values = listLocation });
Then in your view, simply encode your data as JSON and assign it to a JavaScript variable:
<script>
var values = @Html.Raw(Json.Encode(Model.Values));
</script>
EDIT
Here is a bit more complete sample. Since I don't have enough context from you, this sample will assume a controller Foo
, an action Bar
, and a view model FooBarModel
. Additionally, the list of locations is hardcoded:
Controllers/FooController.cs
public class FooController : Controller
{
public ActionResult Bar()
{
var locations = new[]
{
new SelectListItem { Value = "US", Text = "United States" },
new SelectListItem { Value = "CA", Text = "Canada" },
new SelectListItem { Value = "MX", Text = "Mexico" },
};
var model = new FooBarModel
{
Locations = locations,
};
return View(model);
}
}
Models/FooBarModel.cs
public class FooBarModel
{
public IEnumerable<SelectListItem> Locations { get; set; }
}
Views/Foo/Bar.cshtml
@model MyApp.Models.FooBarModel
<script>
var locations = @Html.Raw(Json.Encode(Model.Locations));
</script>
By the looks of your error message, it seems like you are mixing incompatible types (i.e. Ported_LI.Models.Location
and MyApp.Models.Location
) so, to recap, make sure the type sent from the controller action side match what is received from the view. For this sample in particular, new FooBarModel
in the controller matches @model MyApp.Models.FooBarModel
in the view.
You could use AJAX to call this controller action. For example if you are using jQuery you might use the $.ajax()
method:
<script type="text/javascript">
$.ajax({
url: '@Url.Action("NameOfYourAction")',
type: 'GET',
cache: false,
success: function(result) {
// you could use the result.values dictionary here
}
});
</script>