Создание файла JavaScript на лету в asp.net MVC - PullRequest
Новая
       7

Создание файла JavaScript на лету в asp.net MVC

14 голосов
/ 15 ноября 2011

Друзья

Я пытаюсь использовать DyGraph в своем приложении. Пожалуйста, посмотрите на код ниже - 

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>crosshairs</title>

    <script type="text/javascript" src="dygraph-combined.js"></script>

    <script type="text/javascript" src="data.js"></script>
  </head>

Код использует файл data.js, содержащий функцию для получения статических данных. Я хочу, чтобы data.js генерировался с использованием метода контроллера, чтобы он генерировал данные с использованием базы данных.

Может кто-нибудь помочь мне решить эту проблему.

Спасибо, что поделились своим драгоценным временем.

Ответы [ 2 ]

34 голосов
/ 15 ноября 2011

Вы можете определить действие контроллера: 

public ActionResult Data()
{
    // Obviously this will be dynamically generated
    var data = "alert('Hello World');";
    return JavaScript(data);
}

и затем: 

<script type="text/javascript" src="<%= Url.Action("Data", "SomeController") %>"></script>

Если у вас есть какой-то сложный скрипт, который вы не хотите генерировать в контроллере, вы можете следовать стандартному шаблону MVC, задав модель представления: 

public class MyViewModel
{
    ... put required properties
}

действие контроллера, которое заполнило бы эту модель представления и передало бы ее представлению: 

public ActionResult Data()
{
    MyViewModel model = ...
    Response.ContentType = "application/javascript";
    return PartialView(model);
}

и, наконец, представление, которое в этом случае будет представлением javascript модели представления (~/Views/SomeController/Data.ascx): 

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<MyViewModel>" %>
alert(<%= new JavaScriptSerializer().Serialize(Model.Name) %>);
1 голос
/ 08 июля 2017

Полное раскрытие

  • Этот ответ скопирован с другого вопроса:
  • Этот ответ похож на другие ответы здесь.
    • В этом ответе используются cshtml страниц, а не ascx элементов управления.
    • Этот ответ предлагает решение только для просмотра, а не решение только для контроллера.
    • Я не думаю, что мой ответ «лучше», но я думаю, что для некоторых это может быть проще.

Динамический CSS в файле CSHTML

Я использую комментарии CSS /* */, чтобы закомментировать новый тег <style>, а затем я return; перед закрывающим тегом стиля: 

/*<style type="text/css">/* */

    CSS GOES HERE

@{return;}</style>

Динамический JS в файле CSHTML

Я использую комментарии JavaScript //, чтобы закомментировать новый тег <script>, а затем я return; перед закрывающим тегом сценария: 

//<script type="text/javascript">

    JAVASCRIPT GOES HERE

@{return;}</script>

MyDynamicCss.cshtml 

@{
var fieldList = new List<string>();
fieldList.Add("field1");
fieldList.Add("field2");

}

/*<style type="text/css">/* */

@foreach (var field in fieldList) {<text>

input[name="@field"]
, select[name="@field"]
{
    background-color: #bbb;
    color: #6f6f6f;
}

</text>}

@{return;}</style>

MyDynamicJavsScript.cshtml 

@{
var fieldList = new List<string>();
fieldList.Add("field1");
fieldList.Add("field2");
fieldArray = string.Join(",", fieldList);

}

//<script type="text/javascript">

$(document).ready(function () {
    var fieldList = "@Html.Raw(fieldArray)";
    var fieldArray = fieldList.split(',');
    var arrayLength = fieldArray.length;
    var selector = '';
    for (var i = 0; i < arrayLength; i++) {
        var field = fieldArray[i];
        selector += (selector == '' ? '' : ',')
                    + 'input[name="' + field + '"]'
                  + ',select[name="' + field + '"]';            
    }
    $(selector).attr('disabled', 'disabled');
    $(selector).addClass('disabled');
});
@{return;}</script>

Контроллер не требуется (с использованием Views / Shared)

Я поместил оба моих динамических скрипта в Views/Shared/, и я могу легко встроить их в любую существующую страницу (или в _Layout.cshtml), используя следующий код: 

<style type="text/css">@Html.Partial("MyDynamicCss")</style>
<script type="text/javascript">@Html.Partial("MyDynamicJavaScript")</script>

Использование контроллера (опция)

Если вы предпочитаете, вы можете создать контроллер, например, 

<link rel="stylesheet" type="text/css" href="@Url.Action("MyDynamicCss", "MyDynamicCode")">
<script type="text/javascript" src="@Url.Action("MyDynamicJavaScript", "MyDynamicCode")"></script>

Вот как может выглядеть контроллер

MyDynamicCodeController.cs (необязательно) 

[HttpGet]
public ActionResult MyDynamicCss()
{
    Response.ContentType = "text/css";
    return View();
}

[HttpGet]
public ActionResult MyDynamicJavaScript()
{
    Response.ContentType = "application/javascript";
    return View();
}

Примечания

  • Версия контроллера не тестировалась. Я просто набрал это на макушке.
  • После перечитывания моего ответа мне кажется, что было бы так же легко закомментировать закрывающие теги, чем использовать cshtml @{return;}, но я не пробовал. Я полагаю, это вопрос предпочтений.
  • Что касается всего моего ответа, если вы обнаружите какие-либо синтаксические ошибки или улучшения, пожалуйста, сообщите мне.
...