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是无状态的，因此GET操作方法无法知道在成功处理提交的表单后（在您的http post动作中）是否从Redirect方法调用中调用了此方法。您可以使用TempData来解决此问题。在重定向到Index视图之前，将一个标志设置为temp数据字典，该字典将在下一个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);

});

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

1 个答案: