How can I show which cshtml files are building my page? - asp.net-mvc-3

The scenario
My team is building a fairly complex MVC3/C# site. There's been some refactoring lately, and many of the views, partial views, and templates have moved around. When I look at one of our pages, it's hard to tell which cshtml file is responsible for which piece of the page. I'd like a faster way to see which file I should be working on.
Why it's a problem
There are a lot of files in our presentation layer, and the folder structure is complicated.
Some cshtml files have the same name, but different file paths.
Our routing tables are similarly complex.
We've made significant use of layouts, shared views, partial views, and templates. A single page could have upwards of 10 cshtml files building it.
Most of the client-side text comes from resource strings, so I can't just Ctrl-F for the text on the page.
Stepping through the debugger doesn't save me much time.
None of these things is a show-stopper, but they make this time-consuming.
What I want
When I run it on localhost (only), I'd like the rendered HTML to come out something like this:
<!-- From: ~/shared/_layout.cshtml -->
<html>
<body>
<!-- From: ~/admin/view.cshtml -->
<h1>Here comes a list of widgets:</h1>
<!-- From: ~/widgets/list.cshtml -->
<ul>
<!-- From: ~/widgets/view.cshtml -->
<li>Widget 1</li>
...etc.
I'd be open to other ways of getting the info I need, including third-party tools.
Ideas so far
My idea was to tweak the base class we're using for our pageBaseType, but I'm a bit new to MVC (< 1 year), and that's still a bit over my head. I'm not sure which method to override, or how to get and render the view's filename.

There's some nuget packages available for this kind of debugging:
http://nuget.org/packages/Glimpse.Mvc3
http://nuget.org/packages/routedebugger
https://preview.nuget.org/packages/RouteMagic

Related

How Visual Studio syntax highlight works?

When I create a tag 'style' in an aspx page, Visual Studio highligths code using css style syntax to highlights and formatting. When I create a tag 'script', Visual Studio does the same, but using javascript style syntax.
When I create a .scss file, Visual Studio has scss syntax. I created a new server control that processes SCSS, and I want that code wrote inside this server control use scss style syntax. How do I vinculate a certain tag to a certain syntax processor?
Ps.: I'm using Visual Studio 2017
Editors (and many editor related features) in VS rely on a Content Type which indicates the language they support. Most editors, like C# or VB, only work on a single Content Type.
The HTML and ASPX editors in Visual Studio (which are separate editors) identify certain patterns that indicate a different language is being used. It then creates multiple internal documents in memory (TextBuffers) with separate Content Types for each language identified. The language services for each of those can then be used to handle the language natively instead of HTML having to "know" all about CSS/JavaScript/anything else. For example:
<script> blocks or event handlers create a JavaScript buffer for the contents
<style> blocks or style= attributes create CSS buffers
Any of the <%-style ASP.NET nuggets create appropriate language buffers (C#/VB)
The # in Razor CSHTML files creates a C# buffer
etc
These nested TextBuffers are actually entire documents to make the language look right. For example, if I have:
<span style="color: blue;" />
The CSS buffer is an internal document that looks something like this:
/* BEGIN EXTERNAL SOURCE */
span {
color: blue;
}
/* END EXTERNAL SOURCE */
It's important to note that this is a complete and parseable CSS document, so the language service can work as normal for finding errors, giving IntelliSense, etc.
(And if you think the CSS buffer looks messy, you should see what happens for Razor or ASPX nuggets...)
The ASPX editor then uses the VS editor platform to coordinate projections between these buffers into the single view of what you see - a TextView. So it looks like a single document, but it's being handled internally as several different documents (TextBuffers), one per language.
Now, getting to your question: how can you make the ASPX editor support SCSS? Well, there are two parts to this:
First, the ASPX editor would need to know how to identify the SCSS region of the document. This might be <style type="text/scss"> or another indicator. This could even be done by writing an extension to the ASPX editor if it were extensible (the HTML editor is much more friendly to writing extensions).
Next, the ASPX editor would create the projection span. It would hand that off to the SCSS language service. The SCSS language service needs to know that it's in a projection, and generate all that extra stuff to make the syntax tree work. (Note: the SCSS language service in VS doesn't support this today.)
From then on, everything that happens in the SCSS region needs to be mapped between the TextView (where the cursor is in the document you see) to the SCSS-specific TextBuffer (where the cursor is in the in-memory document used by the language service). Again, today the SCSS LS does not take this scenario into account.
The best way to get this to be supported is to give feedback through the Visual Studio developer community. This feature is already on the backlog, but adding additional votes for it will help the team to prioritize the work.

Is there software I can use to view my Markdown files as a wiki, with relative links, on Windows

Our team has installed the Markdown Mode extension in Visual Studio on our Windows PCs, and we're happy with that as an editor for Markdown files, but we need a way to generate a wiki from those files where we can click on links that cross-link the files of the wiki. I've been trying to find something, but haven't had any success getting something running.
I tried creating an empty web application and pasting in the html file from here http://dynalon.github.io/mdwiki/#!index.md and naming it index.html, and adding a couple of md files to the same directory that I set to always copy to the build directory, but I got 404-3 errors when it tried to access the .md file.
I see a couple of tools that look possibly good but need Python or Ruby installed, which isn't ideal: http://markdoc.org/quickstart or http://helloform.com/projects/commonplace/
I see this ASP.NET control for embedding a Markdown file into a page http://wikicontrol.codeplex.com/ but the control is for VS 2010 so clearly is not being actively maintained, plus to use it I'll need to build something to take the relative links and find the related .md files and load them up in MVC - sounds like a hassle to get working, and it will require me to put MVC in my docs project.
Is there something that is just designed so that I can put an html file or similar in a directory with a root .md file and have it just immediately act like a wiki and allow navigation between them?
We have decided to use MarkdownDeep NuGet package and a single MVC controller to handle this. The MVC controller looks at the requested path, uses it to figure out the location of the Markdown file, reads that file and renders it to HTML and returns the HTML.

Are include files necessary in an html website?

Are include files, such as server side include SSI, files necessary in an html website?
I recently tried to host my simple html website through GoDaddy. I used Dreamweaver CC to upload my files and encountered a problem. Some of my pages were not displaying images or css. I checked to see if the images and css were on the server and in the correct places and they were. Confused, I called GoDaddy's customer service, waited 35 minutes, and talked to one of their customer service reps. He basically told me that it may be my code and that I need 'include' files.
I have looked all over the web and I'm still not entirely sure what an include file is... I got from my research that they are snips of code that call images/files without having to write out the same thing on every page. If I have copied and pasted the same thing on every page, why then would I need an 'include' file? I previously had my website hosted through Hostmonster, still do now, and I have never had to alter my code...
I am still new to the world of coding, so please be kind. If anyone knows of a good resource to help explain the use of 'include' files please post it or correct me if I am wrong. Thank you.
I think the GoDaddy "support" guy was talking about the include operation in your html files that you need to fetch your css files.
Presumably your web pages work correctly when you display them locally on your development machine -- the machine where you run Dreamweaver. If not, fix them. They'll probably need css files in some subdirectory (or maybe in the same directory as the html) and image files in some other subdirectory.
Open up your page, on the server, in a browser, and then do View Source. Look for your css file download commands ... which may look something like this ... in your source.
<link href="styles.css" rel="stylesheet" type="text/css" />
Are the links (the href items) what you thought they should be? Sometimes you'll find that they are absolute links like
file:\\d\myfiles\website\dreamweaver\some_other_junk\styles\foo.css
If they are you need to change them to
styles/foo.css
The same goes for images.
And, no, you don't need server-side include files to put up a working static web site.

Slickgrid pager within Dynamics CRM having one icon per line

I am developing an application which runs within Microsoft Dynamics CRM (MSCRM). Essentially in this environment web resources including HTML, JavaScript, CSS and image files are stored within the system the can be referenced on pages. I've got SlickGrid running but have an issue where the pager buttons each occupy a whole line. The key part of the HTML is:
<div id="SPLocation" style="width:100%; height:80%">Grid</div>
<DIV id="SPPager" style="width:100%;height:20px;">Pager</DIV
but it looks like this:
!http://www.clew-consulting.com/Temp/SGIssue.png
(hope this image works). Note each icon occupies a whole row. I've checked all the styles and images and they seem fine. The icons are functional.
The cause is probably that display:inline-block is not being picked up but it is there in the style sheets. It could be something special to do with the environment within MSCRM but the other markups all look fine.
Unfortunately I cannot run IE developer and show this part of the screen where I could inspect the CSS.
Anyone any ideas? I know I have not posted all information.
Paul
The pager styles are defined in slick.pager.css file.
Place this file in your css folder and add the following line to your html file
(do not forget to replace [path to your file] with your real path):
<link href="[path to your file]/slick.pager.css" rel="stylesheet">

MVC 4 Web API Template - what can be deleted

Using VS2010, creating a new MVC 4 Web API project. Just wondering, can the .js-files in the Script folder be deleted, or are they somehow related to the magic beneath? How about those cshtml- files in the Views folder, I can't see that they are necessary for a REST-service, or again, are they part of the underlying technology. My guess, it can all be deleted safely - but just to be sure...
Bonus question (while I'm here): recommendations for unit- and integrationtesting REST-services, got any?
Thank you.
If your project only exposes a series of WebAPI controllers then that implies that your project will never serve actual HTML-based content. Thus, you can safely delete all files related to that content, such as:
HTML files (.cshtml)
JavaScript files (.js)
CSS style sheets (.css)
Images (.jpg, .png, .gif)

Resources