Ajax call return always a null object - ajax

Question

I know there are a lot of similar posts about this topic but I'm still not able to solve my problem.
I'm trying to call an ActioResult method with a button from my controller through ajax.
The problem is I always get back a null object
I'm quiet sure the problem is that I'm not able to bind the ajax call with the controller in the "data: " field
The AJAX call:
$(document).ready(function () {
$(".milkmilk").click(function () {
$.ajax({
type: "POST",
url: '#Url.Action("GoatMilk", "User")',
datatype: "html",
data: { name: 'name' },
success: function (data) {
$(this).closest('[data-rel]').html(data);
},
error: function (data) {
alert("error!");
}
});
});
});
The controller:
public ActionResult GoatMilk(string name)
{
var rep = new GoatRepository();
var goat = rep.GetAnimal(name);
if(goat != null)
{
var model = FarmFactory.CreateAnimalModel<GoatViewModel>(goat) as GoatViewModel;
model.Milk = rep.MilkProduction(goat);
_MyEchoFarmDB.Update(goat);
var rek = new FarmRepository();
var deposit = rek.GetDeposit(name);
deposit.Milk = goat.Milk;
db.Update(deposit);
return Json(model.Milk, JsonRequestBehavior.AllowGet);
}
return View();
}
The Html code
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
<button class="milkmilk" data-rel="item.Name">MILK</button>
</td>
</tr>
</tbody>
}
The code never enters inside the if(goat != null), so I always get back an error (notice that without the Ajax call the method works just fine)
Thank you!

Answer 1

It may not be the cleanest way to solve this, but seems to run smoothly
HTML:
<td>
<button type="button" class="milk" data-rel="#item.Name">MILK</button>
<p class="milkGoat">#item.Milk</p>
</td>
Controller:
public JsonResult GoatMilk(string name)
{
return Json(model.Milk, JsonRequestBehavior.AllowGet);
}
Ajax:
<script type="text/javascript">
$(document).ready(function () {
$(".milk").click(function () {
var name = $(this).data('rel');
var me = $(this)
$.ajax({
type: "POST",
url: '#Url.Action("GoatMilk", "User")',
datatype: "html",
data: { name: name },
success: function (milk) {
me.next(".milkGoat").html(milk);
},
error: function (milk) {
alert("error!");
}
});
});
});
</script>

Answer 2

instead of ActionResult try JsonResult method to return
public JsonResult GoatMilk()
{
return Json();
}