JQuery - what is the best way to fire a MVC controller action via JQuery?

Question

Basically, I have several Radio Buttons in a filtering column. For example, if I am in the \Catalog\Flooring\Harwood section I have Radio Buttons for [Area Rugs], [Carpet] & [Stone & Tile]. So, what I want to do, instead of embedding an tag under the Radio Button I'd like to fire a JQuery event and do a regular post back to the server. I am thinking that $.post() should do it but I've not got it working correctly.

PS: Anyway to embed/include the jquery-1.3.2-vsdoc.js file in my JS file so I get full intellisense?

Answer 1

This is an ajax call to move an item up and down using an MVC controller action:

    [ActionName("item-reorder")]
 [AcceptVerbs(HttpVerbs.Post)]
 public string ItemReorder(Guid id, string direction)
 {
  ReorderDirection dir = (ReorderDirection)Enum.Parse(typeof(ReorderDirection), direction, true);
  int newSequence = this.WebServiceProxy.MoveItem(id, dir);
  if (newSequence >= 0)
   return ConfigurationManager.AppSettings["Ajax:Success"];
  else
   return ConfigurationManager.AppSettings["Ajax:Fail"];
 }

and the javascript:

AjaxMoveItem: function(row, direction) {
 //get the id from the attribute
 var itemId = row.attr('itemId');
 //update server
 $.ajax({
  type: 'POST',
  url: '/item-reorder',
  //data: ({ id: itemId, direction: direction }), //didn't work .. vars passed as null
  data: ({ id: itemId, direction: direction }),
  success: function(responseText) {
   if (responseText == 'success') {

    alert('moved');
   } else {
    alert('error: ' + responseText);
   }
  },
  error: function() {
   alert('unknown error');
  }
 });
},

Answer 2

You can use a GET -- this would do a get of /Catalog/Flooring/Harwood/

$(function() {
   $('input[type=radio]').click( function() {
       location.href = '<%= Url.Action( "Harwood", "Catalog/Flooring" ) %>' + '/' + $(this).val();
   });
});

<input type='radio' id='rugsRadio' name='typeRadio' value='AreaRugs' />
<input type='radio' id='carpetRadio' name='typeRadio' value='Carpet' />
...

Or you could use a POST -- this would do a post of /Catalog/Flooring/Harwood with the selected typeRadio as a form parameter:

$(function() {
    $('input[name=typeRadio]').click( function() {
        $('form#typeForm').submit();
    });
});

<% using (Html.BeginForm("Flooring","Catalog", new { id = "Harwood" })) { %>
    <input type='radio' id='rugsRadio' name='typeRadio' value='AreaRugs' />
    <input type='radio' id='carpetRadio' name='typeRadio' value='Carpet' />
    ...
<% } %>

Answer 3

Initialize:

$(document).ready(function() {
    // Bind actions...
    $("#Navigation li[title]").live("click", function(e) { e.preventDefault; this.blur(); return updateNavigation($(this).attr('title')); });
    $("#ItemsPerPage").change(function(e) { return updatePaging(); });

    $('input[name=ProductType]').click(function() { return updateRadio(); });  //{ $('form#typeForm').submit(); });
    $(":checkbox").change(function(e) { return updateCheck(); });
});

Respond to the ProductType radio button event:

function updateRadio() {
    var productGroup = $("#valProductGroup").attr('title');
    var productType = $("input:radio[checked]").val();
    var url = "/Catalog/" + productGroup + "/" + productType;

    window.location = url;
    return false;
}

Thanks all.