Submit Form and display result/validation errors in window.

2 posts, 0 answers
  1. John
    John avatar
    9 posts
    Member since:
    Nov 2010

    Posted 05 Jan 2015 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 Jan 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top