javascript - 通过ajax重定向到页面

Question

我正在尝试 Ajaxify 普通页面重定向。

ASPX(查看:Parent.aspx):

<a id="GetContent" href="#">Go to Content Page</a>

ASPX(查看:Content.aspx):

<div id="content">
   ...
</div>

Controller (ContentController.cs):

public ActionResult Index(id)
{
    var content = _db.GetContent(id);
    return View("Content");
}

JS:

$(document).on("click", "#GetContent", function () {
        location.href = "/Index/3";
});

我试过这个。这是可行的，但是，地址栏中的 url 不会改变。

$(document).on("click", "#GetContent", function () {
           $("#content").load("/Index/3");
    });

因此，当您单击该链接时，当前它会正常回发，然后重定向到 ~/Content/3 (即无 ajax)。我想要的是立即转到内容页面，然后在获取内容时显示加载指示器。我知道我可能必须使用 jQuery.load() 来执行此操作，但不太确定如何将它们组合在一起。

感谢任何帮助!

Answer 1

我认为这就是您想要做的......

索引.aspx:

<div id="content">
   ...
</div>

<script>
    $(document).ready(function() {
      $.ajax({
        url: '/Content/Details/3', // <-- Can use @Html.ActionLink here, to utilize routing a bit.
        success: function(data) {
          $('#content').html(data);
        }
      });
    });
</script>

ContentController.cs:

public ActionResult Index(id)
{
    return View("Index");
}

public ActionResult Details(id)
{
    var content = _db.GetContent(id);
    return PartialView("_Details", content);
}

如果您最初将 loader.gif 放入 div 中，我认为您会得到您正在寻找的行为。您还需要确保已创建 _Details View ，并显示模型中的所有内容(var content)。