问题 如何拦截视图渲染以在所有局部视图上添加HTML / JS?


我需要从约定驱动的位置编写js文件的内容(如〜/ ClientApp / Controllers / Home / Home.js,如果加载位于〜/ Views / Home / Home.cshtml的视图)。我该怎么做呢?

示例:如果文件〜/ Views / Home / Home.cshtml如下所示:

<div id="some-partial-view">
   <!-- ... -->
</div>

文件〜/ ClientApp / Controllers / Home / Home.Controller.js看起来像

function HomeController() {
  //some code
}

然后,Web服务器返回的渲染视图应该看起来像(如果使用fiddler)

<!--ommitted <html> <body> tags -->

<div id="some-partial-view">
   <!-- ... -->
</div>

<script type="text/javascript">
   function HomeController() {
       //some code
   }
</script>

一种方法是添加一个HTML Helper,它将执行此操作,例如:

<div id="some-partial-view" ng:Controller="HomeController">
   <!-- ... -->
</div>
@Html.IncludeController("HomeController") 

但是,我不想在所有部分视图中重复这一点。

有任何想法吗?


6683
2017-12-27 07:30


起源

在您的部分视图中引用您的javascript文件,<script type =“text / javascript”src =“/ ClientApp / Controllers / Home / Home.Controller.js”> </ script> - Efe Kaptan
我想跳过这一步,因此问题。想要在视图渲染过程中编织js文件。也想减少往返,因此这不是一个选择。 - leypascua
目前还不清楚“在视图渲染过程中编织js文件”是什么意思? - Efe Kaptan
为清晰起见更新了问题:) - leypascua


答案:


您可以编写自定义视图:

public class MyRazorView : RazorView
{
    public MyRazorView(ControllerContext controllerContext, string viewPath, string layoutPath, bool runViewStartPages, IEnumerable<string> viewStartFileExtensions, IViewPageActivator viewPageActivator)
        : base(controllerContext, viewPath, layoutPath, runViewStartPages, viewStartFileExtensions, viewPageActivator)
    {

    }

    protected override void RenderView(ViewContext viewContext, TextWriter writer, object instance)
    {
        base.RenderView(viewContext, writer, instance);

        var view = (BuildManagerCompiledView)viewContext.View;
        var context = viewContext.HttpContext;
        var path = context.Server.MapPath(view.ViewPath);
        var viewName = Path.GetFileNameWithoutExtension(path);
        var controller = viewContext.RouteData.GetRequiredString("controller");
        var js = context.Server.MapPath(
            string.Format(
                "~/ClientApp/Controllers/{0}/{0}.{1}.js",
                viewName,
                controller
            )
        );
        if (File.Exists(js))
        {
            writer.WriteLine(
                string.Format(
                    "<script type=\"text/javascript\">{0}</script>",
                    File.ReadAllText(js)
                )
            );
        }
    }
}

和一个自定义视图引擎,它将在请求部分视图时返回此自定义视图:

public class MyRazorViewEngine : RazorViewEngine
{
    protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
    {
        return new MyRazorView(
            controllerContext, 
            partialPath, 
            null, 
            false, 
            base.FileExtensions, 
            base.ViewPageActivator
        );
    }
}

将在。注册 Application_Start

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();

    RegisterGlobalFilters(GlobalFilters.Filters);
    RegisterRoutes(RouteTable.Routes);

    ViewEngines.Engines.Clear();
    ViewEngines.Engines.Add(new MyRazorViewEngine());
}

你可能可能需要调整一些路径,因为在你的问题中不太清楚js应该在哪里,但通常你应该在答案中有足够的细节。


15
2017-12-27 08:24



正是我在寻找的东西:)只是想到了另一种方式,而不是编写自定义视图引擎。非常感谢 :) - leypascua
@leypascua,还有其他方法,但这一个是最干的。 - Darin Dimitrov
@DarinDimitrov有没有办法可以用其他东西替换写作中的所有HTML?另外,我怎么能只在它是控制器动作使用的视图时执行它,例如我有一个 HomeController 和行动 Home 我希望这个代码只在View上执行 Home。今天它正在从页面上使用的所有视图运行。 - Terkhos


将所有你的javascript包含在outter环中更合理,然后通过index.php或任何地方包含它...

我个人使用jQuery,我像这样包含每个对象......

//View Objects
(function($){

var views = {

   init: function()
   {
      this.view1();
      this.view2();
   },
   view1 : function()
   {
     // I am
   },
   view2 : function()
   {
     // all yours
   }

}
//call/invoke my view objects
$(function(){

    //call view object via init()
    view.init();
});

})(jQuery);

0
2017-12-27 07:39



不是一种选择。目标是按需加载JS,只有在真正需要的时候。 - leypascua
if(getElementbyID(id)){//加载我ie:elements.sexyID(); } - Philip