On
the blog post “If Then, If Then, If Then, MVC” I found
the following code example: [HttpGet]public ActionResult List()
{
var list = new[] { "John", "Pete", "Ben" };
if (Request.AcceptTypes.Contains("application/json")) {
return Json(list, JsonRequestBehavior.AllowGet);
}
if (Request.IsAjaxRequest()) [
return PartialView("_List", list);
}
return View(list);
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
The code is a ASP.NET MVC Controller where it reuse
the same “business” code but returns JSON if
the request require JSON, a partial view when
the request is an AJAX request or a normal ASP.NET MVC View.
The above code may have several reasons to be changed, and also do several things,
the code is not closed for modifications. To extend
the code with a new way of presenting
the model,
the code need to be modified. So I started to think about how
the above code could be rewritten so it will follow
the Single Responsibility and open-close principle. I came up with
the following result and with
the use of ASP.NET Web API:
public String[] Get()
{
return new[] { "John", "Pete", "Ben" };
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
It just returns
the model, nothing more.
The code will do one
thing and it will do it well. But it will not solve
the problem when it comes to return Views. If we use
the ASP.NET Web Api we can get
the result as JSON or XML, but not as a partial view or as a ASP.NET MVC view. Wouldn’t it be nice if we could do
the following against
the Get() method?
Accept: application/json
JSON will be returned – Already part of
the Web API
Accept: text/html
Returns
the model as HTML by using a View
The best
thing, it’s possible!
By using
the RazorEngine I created a custom MediaTypeFormatter (RazorFormatter, code at
the end of this blog post) and associate it with
the media type “text/html”. I decided to use convention before configuration to decide which Razor view should be used to render
the model. To register
the formatter I added
the following code to Global.asax:
GlobalConfiguration.Configuration.Formatters.Add(new RazorFormatter());
Here is an example of a ApiController that just simply returns a model:
using System.Web.Http;
namespace WebApiRazor.Controllers
{
public class CustomersController : ApiController
{
// GET api/values
public Customer Get()
{
return new Customer { Name = "John Doe", Country = "Sweden" };
}
}
public class Customer
{
public string Name { get; set; }
public string Country { get; set; }
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Because I decided to use convention before configuration I only need to add a view with
the same name as
the model, Customer.cshtml, here is
the example of
the View:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="body">
<section>
<div>
<hgroup>
<h1>Welcome '@Model.Name' to ASP.NET Web API Razor Formatter!</h1>
</hgroup>
</div>
<p>
Using
the same URL "api/values" but using AJAX: <button>Press to show content!</button>
</p>
<p>
</p>
</section>
</div>
</body>
<script type="text/javascript">
$("button").click(function () {
$.ajax({
url: '/api/values',
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data, status, xhr)
{
alert(data.Name);
},
error: function(xhr, status, error)
{
alert(error);
}});
});
</script>
</html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Now when I open up a browser and enter
the following URL: http://localhost/api/customers
the above View will be displayed and it will render
the model
the ApiController returns. If I use Ajax against
the same ApiController with
the content type set to “json”,
the ApiController will now return
the model as JSON.
Here is a part of a really early prototype of
the Razor formatter (The code is far from perfect, just use it for testing). I will rewrite
the code and also make it possible to specify an attribute to
the returned model, so it can decide which view to be used when
the media type is “text/html”, but by default
the formatter will use convention:
using System;
using System.Net.Http.Formatting;
namespace WebApiRazor.Models
{
using System.IO;
using System.Net;
using System.Net.Http.Headers;
using System.Reflection;
using System.Threading.Tasks;
using RazorEngine;
public class RazorFormatter : MediaTypeFormatter
{
public RazorFormatter()
{
SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/xhtml+xml"));
}
//...
public override Task WriteToStreamAsync(
Type type,
object value,
Stream stream,
HttpContentHeaders contentHeaders,
TransportContext transportContext)
{
var task = Task.Factory.StartNew(() =>
{
var viewPath = // Get path to
the view by
the name of
the type
var template = File.ReadAllText(viewPath);
Razor.Compile(template, type, type.Name);
var razor = Razor.Run(type.Name, value);
var buf = System.Text.Encoding.Default.GetBytes(razor);
stream.Write(buf, 0, buf.Length);
stream.Flush();
});
return task;
}
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Summary
By using formatters and
the ASP.NET Web API we can easily just extend our code without doing any changes to our ApiControllers when we want to return a new format. This blog post just showed how we can extend
the Web API to use Razor to format a returned model into HTML.
If you want to know when I will post more blog posts, please feel free to follow me on twitter: @fredrikn
