从JavaScript链接到.cshtml视图

Question

如何从JavaScript文件直接指向.cshtml视图？例如，为什么不能在angular.js中使用.cshtml视图？就像这个例子一样：

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

当然可以有一个返回任何内容的动作方法，但我想知道是否可能直接引用Razor视图。

- iLemming

---

不行，因为IIS无法提供.cshtml文件，因为它不被认为是静态文件。你可以考虑设置一个虚拟控制器，直接传递指定的.cshtml文件。 - McGarnagle

你能把它作为答案吗...谢谢 - iLemming

Answer 1

正如评论中提到的，您不能直接提供 .cshtml 文件，但是如果您选择，可以使用控制器来呈现内容：

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

然后像使用@Url.Action一样引用它：

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

---

来自评论

如果你将大部分JavaScript代码放在没有Razor访问权限的地方（例如外部.js文件），你仍然可以利用Url构建器，只是需要以稍微不同的方式操作。例如，我可能会这样做：

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（或任何其他视图文件）

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

- Brad Christie

---

我无法使用@Url.Action，因为代码来自于独立的.js文件中的JavaScript，而不是嵌入到Razor视图中。 - iLemming

@Agzam：您还可以将全局设置存储在网站根目录中，然后在子文件中引用。var SiteSettings = { templates: { encoder: '@Url.Action("Encoder","Template)' } } 然后 templateUrl: SiteSettings.templates.encoder - Brad Christie

Answer 2

另一个选项是：

1.添加TemplatesController与EncoderTemplate视图

public class TemplatesController : Controller
{

     public ActionResult EncoderTemplate()
     {

           return View();
     }

}

2.在EncoderTemplate.schtml视图中添加Layout = null。

@{
    Layout = null;
}

<div>Your html goes here</div>

3. 如下图所示，将光标指向EncoderTemplate.schtml

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

- Hov

---

这正是我所做的，而且它非常有效。然而到目前为止，我还没有想出如何在Visual Studio中使用Resharper作为运行器，使用Jasmine进行单元测试。有什么想法吗？ - Kildareflare

抱歉，我不知道。我没有使用Resharper。 - Hov