2014-06-17 1 views
1

회사의 TV 화면에서 실행되는 디지털 사이 니지 웹 사이트를 만들려고합니다. 내 생각은 MVC를 사용하여 프리젠 테이션 레이어와 데이터 레이어를 분리하는 것을 상당히 쉽게 만들었습니다. 다양한 페이지를 보여주는 사이트가 필요합니다. 일부 사이트는 Gauges 및 테이블과 같은 Google 스타일 대시 보드 컨트롤, 일부 공지 사항 및 페이지가 뒤집어 쓰이는 동안 바닥을 따라 크롤링되는 뉴스 티커를 필요로합니다. 문제는 MVC에 익숙하지 않다는 것입니다.MVC5 : Digital Signage 웹 사이트

5 ~ 10 초마다 새로운 페이지로 전환하는 웹 사이트를 만드는 데 많은 어려움을 겪고 있습니다. 레이아웃 페이지, 부분 뷰 및 컨트롤러로 다시 호출하는 방법과 혼동 스럽습니다. 나는 4 일 동안이 작업을 해왔으므로 많은 코드가 있지만 여기에 붙여 넣기를 원하지는 않는다.

_ViewStart

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

_Layout : 나는 시도 무엇

그냥 기본 사항 (나는 특별한 아무것도하고 있지 않다 헤드 요소 및 물건처럼 상용구 물건을 떠날 것이다)

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

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

GaugeController

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

문제 나는 내가 내 자바 스크립트 함수에 직접 액션을 호출하려고했다 필요하고, 일의 종류,하지만 그래서 페이지로 바로 그 전화 후 모든 HTML을 플러시 듯 한 몇 개의 끝 대괄호와 세미콜론 등이있을 것입니다. AJAX를 사용하여 컨트롤러 동작 메서드를 호출해야하며 실제로 컨트롤러에서 브레이크 포인트가 5 초마다 작동하지만 아무 일도 일어나지 않는다고 생각합니다. No View가 나타나지 않습니다.

새로운보기를 표시 할 영역을 지정해야한다고 생각합니다. 그런 다음 $ ("# foo") ...를 호출합니다. 로드 또는 HTML? 나는 잘 모르겠다. 하지만 Render 액션을 사용해야하는 것처럼 보이지만 RenderPartial()을 사용해야하는지 확신 할 수 없다. Home.cshtml 페이지의 일부가 아닌가? 새 페이지 HSMGauge.cshtml을 표시하고 싶습니다.

또한 _Layout 페이지에 타이머를 넣은 다음 컨트롤러에 전달할 수있는 javascript 변수를 유지하려고 시도했지만 변수가 있다는 오류가 발생하기 때문에 문제가있는 것 같습니다. 내가 그것을 할 때 범위를 벗어났습니다. 이제는 내 생각으로 Home.cshtml을 사이트에서 시작한 다음 각 컨트롤러의 작업 메서드가 호출되면 특정 뷰를 열어 반환합니다. 하지만 내가 말했듯이 컨트롤러의 동작이 호출되면 아무 일도 일어나지 않습니다. 오류가없고 아무 것도 없습니다.

기본적으로 누군가가 시간이나 열정을 가지고 있다면 내가 잘못하고있는 일, 좋은 예나 좋은 방법을 가르쳐주는 사이트 등 내가 Google에서 찾을 수 없었던 것을 지적 할 수 있습니다. 아니면 MVC로 잘못된 트리를 짖고 있다고 말할 수 있습니까?

답변

4

귀하의 설명을 Single Page Application (SPA)WebAPI 백엔드에 대한 AngularJS 같은 클라이언트 쪽 자바 스크립트 프레임 워크를 사용하여 만들 것이라고. 페이지를 자주 변경하고 대시 보드를 사용하면 깜박임없는 효과가 훨씬 뛰어납니다. 페이지간에 전환 (예 : 파워 포인트)을 사용할 수 있으며 대시 보드 구성 요소를 비동기 적으로 쉽게로드하여 페이지를 더 빨리로드 할 수 있습니다. 데이터는 Breeze와 같은 도구를 사용하여 캐시 될 수 있습니다.

AngularJS를 배우려면 John Pappas 코드 캠프 PluarlSight 교육 과정을 살펴 보는 것이 좋습니다. 며칠 내로 배웠습니다. 그는 훌륭한 시작 템플릿/프레임 워크를 가지고있다.

내 의견으로는 웹 애플리케이션의 미래는 API를 호출하는 대부분 클라이언트 측 애플 리케이션이다. 점점 더 많은 응용 프로그램들이 그렇게되고 있습니다. AngularJS는 다른 프레임 워크 등과의 통합에서 널리 사용됩니다. MS는 .NET WebAPI 및 MVC6에 투자하고 있으므로 스택이 좋다고 생각합니다.

+0

감사합니다. 좋은 조언입니다. 나는 일을 너무 복잡하게 만들었다. 그것은 MVC를 사용하는 것이 좋습니다 그러나 그것은 내가 뭘하려고 최선의 프레임 워크되지 않을 수도 있습니다. 나는 지금까지 본 각도를 좋아한다. – Pete

+0

MVC와 Angular를 확실히 결합 할 수 있습니다. 그러나 나는 WebAPI가 아마 인생을 단순하게 만든다고 생각했을 것입니다. 그 후에는 모바일 애플리케이션, 고객 또는 향후 다른 어떤 곳에서도 사용할 수있는 잘 정의 된 API를 갖게됩니다. – GraemeMiller