This post influenced Dave Ward’s post to replicate the behavior that he discussed within MonoRail application.  To mimic this behavior I created a method call RenderJsonError(Exception ex) inside my base controller (I want to reuse this method)

public abstract class AbstractBaseController: ARSmartDispatcherController{
   private void RenderJsonError(Exception ex){
      CancelLayout();
      Response.StatusCode = 500;
      Response.ContentType = "application/json; charset=utf-8";

      // I love this Framework :)
      var json = Context.Services.JSONSerializer.Serialize(
         new ErrorObject(){
            Message = e.Message,
            StackTrace = e.StackTrace
         });

      RenderText(json);
   }
}

From the code above look like I need to create a dummy DTO class ErrorObject and hand it over to JSONSerializer service instead of doing string escape/string concat myself :) MR use Newtonsoft.Json.dll behind the scene.

public abstract class AbstractBaseController: ARSmartDispatcherController{
  ....
  internal class ErrorObject{
     public string Message { get; set; }
     public string StackTrace { get; set; }
  }
}

Now let through some booms back to client

public class HomeController: AbstractBaseController{
   public void Index(){
      try{
          throw new Exception("Boom ! boom !");
      }catch(Exception ex){
          RenderJsonError(ex);
      }
   }
}

That work ! however if you don’t want to deal with try{..} catch {..} then combine this technique with RescueAttribute describe in my previous post.

Last year I blog about using jQuery.ajaxForm() to send http post request to MonoRail action and finally it depend on JSGenerator to produce javascript and send it back to client.

But overtime I find it pretty scary using that approach:

• It give too much control to the server – the server can generate a bunch of javascript and send off to the client sort of invade client responsibility.
• In some scenario I even specify from the server which div element I want to render my data table in

  page.ReplaceHtml('#divId', "content_to_be_replace_from_server")

• using approach in previous post I was not be able to ensure 100% that if I send piece of jquery script that it combine into the main DOM properly for instance I did have a form & a jQuery to confirm the form into ajaxForm but that behavior is not always reliable.

So what the deal now? well, I happen to change the strategy a while ago just haven’t got time to blog about it the solution is pretty simple “Don’t make JSGenerator your new hammer.”, Let see my simplify approach:

<div id='dlist'>
  <!-- I am going to render list of data in this div --></div>
<input type="button" value="Show data" onclick="showData();" />
<input type="button" value="Add more" onclick="addData();" />
<div id='dform' style='display: none;'>
  <!-- I am going to load form into this div --></div>

That pretty normal HTML markup right? 2 div one for display list of data second one for display form for adding more data and I also have 2 buttons to invoke client script (jQuery).

<script>
function showData(){
   $('#dlist').load( '/task/list.rails', {'status': 'incomplete'} );
}

function addData(){
   $('#dform').load( '/task/add.rails', {}, function(){
      $('#dform').show();
    });
}
</script>

Now that instead of using $.ajax I use $(‘#elementId’).load() instead because load() will inject html render by MonoRail action in the DOM and it just as native element.

Note : line 07 dform had style apply so that without having form inside it don’t occupy space in the page however one content loaded we need to set visibility for it.

For your reference the final piece of the puzzle is purely view code like this (View\task\add.brail)

<form method='post' id='taskForm' action='/task/create.rail'>
  Name: <input type='text' name='t.Name' />
  <input type='submit' value='Create' />
</form>

<!-- not inject some jQuery script along make the form submit via ajax -->
<script>
   $(function(){
       $('#taskForm').ajaxForm ({
          success: function(response){
            $('#dlist').html(response);
          },
          error: function (xhr, status, error) {} // handle error if you wish
        });
   });
</script>

Notice on line #09 : need the form to submit using ajax and line #11 the client take control where it want to place the result (list of task).

It seem like we have to write a bit more code (jQuery) but after all that the fun part of being a programmer write code that :) Hope this would help.

What scripting language would come to your mind first when you begin to talk about client-side scripting (web)? Don’t tell me it is VBScript or I’ll LOL, and so your answer would be? “JavaScript” alright +1 from me :). I believe most of the programmer who is reading this post knowing/aware of jQuery.

I can extend the talk about jQuery into a series of posts but I am not gonna do that because google would give you millions of result about jQuery and it usage.

Today what I am interested to talk about is using jQuery ajax functionality in conjunction with Castle.MonoRail to generate HTML Form on the fly and the form will also has ajax functionality. What does it mean? well let us all get into application context of adding new customer. In general we are going to have a customer page /customers which list all existing customers in a table format. Additional customer can be added by clicking on Add New Customer link wired up with a javascript function.

<a href='#' onclick='addNewCustomer()'>Add New Customer</a>

and the addNewCustomer() function looks like this:

<script language="javascript"> 

function addNewCustomer(){

   $.ajax({
      dataType: 'script',
      url: '/customers/addNewCustomer'
   });

}

</script>

From the above script the web browser going to send off a request to /customers/addNewCustomer which is going to handle by an action of CustomersController. If you care to see the action code it look like this:

[Layout("default"), Rescue("generalerror")]
public class CustomerController: SmartDispatcherController
{
    .... code removed for clarity 

    public void AddNewCustomer(){

        PropertyBag["c"] = new Customer();

    }

    .... code removed for clarity

}

and the rest of the work will be left over to the view engine to find the view template file and process it. Since I am a big fan of Brail View Engine the template file would be call AddNewCustomer.brail and the code look like this:

<form id='form1' method='post' action='/customer/create'>

   Name: ${Form.TextField("c.Name")}
   Phone: ${Form.TextField("c.Phone")}
   <input type='Submit' value='Create New' />

</form>

<script type='text/javascript'>

   $(document).ready(function(){

      $('#form1').ajaxForm( { dataType: 'script' } );

   });

</script>

Again it just simple HTML markup mixed with a few Brail’s tagging macro but take a closer look at the javascript code at bottom, what does it do? Well the idea is once the template is processed it going to generate a pure HTML form and send it back to the client side, however the javascript that send along will ensure that the new generated HTML form will perform a post back via jQuery ajax functionality. Hmm, sound cool. But didn’t I just waste a bytes of data with this approach? I tell you what, this application is going to run on a LAN so bandwidth is not a problem.

Up to this point everything works perfect, except for one final click on the Submit button to save new customer and oop! look there is a post without ajax It just work as normal as any other HTML form submission. Hmm, what I had discovered was by generating form id=’something’ or whatever as long as it is not id=’form1′. The submission of the form will route through ajax weir isn’t it? I haven’t investigate into jQuery code just yet jQuery might use form1 for something else internally, do you know what it is?

UPDATE 2008-11-25:

I believe my first assumption about form id attribute which cause ajax not to fire was wrong. What I recently found was if I am not calling $(document).ready(…); in the original page the generated dom pass in even if it contain $(document).ready(…) script block that block just do nothing.