How do I update my partial view after an Ajax Post in MVC?
So, basically I am trying to show some profile data in my MVC application. Right now, every time I click on a date in my Telerik Kendo calendar, I can refresh the entire page and update the data I want.
However, instead of updating everything, I just want to update the partial views, which only show the data that is updated after the date is selected.
Index.cshtml
<!--CODE-->
@Html.Partial("_WorkingTimeData")
<!--CODE-->
_WorkingTimeData.cshtml
var workedTime = ViewData["WorkedTimeToday"];
var hoursPerDay = ViewData["HoursPerDayContract"];
<p>You worked @workedTime hours</p>
<p>Hours Per Day (Contract) @hoursPerDay Hours</p>
Yes, now I have ViewDatas up and running.
This is the ajax code in Index.cshtml
$.ajax({ url: '/Profile/Index',
dataType: "json",
type: "POST",
data: JSON.stringify(10),
success: function(returl){
alert('It worked');
location.href=returl.Url;
},
error: function(jqXHR,responseText,textStatus){ alert(jqXHR.responseText) } });
controller
[HttpPost]
public ActionResult Index(string number){
//THINGS TO DO
var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index", "Profile");
return Json(new { Url = redirectUrl });
}
Well, I'm very familiar with this, and I'm doing my own research. However, I still have some questions: - Do I need to create a post method for _WorkingTimeData instead of an index like mine? - Do I need to create a ViewModel for a partial view?
thank
CHANGE NUMBER 2 FOR VISHAL:
It doesn't work at all, not even a warning, because oddly enough it doesn't recognize the calendar ...
$("#calendar").kendoCalendar({
change : function() {
$.ajax({
url: "/Profile/WorkingTimeData",
type: "get"
}).done(function(data) {
$("#profile-timeline").html(data);
});
}});
It says $ ("# calendar"). kendoCalendar is not a function (Telerik says so)
To do this, it went down to the controller, but did not update anything:
function change() {
alert("Escolheste outro dia");
var calendar = $("#calendar").data("kendoCalendar");
var current = calendar.current();
alert(current);
$.ajax({
url: "/Profile/WorkingTimeData",
type: "get"
}).done(function(data) {
$("#profile-timeline").html(data);
});
}
I think it is because of the profile timeline ... This is the div in my view
source to share
Do I need to create a post method for _WorkingTimeData
?
Yes, you need to create. But, Get will be fine too.
Do I need to create ViewModel
for a partial view? Not necessary. You can create a.
But after looking at the partial view you are just using ViewData[""]
. This way you don't need to create any ViewModel
.
Just create a method in Controller
that returns _WorkingTimeData
PartialView
. And call this method JQuery ajax
on change event DatePicker
and replace content Div
.
For example.
Controller
public PartialViewResult WorkingTimeData()
{
ViewData["WorkedTimeToday"]="NEW VALUE";
ViewData["HoursPerDayContract"] = "NEW VALUE";
return this.PartialView("_WorkingTimeData");
}
JavaScript
$("DATEPICKERELEMENT").change(function() {
$.ajax({
url: "/CONTROLLER/WorkingTimeData",
type: "get"
}).done(function(data) {
alert(data);
$("#divisionIdContainingPartialView").html(data);
}).fail(function() {
alert('error');
});
});
source to share
I wrote a post explaining in detail why you need to break the logic of thinking about partial views on the client side. If you are interested, you can find it here .
TL version; DR simply, all you have on the client side is HTML. There is no knowledge of what was or was not provided in response through a partial view. As a result, the real question is, "How do I change a portion of my HTML page based on the AJAX response?" In its simplest form, you simply select some element on the page and then modify your inner HTML. You can do this with some HTML based client side, or you can actually pass the HTML document as an AJAX response and then insert it.
source to share