c# - Asp.Net Framework MVC 5 - 上传文件时如何防止整个视图被重新加载

Question

在单击之前单击 之后 我正在尝试仅在模态（引导程序）中使用我刚刚上传的文件列表进行更新。我正在返回 Json 中的部分视图。问题是当文件上传完成并且json返回覆盖页面时，整个View被重新加载。

我尝试使用 ajax 仅更新页面的一部分，但控制器不了解如何发送 IEnumerable HttpPostedFileBase。

有谁知道一种简单的方法并仅以模式加载 UploadQuerys 的结果？

_UploadQuerys.cshtml

@model Packer_v2.Models.PackageViewModel

@using (Html.BeginForm("UploadQuerys", "Package", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="well">
        <table class="table table-striped">
            <tr>
                <td>Arquivo : </td>
                <td><input type="file" id="File" name="File" multiple /></td>
                <td>&nbsp;</td>
                <td><input type="submit" name="submit"  id="Files" value="Enviar Arquivo" /></td>
            </tr>
            <tr>
                <td>@ViewBag.Mensagem</td>
            </tr>
        </table>

    </div>
}

类 PackageViewModel

     public class PackageViewModel
        {
    
            public int IdEps { get; set; }
            public int? IdProject { get; set; }
            public int? IdSolution { get; set; }
            public int? IdDtbase { get; set; }
            public bool HasSqlScripts { get; set; }
            public int? IdSqlComandType { get; set; }
    
            public int? IdSqlItenType { get; set; }
    
            public int? IdQuery { get; set; }
    
            public Query Query { get; set; }
    
            public UploadFileResult File { get; set; }
    
            public List<Query> Querys { get; set; }
    
            //public List<ScriptType> ScriptType { get { return GetScriptTypes(); } }
            public List<Eps> EpsList { get; set; }
            public List<Project> Projects { get; set; }
            public List<Solution> Solutions { get; set; }
            public List<Dtbase> Dtbases { get; set; }
    
    
            public List<SqlComandType> GetSqlComandTypes()
            {
                List<SqlComandType> _List = new List<SqlComandType>();
    
                _List.Add(new SqlComandType() { IdSqlComandType = 1, NmSqlComandType = "Update" });
                _List.Add(new SqlComandType() { IdSqlComandType = 2, NmSqlComandType = "Drop" });
                _List.Add(new SqlComandType() { IdSqlComandType = 3, NmSqlComandType = "Alter" });
                _List.Add(new SqlComandType() { IdSqlComandType = 4, NmSqlComandType = "Create" });
    
                return _List;
            }
    
            public List<SqlItenType> GetSqlItenTypes()
            {
                List<SqlItenType> _List = new List<SqlItenType>();
    
                _List.Add(new SqlItenType() { IdSqlItenType = 1, NmSqlItenType = "Table" });
                _List.Add(new SqlItenType() { IdSqlItenType = 2, NmSqlItenType = "View" });
                _List.Add(new SqlItenType() { IdSqlItenType = 3, NmSqlItenType = "Procedure" });
                _List.Add(new SqlItenType() { IdSqlItenType = 4, NmSqlItenType = "Column" });
    
                return _List;
            }
    
        }
    
        public class SqlComandType
        {
            public int IdSqlComandType { get; set; }
            public string NmSqlComandType { get; set; }
    
        }
    
        public class SqlItenType
        {
            public int IdSqlItenType { get; set; }
            public string NmSqlItenType { get; set; }
    
        }
    
        public class UploadFileResult
        {
            public IEnumerable<HttpPostedFileBase> File { get; set; }
    
        }

包控制器

    public class PackageController : Controller
    {
        private PackerContext db = new PackerContext();

        private List<Query> AllQuerys;

        // GET: Eps
        public ActionResult Index()
        {
            var vm = this.GetPackage();
            return View("Index", vm);
        }

        private PackageViewModel GetPackage()
        {
            var vm = new PackageViewModel();
            vm.EpsList = db.Eps.ToList();
            vm.Projects = new List<Project>();
            vm.Solutions = new List<Solution>();
            vm.Dtbases = new List<Dtbase>();
            vm.Querys = new List<Query>();
            return vm;
        }

        public JsonResult GetProjectsByEps(int pIdEps)
        {
            var projects = db.Project.Where(x => x.idEps == pIdEps).ToList();
            var vm = new PackageViewModel();
            vm.Projects = projects;

            var partial = PartialView("_GetProjectsByEpsDropDownList", vm).RenderToString();

            return Json(new { status = "ok", partialView = partial }, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetSolutionsByProject(int pIdProject)
        {
            var solutions = db.Solution.Where(x => x.IdProject == pIdProject).ToList();
            var vm = new PackageViewModel();
            vm.Solutions = solutions;

            var partial = PartialView("_GetSolutionsByProjectDropDownList", vm).RenderToString();

            return Json(new { status = "ok", partialView = partial }, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetDatabasesBySolution(int pIdSolution)
        {
            var IdsSolutions = db.DbSolution.Where(x => x.IdSolution == pIdSolution).ToList();

            var _Dtbases = new List<Dtbase>();
            foreach (var s in IdsSolutions)
            {
                var inserir = db.Dtbase.Where(x => x.IdDtbase == s.IdDtbase).FirstOrDefault();
                _Dtbases.Add(inserir);
            }

            var vm = new PackageViewModel();
            vm.Dtbases = _Dtbases;

            var partial = PartialView("_GetDatabasesBySolutionDropDownList", vm).RenderToString();

            return Json(new { status = "ok", partialView = partial }, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult UploadQuerys(UploadFileResult _pFiles)
        {

            //AllQuerys = new List<Query>();
            List<Query> TemporaryQuerys = new List<Query>();
            try
            {
                string fileName = "";
                string sendingFiles = "";

                foreach (var file in _pFiles.File)
                {
                    if (file.ContentLength > 0)
                    {
                        var Query = new Query();

                        fileName = Path.GetFileName(file.FileName);
                        var way = Path.Combine(Server.MapPath("~/App_Data/Packages/Querys"), fileName);
                        file.SaveAs(way);

                        Query.IsActive = true;
                        Query.NmFile = fileName;

                        TemporaryQuerys.Add(Query);
                    }

                    sendingFiles = sendingFiles + " , " + fileName;
                }
                ViewBag.Mensagem = "Arquivos enviados  : " + sendingFiles + " , com sucesso.";
            }
            catch (Exception ex)
            {
                ViewBag.Mensagem = "Erro : " + ex.Message;
            }


            var vm = new PackageViewModel();
            vm.Querys = TemporaryQuerys;

            var partial = PartialView("_GetQuerys", vm).RenderToString();

            return Json(new { status = "ok", partialView = partial }, JsonRequestBehavior.AllowGet);
        }

索引.cshtml

@model Packer_v2.Models.PackageViewModel

@{
    ViewBag.Title = "Insert Package";
}

<h2>Iniciando o PACOTE</h2>

<div class="panel-body">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-3">
                <label>* EPS</label>
                @Html.DropDownListFor(model => model.IdEps, Model.EpsList.OrderBy(o => o.NmEps).Select(x => new SelectListItem
           {
               Value = x.IdEps.ToString(),
               Text = x.NmEps
           }), "Selecione", new { @class = "form-control", @required = "required" })
            </div>

            <div class="col-md-6">
                <label>* Project</label>
                <div id="divGetProjectsByEps">
                    @Html.Partial("_GetProjectsByEpsDropDownList")
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-md-3">
                <label>* Solution</label>
                <div id="divGetSolutionsByProject">
                    @Html.Partial("_GetSolutionsByProjectDropDownList")
                </div>
            </div>

            <div class="col-md-5">
                <label>Selecione os itens do seu Pacote:</label>
                <div>
                    @Html.CheckBoxFor(x => x.HasSqlScripts, new { @checked = "checked", @class = "form-check-input", @id = "HasSqlScripts" })
                    <label> Querys</label>
                </div>

                @*<div>
                    @Html.CheckBoxFor(x => x.HasSqlScripts, new { @checked = "checked", @class = "form-check-input", @id = "HasSqlScripts" })
                    <label> Itens de App</label>
                    </div>*@
            </div>
        </div>

        @*<label>* Solution</label>
            <div id="divItensPacker">
                @Html.Partial("_TicketCreate")
            </div>*@


        <div id="divHasSQL" style="display: none;">
            <div class="row">

                <div class="col-md-3">

                    <label>Scripts SQL</label>
                    <div id="divGetDatabasesBySolution">
                        @Html.Partial("_GetDatabasesBySolutionDropDownList")
                    </div>
                </div>

                @*<div class="col-md-3">
                            <label>* Comando</label>
                            @Html.DropDownListFor(model => model.IdSqlComandType, Model.GetSqlComandTypes().OrderBy(o => o.NmSqlComandType).Select(x => new SelectListItem
                       {
                           Value = x.IdSqlComandType.ToString(),
                           Text = x.NmSqlComandType
                       }), "Selecione", new { @class = "form-control", @required = "required", @value = "0" })
                        </div>

                        <div class="col-md-3">
                            <label>* Item Sql</label>
                            @Html.DropDownListFor(model => model.IdSqlItenType, Model.GetSqlItenTypes().OrderBy(o => o.NmSqlItenType).Select(x => new SelectListItem
                       {
                           Value = x.IdSqlItenType.ToString(),
                           Text = x.NmSqlItenType
                       }), "Selecione", new { @class = "form-control", @required = "required", @value = "0" })
                        </div>
                    </div>*@

                @*<div class="row">
                        <div class="col-md-9">
                            @Html.Partial("_UploadQuerys")
                        </div>
                    </div>*@

                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Inserir Querys</button>

                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">




                                @*<label>* Comando</label>
                                         @Html.DropDownListFor(model => model.IdSqlComandType, Model.GetSqlComandTypes().OrderBy(o => o.NmSqlComandType).Select(x => new SelectListItem
                                    {
                                        Value = x.IdSqlComandType.ToString(),
                                        Text = x.NmSqlComandType
                                    }), "Selecione", new { @class = "form-control", @required = "required", @value = "0" })



                                         <label>* Item Sql</label>
                                         @Html.DropDownListFor(model => model.IdSqlItenType, Model.GetSqlItenTypes().OrderBy(o => o.NmSqlItenType).Select(x => new SelectListItem
                                    {
                                        Value = x.IdSqlItenType.ToString(),
                                        Text = x.NmSqlItenType
                                    }), "Selecione", new { @class = "form-control", @required = "required", @value = "0" })*@


                                <div class="row">
                                    <div class="col-md-9">
                                        @Html.Partial("_UploadQuerys")

                                        @*<table class="table table-striped">
                                                <tr>
                                                    <td>Arquivo : </td>
                                                    <td><input type="file" id="File" name="File" multiple /></td>
                                                    <td>&nbsp;</td>
                                                    <td><input type="submit" name="submit" id="Files" value="Enviar Arquivo" /></td>
                                                </tr>
                                                <tr>
                                                    <td>@ViewBag.Mensagem</td>
                                                </tr>
                                            </table>*@



                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">

        var form = $("#form");
        var registerForm = new RegisterForm(form);
        registerForm.urlSave = "/Package/SavePackage";
        registerForm.urlDelete = "/Package/DeletePackage"

        blockAllFields();

        /**/
        //$(document).ready(function () { }

        //    'click', '#Files', function () {
        //    getQuerys();
        //});

        /**/

        $(document).on('click', '#Files', function () {
            console.log("clicou");
            getQuerys();
        });

        /*Changes*/
        $(document).on('change', '#IdEps', function () {
            let idEps = $("#IdEps").val();
            getProjectsByEps(idEps);
            var select = false;
            if (idEps == "")
                select = true;
            controlerFields(select, 'IdProject');
        });

        $(document).on('change', '#IdProject', function () {
            let idProject = $("#IdProject").val();
            getSolutionsByProject(idProject);
            var select = false;
            if (idProject == "")
                select = true;
            controlerFields(select, 'IdSolution');
        });

        $(document).on('change', '#IdSolution', function () {
            let idSolution = $("#IdSolution").val();
            getDatabasesBySolution(idSolution);
            var select = false;
            if (idSolution == "")
                select = true;
            controlerFields(select, 'HasSqlScripts');
        });

        $("#HasSqlScripts").change(function () {
            let hasSqlScriptsCheck = $('#HasSqlScripts').is(':checked');
            showDivHasChecked(hasSqlScriptsCheck, 'divHasSQL');
            var select = false;
            if (hasSqlScriptsCheck == "")
                select = true;
            controlerFields(select, 'IdDtbase');
        });

        /*Outras Funções */
        function controlerFields(pSelect, pFldName) {
            document.getElementById(pFldName).disabled = pSelect;
        }

        function blockAllFields() {
            controlerFields(true, 'IdProject');
            controlerFields(true, 'IdSolution');
            controlerFields(true, 'HasSqlScripts');
            controlerFields(true, 'IdDtbase');

        }

        function showDivHasChecked(phasChecked, pdivName) {
            var stats = 'none';
            if (phasChecked == true) {
                stats = 'block';
            }
            document.getElementById(pdivName).style.display = stats;
        }

        /*Changes Açtions*/

        function getQuerys() {

        }


        //function getQuerys() {
        //    console.log("entrou");
        //    var fileUpload = $("#File").get(0);
        //    var files = fileUpload.files;

        //    var data = new FormData();

        //    for (var i = 0; i < files.length; i++) {
        //        data.append(files[i].name, files[i]);
        //    }
        //    console.log("send");

        //    $.ajax({
        //        url: "/Package/UploadQuerys",
        //        method: 'post',
        //        data: new FormData($('#File')[0]),
        //        cache: false,
        //        contentType: false,
        //        processData: false,
        //        success: function (result) {
        //            console.log(result);
        //        }
        //    });
        //    //var pIdProject;


        //    //$.ajax({
        //    //    async: true,
        //    //    "url": "/Package/UploadQuerys",
        //    //    "type": "POST",
        //    //    data: data,

        //    //    //success: function (message) {

        //    //    //    alert(message);

        //    //    //},

        //    //    //error: function () {

        //    //    //    alert("There was error uploading files!");

        //    //    //}
        //    //    //data: { _pFiles: data },
        //    //})


        //    //$.ajax({

        //    //    type: "POST",
        //    //    url: "Demo_02/Demo/UploadFilesAjax",
        //    //    contentType: false,
        //    //    processData: false,
        //    //    data: data,
        //    //    success: function (message) {

        //    //        alert(message);

        //    //    },

        //    //    error: function () {

        //    //        alert("There was error uploading files!");

        //    //    }




        //    //$.ajax({
        //    //    async: true,
        //    //    "url": "/Package/UploadQuerys",
        //    //    "type": "POST",
        //    //    data: { _pFiles: teste },
        //    //})
        //        //.done(function (msg) {
        //        //    if (msg.status.includes("nok")) {
        //        //        let results = "Ocorreram erros ao buscar os registros!";

        //        //        if (msg.mesage != undefined && msg.mesage != '') {
        //        //            results = msg.mesage;
        //        //        }

        //        //        toast("Atenção", results, "error");
        //        //        console.log(msg.error);
        //        //    } else {
        //        //        if (msg.partialView != undefined && msg.partialView != '') {
        //        //            $("#divGetQuerys").html(msg.partialView);

        //        //            //if (pIdProject != "" && pIdProject != undefined) {
        //        //            //    $("#pIdProject").val(pIdProject);
        //        //            //}
        //        //        }
        //        //    }
        //        //})
        //        //.fail(function (jqXHR, textStatus, msg) {
        //        //    console.log(`${textStatus} - ${msg} - ${jqXHR}`);
        //        //});

        //}

        function getProjectsByEps(pIdEps) {
            var pIdProject;
            $.ajax({
                async: true,
                "url": "/Package/GetProjectsByEps",
                "type": "GET",
                data: { pIdEps: pIdEps },
            })
                .done(function (msg) {
                    if (msg.status.includes("nok")) {
                        let results = "Ocorreram erros ao buscar os registros!";

                        if (msg.mesage != undefined && msg.mesage != '') {
                            results = msg.mesage;
                        }

                        toast("Atenção", results, "error");
                        console.log(msg.error);
                    } else {
                        if (msg.partialView != undefined && msg.partialView != '') {
                            $("#divGetProjectsByEps").html(msg.partialView);

                            if (pIdProject != "" && pIdProject != undefined) {
                                $("#pIdProject").val(pIdProject);
                            }
                        }
                    }
                })
                .fail(function (jqXHR, textStatus, msg) {
                    console.log(`${textStatus} - ${msg} - ${jqXHR}`);
                });

        }

        function getSolutionsByProject(pIdProject) {
            var pIdSolution;
            $.ajax({
                async: true,
                "url": "/Package/GetSolutionsByProject",
                "type": "GET",
                data: { pIdProject: pIdProject },
            })
                .done(function (msg) {
                    if (msg.status.includes("nok")) {
                        let results = "Ocorreram erros ao buscar os registros!";

                        if (msg.mesage != undefined && msg.mesage != '') {
                            results = msg.mesage;
                        }

                        toast("Atenção", results, "error");
                        console.log(msg.error);
                    } else {
                        if (msg.partialView != undefined && msg.partialView != '') {
                            $("#divGetSolutionsByProject").html(msg.partialView);

                            if (pIdSolution != "" && pIdSolution != undefined) {
                                $("#pIdSolution").val(pIdSolution);
                            }
                        }
                    }
                })
                .fail(function (jqXHR, textStatus, msg) {
                    console.log(`${textStatus} - ${msg} - ${jqXHR}`);
                });
        }

        function getDatabasesBySolution(pIdSolution) {
            var pIdDtbase;
            $.ajax({
                async: true,
                "url": "/Package/GetDatabasesBySolution",
                "type": "GET",
                data: { pIdSolution: pIdSolution },
            })
                .done(function (msg) {
                    if (msg.status.includes("nok")) {
                        let results = "Ocorreram erros ao buscar os registros!";

                        if (msg.mesage != undefined && msg.mesage != '') {
                            results = msg.mesage;
                        }

                        toast("Atenção", results, "error");
                        console.log(msg.error);
                    } else {
                        if (msg.partialView != undefined && msg.partialView != '') {
                            $("#divGetDatabasesBySolution").html(msg.partialView);

                            if (pIdDtbase != "" && pIdDtbase != undefined) {
                                $("#pIdDtbase").val(pIdDtbase);
                            }
                        }
                    }
                })
                .fail(function (jqXHR, textStatus, msg) {
                    console.log(`${textStatus} - ${msg} - ${jqXHR}`);
                });
        }



    </script>

}

标签： c#asp.netasp.net-mvc-5