Sending data using jquery to MVC controller

Question

I have an ASP.NET MVC3 application, and when the user clicks my anchor tag, I want to send 3 pieces of data to the action:

<a onclick='editDescription(<#= DocID,FileName,Description #>)'></a> 

This is javascript to call my action:

  function editDescription(docId,fileName,description) { var url = "@Url.Content("~/OrderDetail/_EditDescription/")" + docId+'/'+ fileName + '/' + description; //do the rest} 

My action:

  public ActionResult _EditDescription(string id,string filename, string descritpion) 

The parts I'm worried about are FileName and Description, because they can be loooooong, and I don't want the url to display like this:

  http://localhost/OrderDetail/_EditDescription/123/some long filename.pdf/this is a long description for the name 

How can I send my data to my action without sending it as query strings? Thanks

Answer 1

You can use jQuery $ .ajax method:

 <div id="what-I-want-updated"> <input id="whatever-the-id-is" type="text" value="@Model.ID" /> <br /> <input id="whatever-the-filename" type="text" value="@Model.Filename" /> <br /> <input id="whatever-the-description" type="text" value="@Model.Description" /> <br /> <button id="whatIsClicked">Update!</button> </div> <!-- /#what-I-want-updated --> <script> // You're probably clicking something to initiate update var $whatIsClicked = $('#whatIsClicked'); // .live persists on the page even after other ajax calls // So when the thing is clicked $whatIsClicked.live('click', function() { // Grab the information needed to update var theId = $('#whatever-the-id-is').val(); //Or it could be .text() var theFilename = $('#whatever-the-filename').val(); var theDescript = $('#whatever-the-description').val(); // Let edit the description! $.ajax({ type: "POST", url: "OrderDetail/_EditDescription", // the method we are calling contentType: "application/json; charset=utf-8", data: {id: theId, filename: theFilename, description: theDescript}, dataType: "json", success: function (result) { alert('Yay! It worked!'); // Or if you are returning something alert('I returned... ' + result.WhateverIsReturning); }, error: function (result) { alert('Oh no :('); } }); }); </script> 

Despite the fact that it will still work, make sure that you change your controller method:

 [HttpPost] public ActionResult _EditDescription(string id, string filename, string descritpion) 

Answer 2

You can make a full post of the form if you like it either through ajax $.post , or by acting on the [HttpPost] attribute.

Answer 3

Declare your action as POST

 [HttpPost] public ActionResult _EditDescription(string docId, string filename, string description) 

Create an invisible HTML form:

 <form action="@Url.Content("~/OrderDetail/_EditDescription/")" method="post" name="editDescriptionForm"> <input type="hidden" name="docId" /> <input type="hidden" name="fileName" /> <input type="hidden" name="description" /> </form> 

Fill out the form and submit it using JS:

 function editDescription(docId, fileName, description) { document.editDescriptionForm.docId = docId; ... document.editDescriptionForm.submit(); }