9

Вопрос по asp.net-mvc-3, javascript, c# – Лучше ли использовать встроенный JavaScript или отдельный файл .js в представлении MVC3?

Мне сказали, что лучше всего разместить код Javascript в отдельном файле, чтобы разделить проблемы, и хотя идея резонирует со мной, я не считаю ее практичной.

Это может быть просто моя неопытность, отсюда и этот вопрос.

Вот четкий пример, в котором я обнаружил, что поместить код в представление было лучше, чем поместить его в отдельный файл javascript.

В моем представлении мне нужно было вызвать диалоговое окно JQueryUI и динамически установить заголовок с именем моей модели.

$("#thumbs img").click(function () {
    var url = $(this).attr("src");
    $(".image-popup").attr("src", url);

    return $("#image-popup").dialog({
        modal: true,
        closeOnEscape: true,
        minHeight: 384,
        minWidth: 596,
        resizable: false,
        show: {
            effect: 'slide',
            duration: 500,
            direction: 'up'
        },
        hide: {
            effect: 'slide',
            duration: 250,
            direction: 'up'
        },
        title: '@Model.Product.Name'
    });
});

Обратите внимание:

title: '@Model.Product.Name'

Как видите, у меня естьaccess к строго типизированной модели, если я использую Javascript в своем представлении. Это не тот случай, если я использую отдельный файл Javascript.

Я делаю это неправильно, я что-то не вижу?

Если бы я использовал отдельный файл, как бы это выглядело, если бы я не мог получить доступ к свойствам модели из файла Javascript?

  • Error: User Rate Limit Exceeded

    от
  • внешние js-файлы не только хороши для «разделения проблем», мы получаем другие основные преимущества, такие как кеширование в браузере, минимизация и т. д., поэтому прямой ответ - поместить их во внешние файлы.

    от VJAI
  • 0

    Если вы не можете использовать вышеупомянутые атрибуты данных HTML5

    то, возможно,http://nuget.org/packages/RazorJS сделает свое дело, кажется, это может решить вашу проблему.

  • 12

    Отдельный файл js:

    <div id="thumbs">
        <img data-dialog-title="@Model.Product.Name" src="[whatever url]" />
    </div?
    
    $("#thumbs img").click(function () {
        var title = $(this).data('dialog-title');
        var url = $(this).attr("src");
        $(".image-popup").attr("src", url);
    
        return $("#image-popup").dialog({
            modal: true,
            closeOnEscape: true,
            minHeight: 384,
            minWidth: 596,
            resizable: false,
            show: {
                effect: 'slide',
                duration: 500,
                direction: 'up'
            },
            hide: {
                effect: 'slide',
                duration: 250,
                direction: 'up'
            },
            title: title
        });
    });
    

    Ненавязчивый доступ к свойствам модели через dom с использованием атрибутов data- * HTML5. Приведенный выше JavaScript будет отлично работать как внешний файл.