After Thought

Switch between View Result and Json Result without sweat in FubuMVC

with 3 comments

Kazi Manzur Rashid wrote a great post on Adaptive Rendering in MVC that is used to return the result based on the request using the same action method. The clear advantage here is that you avoid duplicating your code in the action method just to cater to different request types (like ViewResult, JsonResult).

Chad Myers recently added a feature to FubuMVC that makes adaptive rendering seamless. We will continue to use FubuMvcSampleApplication to demonstrate this feature. First let us add the action convention wire_up_JSON_URL and behaviour output_as_json_if_requested to ControllerConfiguration.Configure() method that is called from our BootStrapper class. Adding wire_up_JSON_URL will simply add another URL (*.json) for every action. For example, if we have a save action, this will add another url save.json during the setup. Now our action responds to url save as well as save.json. output_as_json_if_requested overrides the conventional result and displays a Json result if it is a Json request.

// Action conventions
x.ActionConventions(convention =>

// Default behaviour for all actions
x.ByDefault.EveryControllerAction(action =>

// add a behaviour to output as Josn if it is a json request
x.ByDefault.EveryControllerAction(action =>

We will now go ahead and implement our action method. For simplicity sake, we will implement a Display action that simply returns UserDetails for the given UserId. Let us add a small piece in action method for the sake of demonstration that populates the Message with either Json Result or View Result based on where the request is coming from.

public UserEditViewModel Display(UserEditViewModel userEditViewModel)
  User user = _userRepository.GetUser(userEditViewModel.UserId);
  return new UserEditViewModel(user)
    Message = userEditViewModel.IsAjaxRequest() ? "Json Result" : "View Result"

Now let us add a view Display.aspx to demonstrate this feature.

<%= this.FormFor((UserController controller) => controller.Display(null))%>
 <legend>User Details</legend>

Enter john_doe or user2

 <%= this.TextBoxFor(user => user.UserId).ElementId("UserId").Required().WithLabel("UserId")%>
 <input type="button" id="DisplayUsingJson" name="DisplayUsingJson" value = "Display Details Using Json" />                    
 <%= this.SubmitButton("Display", "Display").Class("button") %>

 <%= this.TextBoxFor(user => user.LastName).ElementId("LastName").ReadOnly().WithLabel("Last Name") %>

 <%= this.TextBoxFor(user => user.FirstName).ElementId("FirstName").ReadOnly().WithLabel("First Name") %>                    


Enter a user_id and click on Display button to display user details using default behaviour (View Result).


Add the following javascript (uses jquery) that is fired when a user clicks on Display Details using Json button.

function Display() {
 var user = {};
 user.UserId = $("#UserId").val();

 $.getJSON("Display.json", user, function(user) {

Clicking on Display Details using Json button calls the action method Display using the other url “Display.json” that is used by Fubu to identify where the request is coming from.


We just saw how easy it is to switch between JsonResult or ViewResult. It is features like these, that make FubuMvc a very effective and powerful alternative to MVC. I have added the above feature to FubuMVCSampleApplication project and you can download the source code here.


Written by shashankshetty

May 25, 2009 at 7:20 pm

3 Responses

Subscribe to comments with RSS.

  1. Switch between View Result and Json Result without sweat in FubuMVC « Shashank’s Blog…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…


    May 26, 2009 at 5:43 am

  2. […] to VoteSwitch between View Result and Json Result without sweat in FubuMVC (5/25/2009)Monday, May 25, 2009 from shashankshettyKazi Manzur Rashid wrote a great post on Adaptive Rendering […]

  3. […] Switch between View Result and Json Result without sweat in FubuMVC […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: