Send data with jquery to an MVC controller

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

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

This is the 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 pieces im concerned about are FileName and Description because these can be loooooong and i dont want a url to appear like so:

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

How can i send across my data to my action without having to send it like a query string? Thanks

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use the 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's 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>

Even though it will still work, make sure you change your Controller method to:

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

Method 2

You can do a full post of the form if you like either through ajax $.post or by having an action with [HttpPost] attribute.

Method 3

Declare your action as a 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 with JS:

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

    document.editDescriptionForm.submit();
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0