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

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 => 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

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 => 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

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

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

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

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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

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 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

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

[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