MVC5：数字标牌网站

Question

MVC5：数字标牌网站

我正在尝试制作一个可以在我公司的电视屏幕上运行的数字标牌网站。我的想法是使用 MVC 使拆分表示层和数据层变得相当容易。我需要一个显示各种页面的网站 - 有些将具有 Google 风格的仪表板控件，如仪表和表格、一些公告，以及在页面翻入翻出时沿底部爬行的新闻行情。问题是我对MVC不太熟悉。

我在获取一个每 5 或 10 秒就会切换到一个新页面的网站时遇到了很多问题。我对如何使用布局页面、部分视图和回调控制器感到困惑。我已经为此工作了四天，所以我有大量的代码，但我不想把它们全部粘贴在这里。

只是我尝试过的基础知识（我将省略像头元素这样的样板内容和我没有做任何特殊事情的东西）：

_ViewStart

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

Run Code Online (Sandbox Code Playgroud)

_布局

<div class="container body-content">
    @RenderBody()        
</div>

<footer>
    <hr />
    <marquee behavior="scroll" direction="left"><img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>

Run Code Online (Sandbox Code Playgroud)

公司1_布局

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<body class="greybackground container">
<header>
    <img src="~/images/homesafetymatters_header.png" alt="Home Safety Matters"/>
</header>
<div class="container body-content" style="height:100%">
    @RenderBody()
</div>

Run Code Online (Sandbox Code Playgroud)

主页（这是我尝试启动站点的地方，然后开始调用要出现的新页面）

@model DigitalSignsPages.Models.Home

@{
    ViewBag.Title = "Home";
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <h2>Welcome to Digital Signage v2.0</h2>


    <script>
    window.setInterval(yourfunction, 5000);

    function yourfunction() {
        $.ajax({
            url: '/Gauge/GoToHSMGauge',
            data: { id: 1 },
            success: function () {
                console.log('Added');
            }
        });
    }
</script>

Run Code Online (Sandbox Code Playgroud)

仪表控制器

public ActionResult GoToBrooksGauge(int id)
    {
        decimal answer = repository.GetGaugeData("001", 1);
        ViewBag.Title = "Gauge";
        ViewBag.Pct = answer;
        return View("HSMGauge");
    }

Run Code Online (Sandbox Code Playgroud)

我一直遇到的问题我 试图直接在我的 javascript 函数中调用一个动作，并且这种方法有效，但是在直接调用页面之后它似乎清除了任何 HTML，因此会有几个结束括号和半-冒号之类的。我想我必须使用 AJAX 来调用控制器操作方法，实际上，我的控制器中的断点每 5 秒就会被命中一次，但没有任何反应。没有没有视图出现。

我想我必须指定一个区域让新视图出现，比如 a ，然后我调用 $("#foo")......什么？加载，或 html？我不确定，似乎都没有做任何事情。但似乎我应该使用 Render 操作，但我不确定是否应该使用 RenderPartial()...这不是让它成为 Home.cshtml 页面的一部分吗？我想要一个新页面出现，HSMGauge.cshtml。

另外，我尝试将计时器放在 _Layout 页面中，然后保留一个可以传递给控制器的 javascript 变量，但是这似乎存在问题，因为我会收到一个错误，即变量超出范围时我这样做。所以现在我的想法是让 Home.cshtml 启动站点，然后当每个控制器中的 action 方法被调用时，它返回一个要打开的特定视图。但正如我所说，当控制器中的动作被调用时，什么也不会发生。没有错误，只是没有。

基本上，如果有人有时间或精力，他们能否指出我做错的一些事情，一些教我如何做到这一点的好例子或网站，而我在谷歌上找不到，或者只是告诉我我说我在用 MVC 吠叫错误的树？

Answer 1

Gra*_*ler 5

根据您的描述，我将使用客户端 Javascript 框架（例如AngularJS）针对WebAPI后端制作单页应用程序 (SPA)。如果您经常更改页面并使用仪表板，它将提供更好的无闪烁效果。您可以使用页面之间的转换（如 powerpoint），也可以轻松地异步加载仪表板组件，以便更快地加载页面。可以使用 Breeze 之类的工具在客户端缓存数据

对于学习 AngularJS - 我建议查看John Pappas代码营 PluarlSight 培训课程。我几天就学会了。他在nuget上有一个很棒的入门模板/框架，称为 H otTowel.Angular.Breeze

在我看来，Web 应用程序的未来主要是调用 API 的客户端应用程序。越来越多的应用程序采用这种方式。AngularJS 很受欢迎，可以与其他框架等很好地集成。MS 在 vNext 中投资了 .Net WebAPI 和 MVC6，所以我认为它是一个很好的堆栈

归档时间：	11 年，7 月前
查看次数：	1273 次
最近记录：	11 年，7 月前