Submit Form and display result/validation errors in window.

[John]

I have a Kendo Window on a page, using a partial. Currently when I submit the form, it completes and redirects me to the parent page and the window is gone. I am trying to keep the user in the window until the form is complete and they close the window. 

Window Code:

@(Html.Kendo().Window()
    .Name("fileUpload")
    .Title("Upload File Attachments")
    .Visible(false)
    .Iframe(true)
    .Content(@<text>@Html.Partial("_FileBrowser", (List<AttachmentViewModel>)ViewBag.AttachmentFileViewModel)</text>)
    .Modal(true)
    .HtmlAttributes(new { @style = "width:470px; height:160px;" }))

Partial:

@using Kendo.Mvc.UI
@model List<StationaryTools.ViewModels.AttachmentViewModel>

@using (Html.BeginForm("UploadThesefiles", "EquipmentWorkOrder", FormMethod.Post, new { id = "imageBrowser", name = "imageBrowser", target = "_self", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    // get the stationaryID here to store so it doesn't get lost
    @Html.HiddenFor(m => m[0].StationaryID)
    @Html.HiddenFor(m => m[0].SiteID)
    @Html.HiddenFor(m => m[0].EquipmentID)

    <div class="editor-field" id="dialogFileUpload">
        <table width="100%">
            <tr>
                <td class="valveEditSmallLabel"><strong>Attached Files</strong></td>
                <td></td>
                <td></td>
            </tr>
            @for (int i = 0; i < Model.Count; i++)
            {
                if (!Model[i].HasFile && ViewBag.CanEdit)
                {
                    <tr>
                        <td></td>
                        <td>
                            @Html.TextBoxFor(m => Model[i].File, new { type = "file", @style = "width:300px; margin-right: 4px;" })
                        </td>
                    </tr>
                }
                if (Model[i].HasFile)
                {
                    <tr>
                        <td></td>
                        <td>
                            @Html.ActionLink(Model[i].FileName, "GetThisFile", new { equipmentWorkOrderID = Model[i].StationaryID, stationaryFileName = Model[i].FileName }, new { target = "_blank", @style = "float: right; margin-right:4px;" })
                        </td>
                    </tr>
                }
            }
            <tr>
                <td></td>
                <td class="equipmentListSearchButtonRight">
                    <input type="submit" value=@Resources.Common_UploadFile id="btnSaveAttachments" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span class="field-validation-error">*Attachments can be .jpg, .jpeg, .png or .pdf and must be 1MB or less in size.</span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    @Html.ValidationMessageFor(m => m[0].File)
                <div>@MvcHtmlString.Create((string)TempData["FileUploadMessage"])</div>
            </td>
        </tr>
        </table>
    </div>
}

Controller Action:

[HttpPost]
public ActionResult UploadTheseFiles(List<AttachmentViewModel> attachmentFileModels)
{
    List<SalesToolsPOCOLibrary.GetThisStationaryFile_Result> getFile = siteManager.GetTheseStationaryFiles(attachmentFileModels[0].StationaryID, 0, Constants.FILETYPE_WORKORDER, 7);
    string existingFileName = "";
    //if (getFile != null)
    //{
    //    // loop through building a collection of attachmentfileviewmodels
    //    foreach (SalesToolsPOCOLibrary.GetThisStationaryFile_Result file in getFile)
    //    {
    //        existingFileName = file.name;
    //        AttachmentViewModel attachmentFile = new AttachmentViewModel();
    //        attachmentFile.HasFile = true;
    //        attachmentFile.FileName = existingFileName;
    //        attachmentFile.StationaryID = attachmentFileModels[0].StationaryID;
    //        attachmentFile.EquipmentID = attachmentFileModels[0].EquipmentID;

    //        //attachmentFileModels.Add(attachmentFile);
    //    }
    //}
    if (ModelState.IsValid)
    {
        // loop through the files in the request, not the attachment view model.
        // this is necessary due to the view model having null values for the files in some situations.
        for (int i = 0; i < Request.Files.Count; i++)
        {
            if (Request.Files[i] != null && Request.Files[i].InputStream != null)
            {
                string filename = System.IO.Path.GetFileName(Request.Files[i].FileName);
                byte[] image = new byte[Request.Files[i].InputStream.Length];
                Request.Files[i].InputStream.Read(image, 0, image.Length);
                TempData["FileUploadMessage"] = siteManager.UploadThisStationaryFile(existingFileName, filename, image, attachmentFileModels[0].StationaryID, 0, Constants.FILETYPE_WORKORDER, (int)base.CurrentUserAuth.USR_SecurityUserID, 7);
            }
        }
    }
    else
    {
        ViewBag.CanEdit = IsUserAuthorized(HttpContext.User.Identity.Name, Constants.FW_WORK_ORDERS_ACCESS, Constants.FW_AUTH_EDIT, 0, (int)attachmentFileModels[0].SiteID);
        return PartialView("_FileBrowser", attachmentFileModels);
    }
    return RedirectToAction("EditEquipmentWorkOrder", new { equipmentWorkOrderID = attachmentFileModels[0].StationaryID, siteID = attachmentFileModels[0].SiteID, equipmentID = 0 });
}

Can someone tell me what I am missing in regards to keeping the user in the window?

[Dimo]

Hello John,

.Iframe(true) and .Content("whatever") cannot be used at the same time. Iframes are used together with .LoadContentFrom().

Since you are loading a partial view, you don't need an iframe at all.

On the other hand, in order to submit the form and not refresh the whole page (i.e. leave the Window open), the form must be an Ajax form, not a standard one.

Regards,
Dimo
Telerik