asp.net-mvc-5 - MVC5 : Digital Signage website

标签 asp.net-mvc-5

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

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

只是我尝试过的基础知识(我将省略诸如 head 元素之类的样板内容以及我没有做任何特殊操作的内容):

_ViewStart

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

_布局

<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>

Company1_Layout

@{
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>

首页 (这是我尝试启动网站,然后开始调用新页面出现的地方)

@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>

仪表 Controller

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

我一直遇到的问题 我试图直接在我的 javascript 函数中调用一个操作,并且这种方法有效,但是在直接调用页面之后它似乎会清除所有 HTML,因此会有几个结束括号和分号等。我想我必须使用 AJAX 来调用 Controller 操作方法,事实上,我的 Controller 中的断点每 5 秒就会被命中,但什么也没有发生。不,没有 View 出现。

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

此外,我尝试将计时器放在 _Layout 页面中,然后保留一个可以传递给 Controller ​​的 JavaScript 变量,但这似乎存在问题,因为我会收到变量已输出的错误当我这样做时的范围。所以现在我的想法是让 Home.cshtml 启动网站,然后当每个 Controller 中的操作方法被调用时,它返回一个要打开的特定 View 。但正如我所说,当 Controller 中的操作被调用时,什么也没有发生。没有错误,只是什么都没有。

基本上,如果有人有时间或精力,他们能否指出我做错的一些事情,一些可以教我如何做到这一点但我无法通过 Google 找到的好例子或网站,或者也许只是告诉我我用 MVC 找错了方向?

最佳答案

根据你的描述,我会做一个 Single Page Application (SPA)使用客户端 Javascript 框架,例如 AngularJS反对WebAPI后端。如果您经常更改页面并使用仪表板,它将提供更好的无闪烁效果。您可以使用页面之间的转换(如 powerpoint),并且仪表板组件也可以轻松异步加载,以便页面加载速度更快。可以使用 Breeze 等工具在客户端缓存数据

要学习 AngularJS - 我建议查看 John Pappas代码营 PluarlSight 培训类(class)。我几天之内就学会了。他有一个很棒的入门模板/框架,名为 H otTowel.Angular.Breeze关于nuget

在我看来,Web 应用程序的 future 主要是调用 API 的客户端应用程序。越来越多的应用程序采用这种方式。 AngularJS 因与其他框架等的良好集成而广受欢迎。微软正在 vNext 中投资 .Net WebAPI 和 MVC6,所以我认为这是一个很好的堆栈

关于asp.net-mvc-5 - MVC5 : Digital Signage website,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24273471/

相关文章:

c# - 无需刷新页面即可更新数据库调用

c# - ASP.NET MVC 5 错误的重定向登录页面

css - 在 MVC 5 网站上使用 font-awesome 时没有图像

asp.net-mvc - typescript 捆绑和缩小?

c# - EF 创建额外表

asp.net-core - ASP.NET Core/5/6 - "Scoped Service"何时被释放?

asp.net-mvc - AspNet Identity 中的个人资料图像

html - 按钮放置在彼此下方并带有空格

html - 表格树上的水平滚动条

c# - 如何在我的 ASP.NET MVC 5 项目中获取 “Add Controller” 和 “Add View” 菜单选项?