BoundForGlory BoundForGlory - 1 year ago 68
Javascript Question

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

Answer Source

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 -->


    // 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
    $'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!
         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 :(');

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

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