Send data with jquery to an MVC controller

Question

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

did you try making a $.ajax with type:'POST'?

Furqan Hameedi
– Furqan Hameedi

2012-06-13 13:56:06 +00:00
Commented Jun 13, 2012 at 13:56 — Furqan Hameedi
– Furqan Hameedi, Commented Jun 13, 2012 at 13:56
no...can u provide a quick sample?

BoundForGlory
– BoundForGlory

2012-06-13 14:04:44 +00:00
Commented Jun 13, 2012 at 14:04 — BoundForGlory
– BoundForGlory, Commented Jun 13, 2012 at 14:04
@David did it already :), see below.

Furqan Hameedi
– Furqan Hameedi

2012-06-13 14:06:14 +00:00
Commented Jun 13, 2012 at 14:06 — Furqan Hameedi
– Furqan Hameedi, Commented Jun 13, 2012 at 14:06

David East · Accepted Answer · 2016-11-23 18:40:21Z

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)

AD.Net · Accepted Answer · 2012-06-13 13:56:16Z

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.

answered Jun 13, 2012 at 13:56

AD.Net

13.4k2 gold badges30 silver badges47 bronze badges

1 Comment

BoundForGlory Over a year ago

This isnt in a form plus the way the view is setup, the user can do multiple things independent of others, so a form isnt needed. I need a quick sample of the second thing you suggested

Terry · Accepted Answer · 2012-06-13 14:03:59Z

0

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();
}

answered Jun 13, 2012 at 14:03

Terry

14.2k9 gold badges58 silver badges84 bronze badges

Collectives™ on Stack Overflow

Send data with jquery to an MVC controller

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related