IT이야기

ASP.NET MVC 면도기 디자이너

cyworld 2021. 10. 11. 17:45
반응형

ASP.NET MVC 면도기 디자이너


저는 새로운 팀에 ASP.NET MVC를 소개하고 있는데 자주 나오는 질문 중 하나는 "디자이너 보기가 있습니까?"입니다.

레이아웃용이 아니더라도 면도기 보기 엔진을 사용하는 ASP.NET MVC3용 IN Visual Studio 디자인 보기가 있습니다.


아니요, 디자이너가 없습니다. 많은 경우에 디자이너는 Razor 코드가 의미하는 바를 알기조차 어려울 것입니다.

웹 브라우저를 뷰어로 사용하는 것은 그리 어렵지 않습니다. 다시 컴파일할 필요 없이 HTML을 변경할 수 있습니다. 브라우저를 변경하고 저장하고 새로 고치기만 하면 됩니다.

편집(2013년 8월 2일)

이 답변이 원래 작성되었기 때문에 Microsoft는 Page Inspector 라는 기능을 포함하는 Visual Studio 2012를 출시했습니다. 이 기능 은 질문이 작성된 방식으로 진정한 "디자이너"가 아니지만 훨씬 더 멋진 반 라이브 미리 보기 모드를 제공합니다. 이것은 Visual Studio 2013(오늘 RTM이 13/10/17/10)에서 개선되었습니다.


웹 브라우저 창을 사용하고 디자이너 대신 URL을 내 로컬 호스트로 설정합니다. 보기 > "다른 창" > "웹 브라우저". 그런 다음 창을 세로 또는 가로로 분할합니다.


다음 트릭을 사용하여 작업할 수 있었습니다.

  1. razor 파일의 확장자를 .html로 변경
  2. 문서 열기
  3. 문서를 연 상태에서 파일 확장자를 다시 .cshtml로 변경합니다.

축하합니다. 이제 면도기 파일에 대한 디자이너 보기가 생겼습니다. 면도날 인텔리센스가 필요한 경우 닫았다가 다시 엽니다.


아니요, 일반적으로 시각 디자이너를 피하려고 노력해야 합니다. HTML/CSS/Javascript의 조합은 비주얼 디자이너가 잘 할 수 없는 일이며 수동으로 학습하는 단기적인 고통은 그만한 가치가 있습니다. 이것들을 잘 알고 나면 더 깨끗하고 빠른 방법으로 코딩하게 될 것입니다. 저는 종종 Expression Web을 사용하여 Visual Studio에 복사하기 전에 초기 레이아웃을 수행합니다.


파티에 늦었다는 걸 알지만..

위에서 언급한 대로 IDE를 속일 수 있지만 MVC에서 응용 프로그램을 빌드하는 경우 코드 보기가 편안해야 합니다. 그것은 더 생산적이며 대부분의 반응형 디자인 및 CSS 구현은 디자인 보기에서 잘못된 결과를 줄 수 있습니다. Designer는 WebForms에서 유용합니다. 그러나 Visual Studio 2013의 브라우저 링크 기능을 사용하면 더 이상 IDE를 속일 이유가 없으며 일대다 브라우저를 열고 브라우저에서 Visual Studio로 실시간 업데이트를 받을 수 있습니다. 이길 수 없어! 브라우저가 있는 곳입니다!

브라우저 링크!

다음을 설치하면 황금이 될 것입니다!

Microsoft Visual Studio 2013 업데이트 3
Web Essentials (VS 업데이트 3에 따라 다름)


익스프레션 블렌드 5 개발자 프리뷰 의 기능으로 작업하고 있다고 생각 합니다.

그들은 디자이너에서 JS를 디자인하는 문제를 분명히 인식하고 있으므로 MVC 응용 프로그램에서 작업하는 일부 디자이너에게도 동일하게 적용된다는 것을 알고 있다고 생각합니다.

Microsoft의 누군가로부터 "HTML용 Blend에서 대화형 모드를 사용하면 MVC 또는 MVVM 패턴을 디자인하는 데 문제가 없을 것"이라고 말했습니다.

또한 필요한 작업을 수행하는 것처럼 보이는 Visual Studio Page Inspector를 확인하십시오.

Visual Studio 2013에는 브라우저 링크가 추가 되어 브라우저와 Visual Studio 간의 양방향 통신이 가능합니다. 즉, 코드를 변경할 때 브라우저를 새로 고치고 어떻게 보이는지 즉시 확인할 수 있습니다. 또한 브라우저에서 Css를 변경하고 Visual Studio에 저장할 수 있습니다.


여기에 언급된 해결 방법이 있습니다. http://www.codeproject.com/KB/aspnet/EnablingDesignerSupport.aspx

참조URL : https://stackoverflow.com/questions/4551300/asp-net-mvc-razor-designer

반응형