Question

所以我正在创建一个asp.NET MVC3应用程序，并希望将单页面应用程序功能应用于部分应用程序。我认为最简单的解释方法是举例：

该应用程序由一个管理区域和一个公共区域组成，使用普通的链接结构构建。我想将管理区域转换为单页面应用程序，重用现有应用程序中的视图和模型。是否可以这样做，在这种情况下如何？

Answer 1

你必须面对两个主要问题，这使得SPA和标准应用程序之间存在差异：

链接：在标准应用程序中，每个链接都会将您重定向到其他页面。
表单：提交表单时，会使用您在帖子中指定的HTTP方法（通常是POST）发出请求，并在有效负载中包含用户输入的数据。

为了解决这些问题，您必须在客户端和服务器端采取措施。为了解释建议，让我们采取以下代码：

HomeController.cs：

public class HomeController : Controller {
    public ActionResult Index() {
        return View();
    }

    public ActionResult Contact() {
        return View(new ContactUsViewModel());
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Contact(ContactUsViewModel model) {
        if (ModelState.IsValid) {
            /* Send mail / Save in DB etc. */
            return Redirect("Index");
        }

        return View(model);
    }
}

Index.cshtml：

<p>This is a simple page.</p>
<p>@Html.ActionLink("Click here to contact us", "Contact")

<强>客户端：我们应该修复页面之间的链接以及表单提交。

链接：您可以在JS（jQuery，如果您愿意）中连接一个事件，该事件将针对您要在SPA上应用的区域中的每个链接点击进行观察 - 然后，而不是重定向用户 - 您将通过AJAX加载内容。例如，看看这个示例：
```
$("a").click(function(e) {
    e.preventDefault(); // Disable standard redirecting
    var href = $(e.currentTarget).attr("href");

    $.get(href, function(responseText) {
        $("#main-content-wrapper").html(responseText);
    });
});
```

表单：就像我们用于链接的approch一样，我们可以将观察者连接到JS中的表单提交事件，然后使用AJAX传输数据。例如：

$("form").submit(function(e) {
    e.preventDefault(); // Disable standard submittion
    var data = $(e.currentTarget).serialize(); // Serializing the form data
    var method = $(e.currentTarget).attr("method");
    if (typeof (method) == "undefined") { method = "POST"; }

    $.ajax({
        method: $(e.currentTarget).attr("method"),
        parameters: data,
        statusCodes: {
            404: function() { /* Handle it somehow */ }
            403: function() { /* Handle it... */ }
            200: function(response) {
                /* Since we've done a form submittion, usurally if we're getting standard OK (200) status code - we've transffered a data - such as JSON data - indicating if the request success or we got errors etc. The code you're writing here depends on how your current application works. */
            },
    });
});

服务器端：由于您不希望破坏当前的应用程序逻辑 - 您仍然必须能够使用标准的ASP.NET MVC方法 - 例如View（），Redirect（）等。在这种情况下，我建议您创建自己的自定义基本Controller类 - 它将覆盖ASP.NET基本实现。

例如，这是一个起点：

public class MyController : System.Web.Mvc.Controller { public override View(string viewName) { if (Request.IsAjaxRequest()) { return PartialView(viewName); // If this is an AJAX request, we must return a PartialView. } return base.View(viewName); } }

你必须记住几件事：

您必须以某种方式区分标准请求和AJAX请求 - 我与Request.IsAjaxRequest（）一起使用的方式是一种很好的方法。

很多时候，当您处理表单时，在表单提交操作中，在完成表单逻辑后，您将使用Redirect（）将用户重定向到另一个页面。正如您可能已经猜到的那样，在开发SPA时您无法接受这个问题。但是，我可以想到这个问题的解决方案：

您可以在JS代码中创建状态处理程序，以便在服务器发出重定向时 - 您可以通过AJAX加载内容/显示消息等等。

您可以覆盖Redirect（）并添加一个特定的逻辑，以便在AJAX完成请求时进行重定向 - 例如，您可以从ASP.NET请求执行您将要转移的操作进入然后返回其内容等。

您可以决定虽然它是一个SPA应用程序 - 当发布重定向时 - 您允许服务器执行此重定向。

正如您所看到的 - 您可以采取许多方法，它们取决于您开发网站的方式，您希望它如何工作以及您定义的基本规则（例如“否”）永远不允许重定向 - 即使在提交表单后“，”表单提交后 - 总是在操作成功的情况下 - 我正在显示消息或执行其他JS操作。因此，我可以覆盖Redirect（），如果这样是一个AJAX请求我可以返回一个JSON对象。“等等。”

如何在asp.NET MVC3项目的部分应用单页面应用程序功能？

1 个答案: