使用 ASP.NET 核心和 Razor 传递视图答案

【问题标题】：Passing views with ASP.NET core & Razor使用 ASP.NET 核心和 Razor 传递视图
【发布时间】：2017-01-06 00:23:36
【问题描述】：

我刚开始尝试 MVC 和 Razor。目前使用 Visual Studio for Mac 预览版开发网站来试用该技术。

我最关心的是如何更改页面？当我将此与 MVVM 进行比较时，您只标记前端，您将在 XAML 代码中声明一个按钮，然后只需在后面代码中的方法中调用它。

我有两个视图 Index.cshtml 和 Company.cshtml 当您按下继续按钮时，我想转到 Company。这是我的代码..

<input 
    type="submit" 
    class="button button-block"
    value="Continue" 
    onclick="window.location.href='<%= Url.Action("Company", "HomeController") %>';" />

然后从最佳实践的理解是在控制器中定义方法？所以这就是我不太明白如何连接这两个的地方。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
        // do some stuff here to go the Company page

    }

}

它们是如何连接的？你可以只用 HTML 和 CSS 编写所有前端，然后用 C# 编写所有后端吗？还是你必须混合它们？

谢谢！

【问题讨论】：

标签： c# html asp.net asp.net-mvc razor

【解决方案1】：

您应该在HomeController 中有Company 操作（即方法）：

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

    public ActionResult Company()
    {
        return View();
    }
}

单击链接时将调用此操作。请注意，您还需要相应的视图。还有一点需要注意 - 在生成操作 url 时，您不应该在控制器名称中使用 Controller 后缀。这是正确的 Razor 语法：

onclick="window.location.href='@Url.Action("Company", "Home" )';"

【讨论】：

在视图中();你会在哪里写 View("Company.cshtml")？
不需要指定视图名称（约定优于配置）。我不确定 VS for Mac 是否支持它，但您可以在公司操作中右键单击 View() 并选择 Add view 选项。或者您可以手动将 Company.cshtml 文件放入Views/Home 文件夹中。
@SterlinkArcher 不，这里应该有默认的死记硬背{controller}/{action}/{id}。顺便检查一下我关于剃刀语法和正确 url 生成的小更新
谢谢，我得再看看。发现它与标记和逻辑的混合混淆
@SterlinkArcher 你总是可以在前端和 web api 后端使用 javascript 进行纯标记，这将只返回没有标记的数据 :) 还有一些其他帮助程序，如 @Html.ActionLink("Continue", "Company")，它将生成完整的链接你。在这种情况下，HTML 和 css 自定义很难看:(

【解决方案2】：

您的方法应该因您打算构建的网站而异。例如，以下内容：

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

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

上面会生成您的路线，http://example.com/Home 和 http://example.com/company，但是当您的视图中的按钮触发时：

<a href="/Company/Index">Company</a>

这将触发闪烁，因为用户正在等待服务器重新呈现页面。包括将从您的主页捆绑和缩小的共享数据。因此，另一种选择是单页应用程序。

你有你的 api 控制器，然后你使用 JavaScript 来：

$.ajax({
     // Ajax that will return a .json object to build the page.
});

这将调用模板引擎，或者您可能使用 Angular、Ember 或 React 等前端框架。但是通过让后端独立，前端将为您处理所有转换。但这将使您的应用程序没有回发。它将充当单页应用程序。

另一种方法。

【讨论】：