All geek questions in one place

Link to the same js files from multiple locations using partial views

I am building the architecture for an MVC6 application, and I rely heavily on ViewComponents. My goal is to allow each ViewComponent component to have its own javascript section, but from reading here rendersection does not work with ViewComponents, so I tried to do it differently.

In my _Layout.cshtml

I have this part just before closing the body tag:

  @{Html.RenderPartial("_LayoutScriptsPartial"); }

In _LayoutScriptsPartial

<environment names="Development">
  <script src="~/lib/jquery/dist/jquery.js"></script>    
  <script src="~/js/app.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
      <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
        asp-fallback-src="~/lib/jquery/dist/jquery.min.js">
      </script>

       <script src="~/js/app.min.js" asp-append-version="true"></script>
</environment>

Now in one of my components in / Views / Shared / Components / MyComponent / Default.cshtml I am linking to another partial view containing this content for the ViewComponent carousel

 @model MyProj.MyViewModel
 @{Html.RenderPartial("_LayoutScriptsPartial"); }

 @if (!string.IsNullOrEmpty(Model.ImageUrl))
 {


<script type="text/javascript">

    var cssClass= "@Model.cssClass";
    var imageUrl = "@Model.ImageUrl";

    webbCore.carouselSetBackgroundImage(cssClass, imageUrl);

</script>

 }

, , js . , _LayoutScriptsPartial. f12 , javascript, . . js ViewComponents, . - .

: , - js ViewComponents?

+4
1

3 :

  • ViewComponent 0 JavaScript 0
  • ViewComponent 1 , JavaScript 1 , JavaScript .
  • ViewComponent , JavaScript 1 , JavaScript ViewComponent .

, jquery app.js , JavaScript , @Model <script type="text/javascript">. , 3 ( @RenderBody() html , 3 ):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - MyProj.Web</title>

<environment names="Development,Staging,Production">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="~/css/culture-flags.css" />
</environment>
</head>
<body>
<header>@Html.Partial("~/Views/Shared/_Header.cshtml")</header>
<main>
    <nav></nav>
    <article>
        <div class="container body-content">
            <!--@RenderBody()-->
                <!--@await Component.InvokeAsync("MyComponent", new MyViewModel {cssClass="t1", ImageUrl="1.jpg"})-->
                <script src="~/lib/jquery/dist/jquery.js"></script>    
                <script src="~/js/app.js" asp-append-version="true"></script>
                <script type="text/javascript">
                    var cssClass= "t1";
                    var imageUrl = "1.jpg";
                    webbCore.carouselSetBackgroundImage(cssClass, imageUrl);
                </script>
                <!--@await Component.InvokeAsync("MyComponent", new MyViewModel {cssClass="t2", ImageUrl="2.jpg"}) -->
                <script src="~/lib/jquery/dist/jquery.js"></script>    
                <script src="~/js/app.js" asp-append-version="true"></script>
                <script type="text/javascript">
                    var cssClass= "t2";
                    var imageUrl = "2.jpg";
                    webbCore.carouselSetBackgroundImage(cssClass, imageUrl);
                </script>
                <!--@await Component.InvokeAsync("MyComponent", new MyViewModel {cssClass="t3", ImageUrl="3.jpg"}) -->
                <script src="~/lib/jquery/dist/jquery.js"></script>    
                <script src="~/js/app.js" asp-append-version="true"></script>
                <script type="text/javascript">
                    var cssClass= "t3";
                    var imageUrl = "t3.jpg";
                    webbCore.carouselSetBackgroundImage(cssClass, imageUrl);
                </script>
        </div>
    </article>
    <aside></aside>
</main>
<footer>@Html.Partial("~/Views/Shared/_Footer.cshtml")</footer>
<!-- These are the libraries that should only be loaded once -->
<environment names="Development,Staging,Production">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<!-- Ideally this is where the dynamically create scripts would go -->
@RenderSection("scripts", required: false)
</body>
</html>

, jquery 4 , 3 ViewComponents. , (, $).

, View Component .

, section ViewComponents , -, . ViewComponent html-. , .

  • (Component.InvokeAsync( "MyComponent" )) javascript @section {...}
  • js,

$(".carousel").each(function() { var css = $(this).data("carousel-css"); var image = $(this).data("carousel-image"); });

<input class="carousel" type=hidden data-carousel-css="@Model.cssClass" data-carousel-image="@Model.imageURL" />

+5

Source: https://habr.com/ru/post/1673677/

More articles:


All Articles