使用jQuery Form插件从MVC 5中的jquery popup上传文件

时间:2014-01-25 11:59:32

标签: javascript jquery ajax asp.net-mvc

在我的MVC 5 Web应用程序中,我需要从jquery弹出窗口上传文件;其中包含MVC视图模型。我指的是来自here的回答问题。根据这篇文章,我将我的观点定义如下

@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>

我在jquery模式对话框中打开此视图。

&安培;我的帖子操作方法如下

 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);
    }

当我选择文件&amp;单击“上载”按钮,执行所需的post操作方法,但不重新加载视图;这导致弹出窗口上的jqGrid没有被重新加载以显示新上传的文件记录。

任何人都可以告诉我发生了什么错误的流程&amp;为什么在成功执行ajaxForm post方法后没有重新加载弹出视图。

  

请注意,成功执行post方法后,弹出窗口将保持在浏览器和放大器中。当我关闭它时重新打开,它将显示带有上传文件记录的jqGrid

1 个答案:

答案 0 :(得分:1)

  

任何人都可以告诉我发生了什么错误的流程&amp;为什么弹出窗口   成功执行ajaxForm帖子后不会重新加载视图   方法

因为您所显示的内容中没有可重新加载的代码。

如果您希望这样做,您可以订阅AJAX调用的成功回调并重新加载您想要的任何视图部分:

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