asp.net mvc使用ajax动态添加局部视图

我是ASP.NET新手，在向主视图添加内容时遇到问题。在HtmlBeginform中，我通过点击按钮上传文件，文件加载后，我需要在主视图下显示部分视图，我不知道如何正确调用ajax脚本

我的主要观点是：

@using prvniAplikace.Models;
@using Chart.Mvc.ComplexChart;
@using Chart.Mvc.Extensions;

@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm("LoadFile", "Home", FormMethod.Post,
                                                     new { enctype = "multipart/form-data" }))
{
    <div class="form-group" align="left">
        <label for="exampleInputFile">Load File</label>
        <input type="file" accept=".tcx" class="form-control-file" name="exampleInputFile" id="exampleInputFile" aria-describedby="fileHelp">
    </div>

    <div class="form-group" align="left">
        <button class="btn btn-primary" type="submit" id="add" name="add" value="Add">Display</button>
    </div>
}

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

        $("#add").on('click', function () {

            $.ajax({
                async: false,
                url: '/Home/getContent'
            }).success(function (partialView) {

                $('#getContent').append(partialView);

            });
        });

    </script>
}

   @{
        ViewBag.Title = "getContent";
        Layout = null;
    }


    <h2>Obsah</h2>
    <p>Odstavec</p>
    <p>@DateTime.Now.ToString()</p>

---

根据您的评论，您希望在正常表单提交以上载文件后重新加载索引视图后，通过ajax加载部分视图内容。要实现这一点，您应该在事件中调用ajax。由于在表单提交之前和之后，用户将看到相同的页面/视图，因此您应该根据是为您的第一个GET请求还是为http post操作中的重定向调用发出的GET请求加载页面，有条件地进行ajax调用

由于Http是无状态的，因此GET action方法无法知道在Http post操作中成功处理提交的表单后，是否从重定向方法调用调用了它。您可以使用TempData来解决此问题。在重定向到索引视图之前，为临时数据字典设置一个标志，该标志将在下一个GET请求中可用

[HttpPost]
public ActionResult LoadFile(HttpPostedFileBase exampleInputFile)
{
   // your existing code here
  TempData["Success"] = true;
  return RedirectToAction("Index");
}

现在，在GET操作中，阅读此内容并通过ViewBag或视图模型属性（如果有）将其传递给view

public ActionResult Index()
{
    ViewBag.IsSuccess = TempData["Success"];
    return View();
}

现在在视图中，检查此ViewBag项，如果它存在并且具有真值，则渲染要在其中显示部分视图内容的div。您可以利用Url.Action helper方法生成到返回部分视图的Action方法的正确相对路径，并将其保留在div标记的html5数据属性中，以便我们以后在javascript中使用它来进行ajax调用

因此，将其添加到索引视图中

@if (ViewBag.IsSuccess!=null && ViewBag.IsSuccess)
{
    <div data-url="@Url.Action("getContent", "Home")" id="myPartial"> </div>
}

---

目前，您的ajax调用是通过add按钮click连接的，它不执行ajax文件上传，而是一个普通的表单submit，由于RedirectToAction方法调用，您将在这之后执行一个到索引页的新GET。何时显示局部视图内容？当成功上传后加载索引页面而不是ajax文件上传时？我通过正常的提交表单进行文件上传，然后我需要在当前视图下添加一些进一步的内容。成功上传后不会加载索引页，它只显示一条消息。您是否建议采用不同的方式？因为这是一种正常的表单提交，所以当您单击“提交”按钮时，表单将被提交，服务器将向索引页返回302响应以获取新的GET请求。何时确实要在此流中显示局部视图结果？局部视图应显示在索引视图的正下方。何时？在正常表单提交后重新加载索引视图之后？

@if (ViewBag.IsSuccess!=null && ViewBag.IsSuccess)
{
    <div data-url="@Url.Action("getContent", "Home")" id="myPartial"> </div>
}

$(function(){
   // Get the url from the data attribute of the div
   var url = $("#myPartial").data("url");
   // Make the ajax call using load method
   $("#myPartial").load(url);

});