MVC4 Ajax form in partial view returns whole page

Question

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.

Answer 1

Try changing the return type of SetReminders() to PartialViewResult