Simple Ajax Call

Javascript

Syntax: $.sheepJax(options)
Options are similar to those of jQuery's $.ajax(). The only difference is instead of defining success and error functions to handle the outcome, SheepJax accepts commands which contains callback functions that can be triggered from the server-side.
Example:
$.sheepJax({
    url: "@Url.Action("AddToCart")",
    data: $("#add_to_cart_form").serialize(),
    commands: {
        SetCartTotal: function(totalPrice, totalItems) {
            $("#cart_total_price").text(totalPrice);
            $("#cart_total_item").text(totalItems);
        },
        UpdateCartContents: function(html){
            $("#cart-content").html(html);
        },
        DisableProduct: function(productId, reason){
             $(".product[data-productId={0}]".format(productId)).addClass("disabled")
                  .find("div.warning").text(label);
        },
        ShowInfo: function(message) { myproject.alerts.showInfo(message); },
        ShowError: function(message) { myproject.alerts.showError(message); }
    }
})

MVC3 Controller (Strong-Type)

using SheepJax;
public class CatalogueController
{
    [HttpPost]
    public ActionResult AddToCart(Product product, int qty)
    {
        return SheepJaxed.On<ICartCommands>(cmd=>
        {
            if(!product.IsValid)
                cmd.ShowError("Product is no longer available")
                    .DisableProduct(product.Id, "No longer available");
            else if(!product.IsInStock)
                cmd.ShowError("Product is sold out")
                    .DisableProduct(product.Id, "Sold out");
                    
            var cart = GetMyCart();
            cart.AddProduct(product, qty);
            
            cmd.UpdateCartContents(PartialView("CartContents", cart));
            cmd.ShowInfo("Product added to the cart")
                .SetCartTotal(cart.TotalPrice, cart.TotalItems);
        }
    }
}

We define an interface as a strong-type proxy to the Javascript commands. This interface is only implemented on the Javascript side, as above.
Each method can either return void, or any type assignable to ICartCommand for fluent-chaining purposes.
public interface ICartCommands
{
    void SetCartTotal(decimal totalPrice, int totalItems);
    void UpdateCartContents(ViewResult html);
    void DisableProduct(int productId, string reason);
    ICartCommands ShowInfo(string message);
    ICartCommands Error(string message);
}

MVC3 Controller (Dynamic)

As an alternative, you can skip the part about writing a strong-type interface, and just invoke your commands using dynamic construct.
using SheepJax;
public class CatalogueController
{
    [HttpPost]
    public ActionResult AddToCart(Product product, int qty)
    {
        return SheepJaxed.Dynamic(cmd=>
        {
            if(!product.IsValid)
                cmd.ShowError("Product is no longer available")
                    .DisableProduct(product.Id, "No longer available");
            else if(!product.IsInStock)
                cmd.ShowError("Product is sold out")
                    .DisableProduct(product.Id, "Sold out");
                    
            var cart = GetMyCart();
            cart.AddProduct(product, qty);
            
            cmd.UpdateCartContents(PartialView("CartContents", cart));
            cmd.ShowInfo("Product added to the cart")
                .SetCartTotal(cart.TotalPrice, cart.TotalItems);
        }
    }
}

Last edited Sep 22, 2011 at 3:59 PM by hendryluk, version 5

Comments

No comments yet.