File Upload from jquery popup in MVC 5 with jQuery Form plugin

Question

In my MVC 5 web application I need to upload file from jquery popup; in which containing MVC view model. I am referring answered question from here. According to this post I have defined my view as follows

@using VirtuOx.Views.Shared.Resources
@model VirtuOx.Models.Common.PatientDocuments
@{
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>
@using (Html.BeginForm("UploadFile", "Common", FormMethod.Post, new { id = "frmReadingFiles", enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary();
    @Html.HiddenFor(m => m.HideDelete)
    @Html.HiddenFor(m => m.HideUpload)
    <table>
        <tr>
            <td class="align_right" style="width:20%;">@Html.LabelFor(m => m.hdReadingID)</td>
            <td>@Html.DisplayFor(m => m.hdReadingID)@Html.HiddenFor(m => m.hdReadingID)</td>
        </tr>
        <tr>
            <td class="align_right">@Html.LabelFor(m => m.PatientName)</td>
            <td>@Html.DisplayFor(m => m.PatientName)@Html.HiddenFor(m => m.PatientName)</td>
        </tr>
        @if (Model.HideUpload == "False")
        {
            <tr>
                <td class="align_right">@Html.LabelFor(m => m.FiltType)</td>
                <td>@Html.DropDownListFor(m => m.FiltType, new SelectList(Model.FileTypeList, "Value", "Text"), new { @class = "chzn-select-no-single" })</td>
            </tr>
            <tr>
                <td class="align_right">@Html.LabelFor(m => m.File)</td>
                <td>@Html.TextBoxFor(m => m.File, new { type = "file", name = "File[0]" })</td>
            </tr>
        }
    </table>
    if (Model.HideUpload == "False")
    {
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <div class="ui-dialog-buttonset">
                <input type="submit" class="btn blue" id="btnUpload" value='@VirtuOxCommon.PatientDocuments_Button_Upload' />
                <input type="button" class="btn blue" id="PatientDocuments_btnClose" value="@VirtuOxCommon.PatientDocuments_Button_Close" />
            </div>
        </div>
    }
}
@{Html.RenderPartial("_PatientDocuments", new ViewDataDictionary { { "ReadingID", Model.hdReadingID }, { "HideDelete", Model.HideDelete } });  }
@if (Model.HideUpload == "True")
{
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <input type="button" class="btn blue" id="PatientDocuments_btnClose" value="@VirtuOxCommon.PatientDocuments_Button_Close" />
        </div>
    </div>
}
<script type="text/javascript">
    $(document).ready(function () {
        $('#frmReadingFiles').ajaxForm({});

        $("#PatientDocuments_btnClose").click(function (e) {
            $(this).parents("div").find(".ui-dialog-content").dialog('close');
        });
    });
</script>

I am opening this view in jquery modal dialog.

& my post action method is as follows

 public ActionResult UploadFile(Common.PatientDocuments Documents, HttpPostedFileBase File)
    {
        try
        {
            byte[] data;
            using (Stream inputStream = File.InputStream)
            {
                MemoryStream memoryStream = inputStream as MemoryStream;
                if (memoryStream == null)
                {
                    memoryStream = new MemoryStream();
                    inputStream.CopyTo(memoryStream);
                }
                data = memoryStream.ToArray();
            }
            if (data.Length > 0)
            {
                using (TransactionScope ts = new TransactionScope())
                {
                    string path = string.Empty;
                    byte[] objContext = null;
                    DataSet ds = DB.ExecuteDataset("TrustedConnectionString", "pc_ADMReadingFileAdd",
                                            new SqlParameter("@SystemNumber", 1),
                                            new SqlParameter("@FileType", System.IO.Path.GetExtension(File.FileName)),
                                            new SqlParameter("@ReadingID", Documents.hdReadingID),
                                            new SqlParameter("@FileTypeID", Documents.FiltType),
                                            new SqlParameter("@FileName", System.IO.Path.GetFileNameWithoutExtension(File.FileName)),
                                            new SqlParameter("@CustomerID", SessionManager.GetSession().CustomerID));


                    if (ds != null && ds.Tables[0].Rows.Count > 0)
                    {
                        path = Convert.ToString(ds.Tables[0].Rows[0]["FilePath"]);
                        objContext = (byte[])ds.Tables[0].Rows[0]["TransactionContext"];
                        SqlFileStream objSqlFileStream = new SqlFileStream(path, objContext, FileAccess.Write);
                        objSqlFileStream.Write(data, 0, data.Length);
                        objSqlFileStream.Close();
                        ts.Complete();
                    }
                }
            }
        }
        catch (Exception expObj)
        {
            ModelState.AddModelError("Error", "Error occured while uploading file " + expObj.StackTrace);
        }
        Documents.FileTypeList = Common.GetFileTypes();
        return PartialView("~/Views/Shared/PatientDocuments.cshtml", Documents);
    }

When I select the file & clicks Upload button the required post action method gets executed but view is not reloaded; which results in jqGrid on popup not being reloaded to show newly uploaded file record.

Can anybody tell me whats happening wrong in the flow & why the popup view is not reloaded after successful execution of ajaxForm post method.

Please Note that after successful execution of post method popup will remain as it is in browser & when I close it & reopens, it will show the jqGrid with uploaded file record

Answer 1

Can anybody tell me whats happening wrong in the flow & why the popup view is not reloaded after successful execution of ajaxForm post method.

Because there's no code in what you have shown that would reload it.

If you want this to happen you could subscribe to the success callback of the AJAX call and reload whatever portion of the view you want:

$('#frmReadingFiles').ajaxForm(function(result) {
    // Inject the result in the desired portion of your DOM:
    $('#some_container_id').html(result);
});