MVC4 Ajax form in partial view returns whole page when inside kendo window

MVC4 Ajax form in partial view returns whole page when inside kendo window

I've searched and searched and for the life of me cannot figure out what
I'm doing wrong. I have a Kendo UI window like so:
<a id="@(item.POD_ID)" class="k-button btn-reminder" title="Add Reminder"
onclick="$('#windowR@(item.POD_ID)').data('kendoWindow').open();"><span
class="icon-reminder icon-only btn-reminder"></span></a
@(Html.Kendo().Window()
.Name("windowR" + item.POD_ID)
.Title("Set Reminder")
.Content("loading...")
.LoadContentFrom("_LoadReminder", "Purchasing", new { id = item.POD_ID })
//.Iframe(true)
.Draggable()
//.Resizable()
.Modal(true)
.Visible(false)
.Width(200)
.Height(80)
.Events(events => events
.Close("onCloseReminder")
.Open("onOpenReminder")
.Deactivate("function() { this.refresh();}")
.Activate("function(){ $('#empNumBox').focus(); }")
)
)
And, if the window is an Iframe, all of this works just fine, however I
cannot have it as an Iframe, because that means reloading all of the
scripts and styles within it and more difficult to reference parent.
So this window, loads content from the partial view like so:
@using (Ajax.BeginForm("SetReminders", "Purchasing", new AjaxOptions {
UpdateTargetId = "result" }))
{
<div id="result"></div>
<input type="number" id="empNumBox" name="empNum" style="width: 70px"
class="k-textbox" required autofocus="autofocus"
value="@(ViewBag.EMP_NUM)"/>
<input type="hidden" value="@ViewBag.POD_ID" name="podID"
id="POD_ID_Form_Field"/>
<input type="submit" id="submitReminder_button" style="width:auto;"
class="k-button submitReminder_button" value="Remind" />
}
That partial view also renders fine. Here is the problem though, when you
submit the ajax form, and the kendo window is not an iframe, it will
render the whole page as whatever the controller returns (and I have tried
several things, you can see in the commented out code below:
[HttpPost]
public ActionResult SetReminders(int empNum, int podID)
{
//some database stuff that works fine
string response;
if (existingReminder == 0)
{
//more db stuff that also works fine
db.SaveChanges();
response = "Success!";
}
else
{
response = "Reminder exists.";
//return PartialView("_LoadReminder", new string[] { "Reminder
already exists!" });
}
//
$('#submitReminder_button').closest('.k-window-content').data('kendoWindow').close();
//alert('Hello world!');
//return Content("<script
type='text/javascript/>function(){alert('Hello
world!');}</script>");
return PartialView("_SubmitSuccess");
//return Json(response);
//return Content(response, "text/html");
}
If anyone is curious, all that the _SubmitSuccess contains is the word
"Success!".
Here's an example that I found with the ajax response being put in a div,
which I followed:
http://pratapreddypilaka.blogspot.com/2012/01/htmlbeginform-vs-ajaxbeginform-in-mvc3.html
It seems the real issue here is the Kendo window, but I have yet to find
something on their forums about this, doesn't seem that there's a lot of
examples of using a kendo window to load a partial view that submits an
form via ajax and returns a different partial view to be loaded within the
same window and does not use an iframe.
Any suggestions welcome, even about other parts of the code, I'm always
looking to improve.