如何发布而不刷新Razor中的整个页面？

Question

我在ASP.net MVC中有一个表单，用户可以填写该表单，然后上传文件。从那里，我将代表他们在数据库中进行大量更改。

我使用this example here为用户添加了加载CSV文件的功能。当前，当用户单击“上载”按钮时，页面将刷新，并且所有输入都将丢失。我们像我希望的那样显示.CSV数据，但是给用户带来了麻烦，因为不得不再次输入他们的数据。

理想情况下，当用户单击“上传”时，我想保留其输入，然后显示数据网格或表供他们确认，然后单击最终提交按钮。

这是我的视图的代码

@using MVCGrid.Web.Models; 
@model System.Data.DataTable 
@using System.Data; 

<script>

function fn() {
    $('.alert').show()
    if (document.getElementById("dataFile").value) {
        $('.alert').show()
        alert("Thanks");
        
        var $form = $(btnClicked).parents('form');

        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            error: function (xhr, status, error) {
                //do something about the error
            },
            success: function (response) {
                //do something with response
                
            }
        });

        return false;
    }
    return false;
}

</script>

@{ ViewBag.Title = "SCCM Collection Creator"; Layout = "~/Views/Shared/_Layout.cshtml"; } 

@using (Html.BeginForm("CreateCollections", "SCCM_Commander", null, FormMethod.Post,
new { enctype = "multipart/form-data" })) { @Html.AntiForgeryToken() @Html.ValidationSummary()


</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <h4>
        Limiting Collection
      </h4>
      <p>
        Specify the limiting collection, used to constrain membership for these collections.
      </p>
      <p>
        <a class="btn" href="#"></a>
      </p>
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
                        Limiting Collection Name
                    </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item disabled" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>

    </div>
    <div class="col-md-4">
      <p></p>
      <br />
    </div>
    <div class="col-md-4">
      <h4>
        Load Input File
      </h4>
      <p>
        Load a .csv file of @Html.ActionLink("this format", "somecontroller", new { id = "123" }) this format for mass collection creation.
      </p>
      <p>
        <a class="btn" href="#"></a>
      </p>
      <div class="input-group">
        <span class="input-group-btn">
                        <span class="btn btn-primary btn-file">
                            Browse&hellip; <input type="file" single id="dataFile" name="upload">
                        </span>
        </span>
        <input type="text" class="form-control" readonly>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <hr />
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <h4>
        Review
      </h4>
      <p>
        Confirm these are the desired settings
      </p>
      <h4>Collection Name</h4>
      <span id="ReviewColName">ABC 1Off - [MD] -Yes</span>
      <h4>Collection Count</h4>
      <div class="Counter">
        <span class="MachineCounter" id="MachineCounter">0</span> members will be added.
      </div>

      <button type="button" class="btn btn-primary">Create Collection</button>
    </div>

  </div>

  <div class="form-group">
    <input type="submit" value="Upload" class="btn btn-default" />
  </div>

  @if (Model != null) {
  <table>
    <thead>
      <tr>
        @foreach (DataColumn col in Model.Columns) {
        <th>@col.ColumnName</th>
        }
      </tr>
    </thead>
    <tbody>
      @foreach (DataRow row in Model.Rows) {
      <tr>
        @foreach (DataColumn col in Model.Columns) {
        <td>@row[col.ColumnName]</td>
        }
      </tr>
      }
    </tbody>
  </table>
  }
</div>
}

这是我的控制器的代码

using LumenWorks.Framework.IO.Csv;
using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SCCMWebAPI.Controllers
{
    public class SCCMCommanderController : Controller
    {
        // GET: SCCMCommander
        public ActionResult Index()
        {
            return View();
        }

        // GET: SCCMCommander/OneOff
        public ActionResult OneOff()
        {
            return View();
        }

        // GET: SCCMCommander/ZeroTouch
        public ActionResult ZeroTouch()
        {
            return View();
        }

        // Post SCCMCommander/ZeroTouch
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult ZeroTouch(HttpPostedFileBase upload)
        {
            if (ModelState.IsValid)
            {

                if (upload != null && upload.ContentLength > 0)
                {

                    if (upload.FileName.EndsWith(".csv"))
                    {
                        Stream stream = upload.InputStream;
                        DataTable csvTable = new DataTable();
                        using (CsvReader csvReader =
                            new CsvReader(new StreamReader(stream), true))
                        {
                            csvTable.Load(csvReader);
                        }
                        return View(csvTable);
                    }
                    else
                    {
                        ModelState.AddModelError("File", "This file format is not supported");
                        return View();
                    }
                }
                else
                {
                    ModelState.AddModelError("File", "Please Upload Your file");
                }
            }
            return View();
        }
    }
}

当用户点击“上传”时，我们会正确上传他们的文件，然后将内容显示回去。

但是在此过程中，我们会丢失所有其他表单数据。

当他们单击上载以提交数据然后处理显示我的表或MVCGrid时，是否可以使用AJAX？

我被卡住的地方

我已经更新了上面的代码段，并且可以使用Ajax提交文件，但是呈现文件的结果（实际上是解析CSV并在HTML表格中显示输出）仍然会导致页面重新加载，并且用户会丢失所有数据。

帖子发布结束后，我觉得我需要调用渲染表代码，但是现在如何逃逸了。