Jquery Ajax просит загрузить файл JSON вместо перехода в блок успеха - PullRequest
Новая
       1

Jquery Ajax просит загрузить файл JSON вместо перехода в блок успеха

0 голосов
/ 20 января 2020

Я пытаюсь загрузить файл Excel в базу данных в MVC5, что происходит успешно, тогда в нем должны отображаться загруженные данные. Я выполняю оба этих действия в одном методе действия 

public ActionResult UploadExcel(HttpPostedFileBase file)
{
          //logic to upload and get uploaded data into a DataTable "dataLoadedTable"
          ..
          ..
          string JSONresult;
          JSONresult = JsonConvert.SerializeObject(dataLoadedTable);
          return Json(JSONresult, JsonRequestBehavior.AllowGet);
}

Затем я пытаюсь получить эти данные, используя jquery ajax, как показано ниже - 

$("#formId").on("submit", function () {
            $.ajax
                ({
                    url: 'UploadExcel',
                    type:'POST',
                    datatype: 'application/json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (response) {
                        alert(response);
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);
                        alert(status);
                        alert(error);
                    }
                });

Но после запуска код, который страница запрашивает для загрузки данных в виде файла json, вместо перехода в блок успеха. Сначала я думал, что это потому, что данные большие. Даже это не работает - 

success: function (response) {
  alert("hi");
},

Мой HTML - 

@using System.Data
@model DataTable
@{
    ViewBag.Title = "Upload Excel";
    Layout = "~/Views/Shared/_CommonLayout.cshtml";
}


<body>
    @using (Html.BeginForm("UploadExcel", "UploadData", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <form id="myDataForm">
            <div>
                <h4>Upload Data</h4>
                <div class="card shadow">
                    <div class="p-5">

                        <label>Upload File:</label>
                        <div class="input-group mb-3">
                            <div class="custom-file">
                                <input type="file" name="file" autofocus="autofocus" class="custom-file-input" id="inputGroupFile02" />
                                <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
                            </div>
                            <div class="input-group-append">
                                <button class="btn btn-primary" id="btnUploadData">Upload</button>
                            </div>
                        </div>
                        <script>
                            $('#inputGroupFile02').on('change', function () {
                                //get the file name
                                //var fileName = $(this).val();
                                var fileName = $(this).val().split('\\').pop();;
                                //replace the "Choose a file" label
                                $(this).next('.custom-file-label').html(fileName);

                            })
                        </script>

                        <!--Display Error Message-->
                        <div style="color:red;">@ViewBag.Message</div>


                        @if (!string.IsNullOrWhiteSpace(ViewData["Upload Success"] as String))
                        {
                            <div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
                                @Html.ViewData["Upload Success"]
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        }


                    </div>
                </div>
            </div>
        </form>
    }
    <table id="dataTable" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>ABC</th>
                <th>XYZ</th>
                ..
                ..
            </tr>
        </thead>
    </table>
</body>

Ответы [ 2 ]

1 голос
/ 20 января 2020

Вам необходимо предотвратить отправку формы. Вызовите preventDefault() для события, переданного обработчику submit: 

$("#formId").on("submit", function(e) {
  e.preventDefault();

  // your ajax here...
});

Кроме того, вы, похоже, не отправляете data в своем запросе AJAX? Я собираюсь предположить, что это было случайно удалено, когда вы записали вопрос.

Кроме того, просто не используйте alert() для отладки. Он блокирует браузер и приводит типы данных, что является последним, что вам нужно при согласованности данных. Вместо этого используйте console.log() или console.dir().

0 голосов
/ 21 января 2020

Похоже, что приведенный ниже код был проблемой. Нужно разобраться, почему - 

@using (Html.BeginForm("UploadExcel", "UploadData", FormMethod.Post, new { enctype = "multipart/form-data" }))

Я просто заменил ее обычной формой html, а затем добавил код ниже, чтобы получить возможность отправить объект файла в javascript - 

var $file = document.getElementById('inputGroupFile02'),
                $formData = new FormData();

            if ($file.files.length > 0) {
                for (var i = 0; i < $file.files.length; i++) {
                    $formData.append('file-' + i, $file.files[i]);
                }
            }

и добавил следующее в вызове ajax - 

                data: $formData,
                dataType: 'json',
                contentType: false,
                processData: false,

В контроллере получил объект файла, используя 

                if (Request.Files.Count > 0)
                {
                    foreach (string file in Request.Files)
                    {
                        var _file = Request.Files[file];
                    }
                }

Я думаю, что, возможно, возник конфликт с FormMethod.Post и ajax сообщение. Я могу ошибаться. Не стесняйтесь исправить это и добавить, что может быть проблемой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...