Link to .cshtml view from javascript

Question

How can you point directly to a .cshtml view from javascript file? For example why can't I use a .cshtml view with angular.js? like in this example:

 .directive('encoder', ($timeout) => {
        return {
            restrict: 'E',
            transclude: true,
            scope: 'isolate',
            locals: { service: 'bind' },
            templateUrl: 'encoderTemplate.cshtml' // <-- that's not possible?
        }
    });

It's of course possible to have an action method that returns whatever you want, but I'm curious if it's possible to reference directly to the razor view.

Answer 1

As mentioned in a comment, you can't serve up .cshtml files directly, However, you can use a controller to render the content if you so choose:

public class TemplateController : Controller
{
    // create a ~/Views/Template/Encoder.cshtml file
    public PartialViewResult Encoder()
    {
        return PartialView();
    }
}

Then reference it like you would with @Url.Action:

{
    ....
    templateUrl: '@Url.Action("Encoder", "Template")'
}

---

From Comment

If you have most of the JavaScript code outside of something that has Razor access (e.g. external .js file) you can still take advantage of the Url builder, just have to do so a little differently. For instance, I may do something like:

public class TemplateController : Controller
{
    // Add a child method to the templates controller that outputs default
    // configuration settings (and, since it's a child action, we can re-use it)
    [ChildActionOnly]
    public PartialViewResult Index()
    {
        // You could build a dynamic IEnumerable<ConfigRef> model
        // here and pass it off, but I'm just going to stick with a static view
        return PartialView();
    }
}

~/Views/Template/Index.cshtml

<script type="text/javascript">
  if (typeof window.App === 'undefined'){
    window.App = {};
  }
  App.Templates = {
    Encoder: '@Url.Action("Encoder", "Template")',
    Template1: '@Url.Action("Template1", "Template")',
    Template2: '@Url.Action("Template2", "Template")'
  };
</script>
@*
   the template files would then reference `App.Templates.Encoder`
   when they need access to that template.
*@
@Scripts.Render("~/js/templating")

Index.cshtml (or whatever is any view)

@* ... *@
@{ Html.RenderAction("Index", "Template"); }
@* ... *@

Answer 2

Another option is:

1.Add TemplatesController with EncoderTemplate view

public class TemplatesController : Controller
{

     public ActionResult EncoderTemplate()
     {

           return View();
     }

}

2.Add Layout = null to EncoderTemplate.schtml view

@{
    Layout = null;
}

<div>Your html goes here</div>

3.Point to the EncoderTemplate.schtml as shown below

.directive('encoder', ($timeout) => {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        locals: { service: 'bind' },
        templateUrl: '/Templates/EncoderTemplate' // you should not add .schtml
    }
});