MVC6 Ajax POST - 已处理文件,但即使使用数据也不返回视图

时间:2016-04-05 06:25:48

标签: ajax asp.net-mvc

我有一个发布CSV文件和字符串的AJAX POST。这是收到的。然后我处理这些数据并将细节插入数据库 - 成功。它将那些作为对象返回的新记录作为返回值返回 - 这也是视图中使用的模型 - 成功。

然后我尝试将其作为返回发送回来,视图没有任何反应..它没有更新。

我在其他帖子中找到了这个 - 一些PHP和一些迹象表明,如果你使用Ajax POST,HttpPost结果将不起作用..但是当你使用普通表单提交但它不能与Ajax一起工作时这很好用帖子。 以下是我的控制器操作:

        // GET: /SuburbsAndPostcodesAdminController/
    public IActionResult FileIndexView()
    {
        var InitialDisplayView = new NewSuburbsAndPostcodesImported
        {
            Message = "Nothing imported yet.",
            SuburbAndPostcodesImported = null
        };

        return View("FileIndexView", InitialDisplayView);
    }


        // POST: /SuburbsAndPostcodesAdminController/Index
    [HttpPost]
    public IActionResult FileIndexView(CSVFileUploadViewModel CSVFileUpload)
    {
        if (ModelState.IsValid)
        {
            //Process the file
            NewSuburbsAndPostcodesImported FileProcessed = _service.ProcessCSV(CSVFileUpload);

            return View("FileIndexView", FileProcessed);

        }
        return View();

    }

我在“返回视图”(“FileIndexView”,FileProcessed)上有一个断点;“和FileProcessed中包含正确的数据。

CSHTML文件是:

@model ProgressBar2.ViewModels.NewSuburbsAndPostcodesImported

@{
     ViewData["Title"] = "Suburbs and Postcodes Upload page";
 }
 ...

 <div>
<h4>
    @Html.DisplayFor(modelItem => Model.Message)
</h4>
</div>
@if (Model.SuburbAndPostcodesImported != null)
{
    <table class="table">
      <tr>
        <th>
            ...
        </th>
        <th>
            ...
        </th>
        <th>
            ...
        </th>
    </tr>

        @foreach (var item in Model.SuburbAndPostcodesImported)
    {...

编辑这是AJAX POST功能:

        $('#SubmitFile').click(function (e) {
        e.preventDefault(); // <------------------ stop default behaviour of button

        //var fileUpload = input.files[0];
        var url = "/SuburbsAndPostcodesAdmin/FileIndexView";
        var connId = $.connection.hub.id;
        var fd = new FormData();
        fd.append('File', $("#txtFileUpload")[0].files[0]);
        fd.append('connId', connId);

        $.ajax({
            type: "POST",
            url: url,
            data: fd,
            processData: false,
            contentType: false,

        });
    });

为什么不更新视图?

我需要做些什么来确保视图更新和列表呈现?

1 个答案:

答案 0 :(得分:0)

在您的AJAX调用中,您似乎永远不会处理成功条件,您应该使用控制器操作返回的结果更新DOM的相关部分。以下是如何处理此问题的示例:

$.ajax({
    type: "POST",
    url: url,
    data: fd,
    processData: false,
    contentType: false,
    success: function(result) {
        // The result variable here will contain the response
        // body from the controller action. Here you could use it
        // to update the respective portion of the DOM
        $('#someContainerId').html(result);
    }
});

这假设您已使用id="someContainerId"的某个div元素包装了要更新的部分,并且控制器操作返回仅包含相关部分的PartialView。