Можно ли поместить JavaScript в частичные представления

Если вы хотите написать частичные представления, которые являются инкапсулированными "виджетами", которые просто работают, как только вы включаете их в страницу, то встраивание блока сценария внутри частичного представления является одним из чистых способов обернуть разметку и сценарий инициализации вместе в частичном представлении. Например, у меня может быть частичное представление с именем "_EventList", которое я использую на своем сайте. Если я размещаю в двух местах на своей главной странице, он должен просто работать, и я предпочитаю не писать логику на своей главной странице для инициализации штучка.

Если вы никогда не использовать его более одного раза на странице, его просто. Но если вы можете, то оберните скрипт так, чтобы он не выполнялся дважды. Увидеть ниже. Ради фрагментов переполнения стека я имитирую его, повторяя частичное представление дважды в фрагменте кода, чтобы представить в том числе частичное представление дважды на главной странице.

моя главная страница может выглядеть так:

<div id="left-nav">
   @Html.Partial("_EventList")           
</div>

<div id="body">
</div>

<div id="right-nav">
   @Html.Partial("_EventList")
</div>

пример:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Self-contained partial view containing widget -->

<div id="widgetDiv" class="panel panel-default">

    <div class="panel-heading">Event Dates</div>
    <div class="panel panel-group">
       <ul class="widget">
         <!-- These will load dynamically -->
       </ul>
    </div>

    <script>
        $(document).ready(function() {

            // Run this once only in case widget is on page more than once
            if(typeof $widget == 'undefined') {
                $widget = $("ul.widget"); // could be more than one
                // mock data to simulate an ajax call
                var data = [
                   {Description: "March", StartDate: "03/01/2015"},
                   {Description: "April", StartDate: "04/01/2015"},
                   {Description: "May", StartDate: "05/01/2015"}
                ];

                $.each($widget, function(w, widget) {
                    // might be an $.ajax call
                    $.each(data, function(i, row) {
                        $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>");
                    });
                });
            }
        });
    </script>
</div>
<!-- End of widget / partial view -->



<!-- Second copy of above for sake of example snippet -->
<!-- No need to read further -->









<!-- Self-contained partial view containing widget -->

<div id="widgetDiv" class="panel panel-default">

    <div class="panel-heading">Event Dates</div>
    <div class="panel panel-group">
       <ul class="tinylist nav nav-sidebar widget">
         <!-- These will load dynamically -->
       </ul>
    </div>

    <script>
        $(document).ready(function() {

            // Run this once only in case widget is on page more than once
            if(typeof $widget == 'undefined') {
                $widget = $("ul.widget"); // could be more than one
                // mock data to simulate an ajax call
                var data = [
                   {Description: "March", StartDate: "03/01/2015"},
                   {Description: "April", StartDate: "04/01/2015"},
                   {Description: "May", StartDate: "05/01/2015"}
                ];

                $.each($widget, function(w, widget) {
                    // might be an $.ajax call
                    $.each(data, function(i, row) {
                        $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>");
                    });
                });
            }
        });
    </script>
</div>
<!-- End of widget / partial view -->

Я согласен с Вахидом, что вы не должны помещать JavaScript в представления вообще частично или иначе. Я видел достаточно кода, который делает это, чтобы знать, что это не приводит ни к чему хорошему.

Я бы также сказал, что вы должны быть в состоянии передать логику, инкапсулированную в синтаксисе Razor в JavaScript, вам просто нужно передать Вашему JavaScript информацию, необходимую вашей логике.

Я просто догадываюсь по опыту с этим следующим комментарием, но вы должны разработать JavaScript так же, как вы бы спроектировать структуру вашего C# или VB.NET код. Таким образом, логика, для которой вы используете Razor, должна быть частью вашего JavaScript.

таким образом, ваш JavaScript будет легче поддерживать, и я предполагаю, что Resharper также должен быть счастливее.

Я делаю это и нахожу это очень удобным. Он хорошо работает для динамической загрузки частичных фрагментов javascript с наличием ViewBag, HttpContext и т. д.

это приводит к чему-то, что похоже на использование шаблонов T4.

вы даже можете получить проверку javascript, intellisense и т. д., Если вы добавите такие теги phantom script.

@using System.Configuration
@if (false)
{
    @:<script type="text/javascript">
}    
        $scope.clickCartItem = function(cartItem) {
            console.log(cartItem);
            window.location.href [email protected]("('" + ConfigurationManager.AppSettings["baseUrl"] + "/Checkout/' + cartItem.ItemId)");
        };
        dataAccess.getCart(
        function (response) {
            //...
        },
        function (response) {
            //...
        }
        );

@if (false)
{
    @:</script>
}