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

Question

我是 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>

控制器：

namespace prvniAplikace.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult getContent()
        {

            return PartialView("~/Views/Home/AjaxRequest.cshtml");
        }

        [HttpPost]
        public ActionResult LoadFile(HttpPostedFileBase exampleInputFile)
        {


            if (exampleInputFile.ContentLength > 0)
            {
                var fileName = Path.GetFileName(exampleInputFile.FileName);
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                exampleInputFile.SaveAs(path);

                string xmlFile = Server.MapPath(fileName);

                XmlDocument doc = new XmlDocument();
                doc.Load(path);

                XmlNodeList nodes = doc.GetElementsByTagName("HeartRateBpm");
                XmlNodeList nodes2 = doc.GetElementsByTagName("Time");

            }
            return RedirectToAction("Index");
        }



    }
}

Answer 1

根据您的评论，您希望在索引视图被（重新）加载后通过 ajax 加载部分视图内容，然后您执行正常表单提交以上传文件。为此，您应该在document ready 事件中进行ajax 调用。由于在表单提交之前和之后用户将看到相同的页面/视图，因此您应该有条件地根据您的第一个 GET 请求或您的 http 中的 Redirect 调用发出的 GET 请求加载页面来进行 ajax 调用发布操作。

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

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

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

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

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

所以把它添加到你的索引视图中。

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

现在您所需要的只是进行 ajax 调用的 javascript 代码。在文档就绪事件中执行该操作。可以使用 jQuery 加载方法。

$(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);

});