ASP NET MVC controller actions that return JSON or partial html

Question

I am trying to create controller actions which will return either JSON or partial html depending upon a parameter  What is the best way to get the result returned to an MVC page asynchronously

User · Answer

Another nice way to deal with JSON data is using the JQuery getJSON function. You can call the

public ActionResult SomeActionMethod(int id) 
{ 
    return Json(new {foo="bar", baz="Blech"});
}

Method from the jquery getJSON method by simply...

$.getJSON("../SomeActionMethod", { id: someId },
    function(data) {
        alert(data.foo);
        alert(data.baz);
    }
);

User · Answer

In your action method  return Json object  to return JSON to your page   public ActionResult SomeActionMethod       return Json new  foo  bar   baz  Blech         Then just call the action method using Ajax  You could use one of the helper methods from the ViewPage such as    lt    Ajax ActionLink  SomeActionMethod   new AjaxOptions  OnSuccess  somemethod      gt    SomeMethod would be a javascript method that then evaluates the Json object returned   If you want to return a plain string  you can just use the ContentResult   public ActionResult SomeActionMethod         return Content  hello world         ContentResult by default returns a text plain as its contentType  This is overloadable so you can also do   return Content   lt xml gt This is poorly formatted xml  lt  xml gt     text xml

User · Answer

To answer the other half of the question  you can call   return PartialView  viewname      when you want to return partial HTML  You ll just have to find some way to decide whether the request wants JSON or HTML  perhaps based on a URL part parameter

User · Answer

Another nice way to deal with JSON data is using the JQuery getJSON function. You can call the

public ActionResult SomeActionMethod(int id) 
{ 
    return Json(new {foo="bar", baz="Blech"});
}

Method from the jquery getJSON method by simply...

$.getJSON("../SomeActionMethod", { id: someId },
    function(data) {
        alert(data.foo);
        alert(data.baz);
    }
);

User · Answer

PartialViewResult and JSONReuslt inherit from the base class ActionResult  so if return type is decided dynamically declare method output as ActionResult   public ActionResult DynamicReturnType string parameter                        if  parameter     JSON                   return Json   lt JSON gt    JsonRequestBehavior AllowGet               else if  parameter     PartialView                   return PartialView   lt ViewName gt                 else                 return null

User · Answer

In your action method  return Json object  to return JSON to your page   public ActionResult SomeActionMethod       return Json new  foo  bar   baz  Blech         Then just call the action method using Ajax  You could use one of the helper methods from the ViewPage such as    lt    Ajax ActionLink  SomeActionMethod   new AjaxOptions  OnSuccess  somemethod      gt    SomeMethod would be a javascript method that then evaluates the Json object returned   If you want to return a plain string  you can just use the ContentResult   public ActionResult SomeActionMethod         return Content  hello world         ContentResult by default returns a text plain as its contentType  This is overloadable so you can also do   return Content   lt xml gt This is poorly formatted xml  lt  xml gt     text xml

User · Answer

For folks who have upgraded to MVC 3 here is a neat way Using MVC3 and Json

User · Answer

To answer the other half of the question  you can call   return PartialView  viewname      when you want to return partial HTML  You ll just have to find some way to decide whether the request wants JSON or HTML  perhaps based on a URL part parameter

User · Answer

I found a couple of issues implementing MVC ajax GET calls with JQuery that caused me headaches so sharing solutions here    Make sure to include the data type  json  in the ajax call   This will automatically parse the returned JSON object for you  given the server returns valid json   Include the JsonRequestBehavior AllowGet  without this MVC was returning a HTTP 500 error  with dataType  json specified on the client   Add cache  false to the   ajax call  otherwise you will ultimately get HTTP 304 responses  instead of HTTP 200 responses  and the server will not process your request  Finally  the json is case sensitive  so the casing of the elements needs to match on the server side and client side    Sample JQuery     ajax     type   get     dataType   json     cache  false    url    MyController MyMethod     data    keyid  1  newval  10      success  function  response  textStatus  jqXHR        alert parseInt response oldval      changed to     newval                                              error  function jqXHR  textStatus  errorThrown        alert  Error -     errorThrown             Sample MVC code    HttpGet  public ActionResult MyMethod int keyid  int newval      var oldval   0     using  var db   new MyContext            var dbRecord   db MyTable Where t   gt  t keyid    keyid  FirstOrDefault         if  dbRecord    null              oldval   dbRecord TheValue        dbRecord TheValue   newval        db SaveChanges                   return Json new   success   true  oldval   oldval                   JsonRequestBehavior AllowGet

User · Answer

You may want to take a look at this very helpful article which covers this very nicely   Just thought it might help people searching for a good solution to this problem   http   weblogs asp net rashid archive 2009 04 15 adaptive-rendering-in-asp-net-mvc aspx

User · Answer

Another nice way to deal with JSON data is using the JQuery getJSON function. You can call the

public ActionResult SomeActionMethod(int id) 
{ 
    return Json(new {foo="bar", baz="Blech"});
}

Method from the jquery getJSON method by simply...

$.getJSON("../SomeActionMethod", { id: someId },
    function(data) {
        alert(data.foo);
        alert(data.baz);
    }
);

User · Answer

I think you should consider the AcceptTypes of the request   I am using it in my current project to return the correct content type as follows   Your action on the controller can test it as on the request object   if  Request AcceptTypes Contains  text html         return View      else if  Request AcceptTypes Contains  application json         return Json  new   id 1  value  new         else if  Request AcceptTypes Contains  application xml                Request AcceptTypes Contains  text xml                You can then implement the aspx of the view to cater for the partial xhtml response case   Then in jQuery you can fetch it passing the type parameter as json     get url  null  function data  textStatus            console log  got  o with status  s   data  textStatus               json       or xml  html  script  json  jsonp or text   Hope this helps James

User · Answer

You may want to take a look at this very helpful article which covers this very nicely   Just thought it might help people searching for a good solution to this problem   http   weblogs asp net rashid archive 2009 04 15 adaptive-rendering-in-asp-net-mvc aspx

User · Answer

To answer the other half of the question  you can call   return PartialView  viewname      when you want to return partial HTML  You ll just have to find some way to decide whether the request wants JSON or HTML  perhaps based on a URL part parameter

User · Answer

Alternative solution with incoding framework  Action return json  Controller       HttpGet      public ActionResult SomeActionMethod                 return IncJson new SomeVm   Id   1 Name   Inc             Razor page   using  var template   Html Incoding   ScriptTemplate lt SomeVm gt   tmplId          using  var each   template ForEach                   lt span gt  Id   each For r  gt r Id  Name   each For r  gt r Name  lt  span gt             Html When JqueryBind InitIncoding     Do      AjaxGet Url Action  SomeActionMethod   SomeContoller       OnSuccess dsl   gt  dsl Self   Core                                  Insert                                WithTemplate Selector Jquery Id  tmplId                                   Html       AsHtmlAttributes      ToDiv      Action return html  Controller       HttpGet      public ActionResult SomeActionMethod                 return IncView            Razor page    Html When JqueryBind InitIncoding     Do      AjaxGet Url Action  SomeActionMethod   SomeContoller       OnSuccess dsl   gt  dsl Self   Core   Insert Html       AsHtmlAttributes      ToDiv

User · Answer

For folks who have upgraded to MVC 3 here is a neat way Using MVC3 and Json

User · Answer

public ActionResult GetExcelColumn                                 List lt string gt  lstAppendColumn   new List lt string gt                 lstAppendColumn Add  First                lstAppendColumn Add  Second                lstAppendColumn Add  Third      return Json new   lstAppendColumn   lstAppendColumn   Status    Success     JsonRequestBehavior AllowGet

User · Answer

Flexible approach to produce different outputs based on the request  public class AuctionsController   Controller     public ActionResult Auction long id          var db   new DataContext        var auction   db Auctions Find id           Respond to AJAX requests     if  Request IsAjaxRequest          return PartialView  Auction   auction           Respond to JSON requests     if  Request IsJsonRequest          return Json auction           Default to a  normal  view with layout     return View  Auction   auction           The Request IsAjaxRequest   method is quite simple  it merely checks the HTTP headers for the incoming request to see if the value of the X-Requested-With header is XMLHttpRequest  which is automatically appended by most browsers and AJAX frameworks   Custom extension method to check whether the request is for json or not so that we can call it from anywhere  just like the Request IsAjaxRequest   extension method   using System  using System Web   public static class JsonRequestExtensions     public static bool IsJsonRequest this HttpRequestBase request          return string Equals request  format     json            Source   https   www safaribooksonline com library view programming-aspnet-mvc 9781449321932 ch06 html  javascript rendering

User · Answer

I think you should consider the AcceptTypes of the request   I am using it in my current project to return the correct content type as follows   Your action on the controller can test it as on the request object   if  Request AcceptTypes Contains  text html         return View      else if  Request AcceptTypes Contains  application json         return Json  new   id 1  value  new         else if  Request AcceptTypes Contains  application xml                Request AcceptTypes Contains  text xml                You can then implement the aspx of the view to cater for the partial xhtml response case   Then in jQuery you can fetch it passing the type parameter as json     get url  null  function data  textStatus            console log  got  o with status  s   data  textStatus               json       or xml  html  script  json  jsonp or text   Hope this helps James

User · Answer

To answer the other half of the question  you can call   return PartialView  viewname      when you want to return partial HTML  You ll just have to find some way to decide whether the request wants JSON or HTML  perhaps based on a URL part parameter

User · Answer

In your action method  return Json object  to return JSON to your page   public ActionResult SomeActionMethod       return Json new  foo  bar   baz  Blech         Then just call the action method using Ajax  You could use one of the helper methods from the ViewPage such as    lt    Ajax ActionLink  SomeActionMethod   new AjaxOptions  OnSuccess  somemethod      gt    SomeMethod would be a javascript method that then evaluates the Json object returned   If you want to return a plain string  you can just use the ContentResult   public ActionResult SomeActionMethod         return Content  hello world         ContentResult by default returns a text plain as its contentType  This is overloadable so you can also do   return Content   lt xml gt This is poorly formatted xml  lt  xml gt     text xml

User · Answer

I found a couple of issues implementing MVC ajax GET calls with JQuery that caused me headaches so sharing solutions here    Make sure to include the data type  json  in the ajax call   This will automatically parse the returned JSON object for you  given the server returns valid json   Include the JsonRequestBehavior AllowGet  without this MVC was returning a HTTP 500 error  with dataType  json specified on the client   Add cache  false to the   ajax call  otherwise you will ultimately get HTTP 304 responses  instead of HTTP 200 responses  and the server will not process your request  Finally  the json is case sensitive  so the casing of the elements needs to match on the server side and client side    Sample JQuery     ajax     type   get     dataType   json     cache  false    url    MyController MyMethod     data    keyid  1  newval  10      success  function  response  textStatus  jqXHR        alert parseInt response oldval      changed to     newval                                              error  function jqXHR  textStatus  errorThrown        alert  Error -     errorThrown             Sample MVC code    HttpGet  public ActionResult MyMethod int keyid  int newval      var oldval   0     using  var db   new MyContext            var dbRecord   db MyTable Where t   gt  t keyid    keyid  FirstOrDefault         if  dbRecord    null              oldval   dbRecord TheValue        dbRecord TheValue   newval        db SaveChanges                   return Json new   success   true  oldval   oldval                   JsonRequestBehavior AllowGet

User · Answer

Another nice way to deal with JSON data is using the JQuery getJSON function. You can call the

public ActionResult SomeActionMethod(int id) 
{ 
    return Json(new {foo="bar", baz="Blech"});
}

Method from the jquery getJSON method by simply...

$.getJSON("../SomeActionMethod", { id: someId },
    function(data) {
        alert(data.foo);
        alert(data.baz);
    }
);

User · Answer

public ActionResult GetExcelColumn                                 List lt string gt  lstAppendColumn   new List lt string gt                 lstAppendColumn Add  First                lstAppendColumn Add  Second                lstAppendColumn Add  Third      return Json new   lstAppendColumn   lstAppendColumn   Status    Success     JsonRequestBehavior AllowGet

User · Answer

In your action method  return Json object  to return JSON to your page   public ActionResult SomeActionMethod       return Json new  foo  bar   baz  Blech         Then just call the action method using Ajax  You could use one of the helper methods from the ViewPage such as    lt    Ajax ActionLink  SomeActionMethod   new AjaxOptions  OnSuccess  somemethod      gt    SomeMethod would be a javascript method that then evaluates the Json object returned   If you want to return a plain string  you can just use the ContentResult   public ActionResult SomeActionMethod         return Content  hello world         ContentResult by default returns a text plain as its contentType  This is overloadable so you can also do   return Content   lt xml gt This is poorly formatted xml  lt  xml gt     text xml

User · Answer

Alternative solution with incoding framework  Action return json  Controller       HttpGet      public ActionResult SomeActionMethod                 return IncJson new SomeVm   Id   1 Name   Inc             Razor page   using  var template   Html Incoding   ScriptTemplate lt SomeVm gt   tmplId          using  var each   template ForEach                   lt span gt  Id   each For r  gt r Id  Name   each For r  gt r Name  lt  span gt             Html When JqueryBind InitIncoding     Do      AjaxGet Url Action  SomeActionMethod   SomeContoller       OnSuccess dsl   gt  dsl Self   Core                                  Insert                                WithTemplate Selector Jquery Id  tmplId                                   Html       AsHtmlAttributes      ToDiv      Action return html  Controller       HttpGet      public ActionResult SomeActionMethod                 return IncView            Razor page    Html When JqueryBind InitIncoding     Do      AjaxGet Url Action  SomeActionMethod   SomeContoller       OnSuccess dsl   gt  dsl Self   Core   Insert Html       AsHtmlAttributes      ToDiv

User · Answer

Flexible approach to produce different outputs based on the request  public class AuctionsController   Controller     public ActionResult Auction long id          var db   new DataContext        var auction   db Auctions Find id           Respond to AJAX requests     if  Request IsAjaxRequest          return PartialView  Auction   auction           Respond to JSON requests     if  Request IsJsonRequest          return Json auction           Default to a  normal  view with layout     return View  Auction   auction           The Request IsAjaxRequest   method is quite simple  it merely checks the HTTP headers for the incoming request to see if the value of the X-Requested-With header is XMLHttpRequest  which is automatically appended by most browsers and AJAX frameworks   Custom extension method to check whether the request is for json or not so that we can call it from anywhere  just like the Request IsAjaxRequest   extension method   using System  using System Web   public static class JsonRequestExtensions     public static bool IsJsonRequest this HttpRequestBase request          return string Equals request  format     json            Source   https   www safaribooksonline com library view programming-aspnet-mvc 9781449321932 ch06 html  javascript rendering

User · Answer

PartialViewResult and JSONReuslt inherit from the base class ActionResult  so if return type is decided dynamically declare method output as ActionResult   public ActionResult DynamicReturnType string parameter                        if  parameter     JSON                   return Json   lt JSON gt    JsonRequestBehavior AllowGet               else if  parameter     PartialView                   return PartialView   lt ViewName gt                 else                 return null

[ajax] ASP.NET MVC controller actions that return JSON or partial html

Examples related to ajax

Examples related to asp.net-mvc

Examples related to json

Examples related to asp.net-ajax