CODEWITHSUNDEEP
javascriptc#jqueryajaxasp.net-mvc
Konrad Viltersten
Konrad Viltersten

Reputation: 39058

How to pass a guid or string from $.post(...) method without a form?

I have the following method.

[HttpPost]
public void DoStuff(string input) { ... }

The invocation by the following script reaches the method but the input parameter is null. I've tested all the below variations, with the same result each time.

$.post("/DoStuff", "{input=bbbd861b-62ae-4eb5-9677-3aa2e354c583}", function() {})
$.post("/DoStuff", "{input:bbbd861b-62ae-4eb5-9677-3aa2e354c583}", function() {})
$.post("/DoStuff", "{bbbd861b-62ae-4eb5-9677-3aa2e354c583}", function() {})
$.post("/DoStuff", "bbbd861b-62ae-4eb5-9677-3aa2e354c583", function() {})

There are no errors reported on this and similar approach used when I serialize a complex argument, does work.

Not sure how to trouble-shoot it.

Upvotes: 1

Views: 15803

Answers (4)

user1675891
user1675891

Reputation:

Based on the comments from @phoenixx I 'll answer and add some extra value by an observation. The correct post URL is as follows. (Note: a single string, parameter name - equality sign - parameter value, no braces, no brackets, no parentheses.)

$.post("/DoStuff", "input=bbbd861b-62ae-4eb5-9677-3aa2e354c583", function() { });

It will issue the post if the method is in the right location in the directory structure and with the following signature.

[HttpPost]
public void DoStuff(string input) { ... }

I've seen you refer to a variable guid and I suspect that you're trying to compose the call in JavaScript using the attributes of a DOM element invoking the call. If so, please note that the following will not work.

var guid = event.target.attributes["id"];
// guid is: id="bbbd861b-62ae-4eb5-9677-3aa2e354c583"
// you need: "id=bbbd861b-62ae-4eb5-9677-3aa2e354c583"
$.post("/DoStuff", guid, function() { });

See the tiny difference? It's a tricky pitfall and easy to get confused. You want the serialized version of the attribute like this.

var guid = event.target.attributes["id"];
$.post("/DoStuff", "id=" + guid.value, function() { });

Upvotes: 0

roland
roland

Reputation: 7775

I'd recommend you to pass your key-value pair object as json:

var param = JSON.stringify({guid: 'bbbd861b-62ae-4eb5-9677-3aa2e354c583'});

$.post("/DoStuff", param, function() { ... }, 'json');

Note the last argument 'json'.

The property name must reflect the argument name (guid). If your argument name is id, your property name must be id. This is applicable for all types. MVC works in an case-insensitive way (at the very least for MVC4), which is cool by the way.

Doing so the framework will try to parse your argument to the type you declared.

I consider the guid as a valid one; the framework will not parse it properly if the value is not a valid guid. For the sake of testing, ensure that Guid.Parse("bbbd861b-62ae-4eb5-9677-3aa2e354c583") will return an object Guid.

If you declare DoStuff(string input) { }, pass a key-value pair as follows:

var param = JSON.stringify({input: 'bbbd861b-62ae-4eb5-9677-3aa2e354c583'});
$.post("/DoStuff", param, function() { ... }, 'json'); //json dataType

Inside DoStuff, you could parse it as Guid using Guid.Parse(input).

Upvotes: 2

Doc Roms
Doc Roms

Reputation: 3308

you can read the POST method with JQuery here.

You can easiest pass lot of variable like that : 

$.post( "/DoStuff", {input : "bbbd861b-62ae-4eb5-9677-3aa2e354c583" })
 .done(function( data ) {
   alert( "Data Loaded: " + data );
});

if you have a function: 

function doStuff(myVarStringGuid){
    $.post( "/DoStuff", {input: myVarStringGuid})
     .done(function( data ) {
       alert( "Data Loaded: " + data );
    });

}

On your PHP, you can get that variable like that : 

$guid= $_POST['input'];    // bbbd861b-62ae-4eb5-9677-3aa2e354c583

If it's a C# you can get that variable like that: 

string guid = Request.Form["input"];

Or with a Webmethod on codeBehind: 

[WebMethod]
public static string DoStuff(string input)
{
    myInput = input;
}

But, the 500 error is when the server can be access to your page... If your route http://yourWebsite/DoStuff exist, it's probably because your object is nor serialized correctly.

Also, for send a form with JQuery, I use the plugin ajaxForm is very easy to send a form with Ajax with this: (and we gain lot of time^^ ) 

<form id="myForm" action="DoStuff" method="post"> 
    <input type="text" name="input" /> 
    <input type="submit" value="Submit Comment" /> 
</form>

<script>
    $('#myForm').ajaxForm(function() { 
        alert("Guid was received ;-)"); 
    }); 
</script>

Don't forgot you can use the browsers developer tools for check your AJAX requests...

Upvotes: 1

Azim
Azim

Reputation: 1091

The error shows 500 Internal server error. So, somewhere your code at the server is failing because you may not have passed the values properly or the server code itself is buggy. When you do, form.serialize(), it produces a json structure of (key: value) pairs.

For example, "name": "Konrad" and at the server side you may accessed with

String name = request.getParameter("name");

But in other case, you are passing only value and not the key. So, the above statement could not find the parameter "name" in the request. This is what I can figure out from your question, may be you can debug your server side code for better clarity.

You need to send, {"guid": "WHATEVER_YOUR_VALUE"}

Its always better to use serialize() if you are working with form. But serialize() has some restrictions like it cannot serialize some fields from form based on the tag you used.

Upvotes: 0

Related Questions