ASP.NET MVC passing data to partial view through ajax - ajax

Question

I am using full calendar library, where I load my events as JSON and display them in the calendar.
What I would like to do next is to load an id of the latest event and display information about the event from the model in the partial view. This is my code so far:
<div id="calendar"></div>
<div id="myPartial"></div>
<script>
$('#calendar').fullCalendar({
aspectRatio: 3,
events: function (start, end, timezone, callback) {
$.getJSON("#Url.Action("GetEvents")", function (locationsArray) {
var result = $(locationsArray).map(function () {
return {
id: this.idEvent,
title: this.eventName,
start: this.startTime,
end: this.endTime,
allDay: this.allDay
};
}).toArray();
callback(result);
var id_latest = result[result.length - 1].id
success: $(function (id_latest) {
$.ajax({
type: "POST",
url: '#Url.Action("AddContent","Home")',
data: { id: id_latest },
error: function () {
alert("An error occurred.");
},
success: function (data) {
$("#myPartial").html(data);
}
});
});
});
}
});
</script>
What am I missing here? What is the proper way to do it?
Edit:
Controller:
namespace bezeckaApp.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult AddContent(int? id)
{
return PartialView("~/Views/Home/AddContent.cshtml");
}
public ActionResult GetEvents()
{
List<Treninky> trenink = new List<Treninky>();
trenink.Add(new Treninky() { idEvent = 1, eventName = "Morning run", startTime = "2017-07-01T08:00:00Z", endTime = "2017-07-01T09:00:00", allDay = false });
trenink.Add(new Treninky() { idEvent = 2, eventName = "Evening run", startTime = "2017-07-05T17:00:00Z", endTime = "2017-07-05T18:00:00", allDay = false });
trenink.Add(new Treninky() { idEvent = 3, eventName = "Evening run", startTime = "2017-07-08T17:00:00Z", endTime = "2017-07-08T18:00:00", allDay = false });
return Json(trenink, JsonRequestBehavior.AllowGet);
}
}
}
Model:
namespace bezeckaApp.Models
{
public class Treninky
{
public int idEvent { set; get; }
public string eventName { set; get; }
public string startTime { set; get; }
public string endTime { set; get; }
public bool allDay { set; get; }
}
}
EDIT
this still causes id in AddContent method NULL

Answer 1

public ActionResult AddContent(int? id)
{
List<Treninky> trenink = new List<Treninky>();
trenink.Add(new Treninky() { idEvent = 1, eventName = "Morning run", startTime = "2017-07-01T08:00:00Z", endTime = "2017-07-01T09:00:00", allDay = false });
trenink.Add(new Treninky() { idEvent = 2, eventName = "Evening run", startTime = "2017-07-05T17:00:00Z", endTime = "2017-07-05T18:00:00", allDay = false });
trenink.Add(new Treninky() { idEvent = 3, eventName = "Evening run", startTime = "2017-07-08T17:00:00Z", endTime = "2017-07-08T18:00:00", allDay = false });
return PartialView("~/Views/Home/AddContent.cshtml",trenink.Find(id));
}
If yours javascript is working, and you getting latest ID then it should work.