How to return Json result to razor view in mvc 4

C# Corner

suman goud

9y8.8kLearn iOS Programming

data showing in json format in browser , but i want to send to view

[HttpGet]

public JsonResult GetProductID(int Eid)

{

_productModuleAPI = new ProductModuleAPI();

var productModules = _productModuleAPI.GetAll();

lvm2.ProductsModulesViewModel = productModules.ToList();

return Json(lvm2, JsonRequestBehavior.AllowGet);

}

17 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vineet Kumar9y ago
you can use ajax for the same. I am showing you how you can append result to html div tag using jquery :

$(document).ready(function(){
$.ajax({
url: "home/getproductIid?eid=306",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (data) {
$("#mydata").Html(data); //where "mydata" is div id

}
});
});

Or you can also parse json using $.parseJSON() method to fetch properties
Mayank9y ago
function productClick(el) {
var Eid = $(el).attr("id");
$.ajax({
cache: false,
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: 'json',
url: "/Login/GetProductID",
data: { Eid: Eid },
success: function (data) {
debugger;
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Ajax Failed!!!");
}
}); // end ajax call
}
Bikesh Srivastava9y ago
Hi,
Everyone is given good example.it will resolve your query,
but you need to use html to contains json data e.g textarea...
Harshal Patil9y ago
Using Ajax call u can get it
var Selected ='test';
$.ajax({
type: 'POST',
url: '@Url.Action("GetProdList")',
dataType: 'json',
data: { statecode: Selected },

success: function (Ros) {
$("#dropdownID").append('');
$.each(Ros, function (i, Ro) {
$("#dropdownID").append('');
});
},
error: function (ex) {
alert('Failed to retrieve Ro code.' + ex);
}
});

and on .cs site

public JsonResult GetProdList(string statecode)
{
      var prodcode=GetallProdcode();
   List Pcodlst = new List();
      foreach (var prod in prodcode)
      {
         Pcodlst .Add(new SelectListItem { Text =prod.name, Value = prod.id });
      };
return Json(Pcodlst , JsonRequestBehavior.AllowGet);
}
suman goud9y ago
Yes Manas, it is not hitting my view page
Prakash Kumar9y ago
Hi Suman,

Call your function productClick() in page load method, then only the controller method will call,

First thing, your using ajax method and also using Model in view use any one mehtod.
$( document ).ready(function() {
    productClick();
});
Prakash Kumar9y ago
Suman,

Remove HttpGet Method, than return View with Model like this,
public ActionResult GetProductID(int Eid)
{
    var prodId = _productModuleAPI.GetProductId(Eid);
    LandingViewModel lvm2 = new LandingViewModel();
   _productModuleAPI = new ProductModuleAPI();
   var productModules = _productModuleAPI.GetAll(Eid);
   lvm2.ProductsModulesViewModel = productModules.ToList();
   return View(lvm2);
}
In View Page use Model like,
@model IEnumerable
then use,
@if (Model.productsViewModel != null)
{
    foreach (var item in Model.productsViewModel)
    {
        class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
        class="nav navbar-default">
              class="">"@item.ID" onclick="productClick(this)"                      @*href="@Url.Action("BLogic", "Login",new {  [email protected]})"*@>@item.PRODCTNAME"font-size:16px;"  class="pull-right hidden-xs showopacity ChangeButtonColorOrangeRed  glyphicon glyphicon-off">

}

else

{

no products

}

Manas Mohapatra9y ago

Where is the problem now.. Is that AJAX request hitting to controller action and returns result..

Ravi Patel9y ago

Hi,

refer this

https://www.asp.net/mvc/videos/mvc-2/how-do-i/how-do-i-return-json-formatted-data-for-an-ajax-call-in-an-aspnet-mvc-web-application

suman goud9y ago

@prakash and @salman

my view (above script included in this)

@if (Model.productsViewModel != null)

{

foreach (var item in Model.productsViewModel)

{

@item.PRODCTNAME

}

else

{

no products

}

controller

ActionResult BLogic()

{

LandingViewModel lvm2 = new LandingViewModel();

_productAPI = new ProductsAPI();

var products = _productAPI.GetAll();

lvm2.productsViewModel = products.ToList();

}

[HttpGet]

public JsonResult GetProductID(int Eid)

{

var prodId = _productModuleAPI.GetProductId(Eid);

LandingViewModel lvm2 = new LandingViewModel();

_productModuleAPI = new ProductModuleAPI();

var productModules = _productModuleAPI.GetAll(Eid);

lvm2.ProductsModulesViewModel = productModules.ToList();

return Json(lvm2, JsonRequestBehavior.AllowGet);

}

Salman Beg9y ago

@suman

Please write success and error function inside your ajax call so that you can easily get the data.

$.ajax({

url: '/Login/GetProductID',

type: "GET",

dataType: "json",

data: { Eid: Eid },

success:function(result)

{

console.log(result);

error:function()

{

console.log(error);

}

});

thanks.

Prakash Kumar9y ago

Hi Suman can you show your controller and view?

suman goud9y ago

am getting values i.e (list) but it is not hitting view page when am debugging

Prakash Kumar9y ago

function productClick(el) {
var Eid = $(el).attr("id");
$.ajax({
url: '/Login/GetProductID',
type: "GET",
dataType: "json",
data: { Eid: Eid },
success:function(result)
{
console.log(result);
}
});
}

check like this

suman goud9y ago

Thank you salman and prakash for responding,

i have written script like this

Prakash Kumar9y ago

Hi Suman,

Method 1:

Call Controller action by ajax method

Method 2:

Return View with model by controller

[HttpGet]
public JsonResult GetProductID(int Eid)
{
_productModuleAPI = new ProductModuleAPI();
var productModules = _productModuleAPI.GetAll();
lvm2.ProductsModulesViewModel = productModules.ToList();
return View(lvm2);
}

and use script in view to get values.

Hope it will work.

Salman Beg9y ago

Hi.

if you are calling this method from a ajax call then automatically the result will come in success when you send json data and in the success method you can retrieve all the values.

thanks.