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

9

Мне сказали, что лучше всего разместить код 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?

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

Ваш Ответ

2   ответа
0

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

12

<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 будет отлично работать как внешний файл.

Error: User Rate Limit Exceeded

Похожие вопросы