Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
6
rated 0 times [  9] [ 3]  / answers: 1 / hits: 35263  / 10 Years ago, tue, february 18, 2014, 12:00:00

I`m new to client-server programming concepts. What I need, to send four js vars to my MVC 3 controller action.



    $(document).ready(function() {
var $jcrop;

$('#image').Jcrop({
bgColor: 'red',
onSelect: refreshData
}, function () {
$jcrop = this;
});

function refreshData(selected) {
myData = {
x1: selected.x1,
x2: selected.x2,
y1: selected.y1,
y2: selected.y2
};
}
});


So i get my vars in browser.



What I have on server side is:



    public ActionResult CreateCover(ImageCoordinates coordinates) {
ViewData.Model = coordinates;
return View();
}

public class ImageCoordinates
{
public int x1 { get; set; }
public int x2 { get; set; }
public int y1 { get; set; }
public int y2 { get; set; }
}


Is there an easy way to post my four params from js to my action?
I tried to use couple examples from this site, using $.ajax



Like this



        $.ajax({
url: '/dashboard/createcover',
type: 'POST',
data: JSON.stringify(myData),
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data.success);
},
error: function () {
alert(error);
},
async: false
});


But it does not worked, i received 0 0 0 0 in my action. But honestly I`m not even sure how to call this jquery function. Should i call it by clicking the button, or it auto calls when i post the form?
And are there other methods to send this params?


More From » jquery

 Answers
9

Here goes solution -



Model -



public class ImageCoordinates
{
public int x1 { get; set; }
public int x2 { get; set; }
public int y1 { get; set; }
public int y2 { get; set; }
}


Action -



    public ActionResult CreateCover(ImageCoordinates coordinates)
{
return null;
}


Lets create a View which will make the AJAX call to the Action.



<script src=~/Scripts/jquery-1.10.2.min.js></script>

<script>
function submitForm() {

var model = new Object();
model.x1 = 120;
model.y1 = 240;
model.x2 = 360;
model.y2 = 480;


jQuery.ajax({
type: POST,
url: @Url.Action(CreateCover),
dataType: json,
contentType: application/json; charset=utf-8,
data: JSON.stringify({ coordinates: model }),
success: function (data) {
alert(data);
},
failure: function (errMsg) {
alert(errMsg);
}
});
}
</script>

<input type=button value=Click onclick=submitForm() />


Output -



enter


[#72467] Sunday, February 16, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
emmaleet

Total Points: 203
Total Questions: 107
Total Answers: 98

Location: Cook Islands
Member since Thu, May 21, 2020
4 Years ago
;