Отображать диаграмму во всплывающем окне или модально по щелчку мыши (jquery?) Без предварительной загрузки диаграммы?(Mvc3 / бритвы) - PullRequest
Новая
       7

Отображать диаграмму во всплывающем окне или модально по щелчку мыши (jquery?) Без предварительной загрузки диаграммы?(Mvc3 / бритвы)

1 голос
/ 22 сентября 2011

Я использую метод FileStreamResult (или FileResult) для отображения диаграммы на странице просмотра бритвы (из действия Controller), и это работает, как и ожидалось.

Однако мне интересно, возможно ли отобразить диаграмму ТОЛЬКО при нажатии на элемент html.

например. Нажмите на элемент, чтобы отобразить диаграмму во всплывающем окне.

Я могу заставить модал отображаться с помощью Jquery ... но ТОЛЬКО если я уже загрузил диаграмму в div.

Я бы хотел, чтобы страница загружалась без графика (из соображений производительности), а затем генерировал / загружал диаграмму только при нажатии.

Полагаю, мне нужен какой-то Ajax-вызов ... но я немного застрял в том, как поступить, и поиск в Google не дал ничего полезного (просто лайтбокс для фотографий)

Псевдокод:

HTML: 

<img src='small chart icon.jpg' alt='click me to see chart' id='showchart'/>
<div>
    rest of page goes here...
</div>

C #: 

public FileStreamResult GetChart(){
    //generate any chart
    return FileStreamResult(newchartstream, "image/png");
}

JS: 

<script>
$(document).ready(function(){
    $('#showchart').click(function(){
        //make ajax call to generate chart
        //show in modal with "close" button
        //OR
        //open a new page as a modal?
    });
});
</script>

EDIT

Пояснение:

Контроллер генерирует ViewModel (из модели EF4), который содержит результаты большого количества вычислений и некоторые строки «итогов» (итоги, средние значения и т. Д.)

Просмотр отображает результаты (ViewModel) в виде таблиц.

Требования:

Нажмите на одну из строк сводки, откроется модальное окно с графиком для этой строки сводки.

Хотел бы избежать отправки идентификаторов параметров для ViewModel и повторной генерации его с нуля (повторные вычисления и т. Д.) По двум причинам

1) Возможно, цифры в фоновой базе данных изменились ... поэтому диаграмма не отражает того, что показано в таблицах.

2) Чтобы выполнить расчеты, требуется время!

Я также хотел бы генерировать диаграмму ТОЛЬКО в случае щелчка по строке, в отличие от постоянной загрузки диаграммы и скрытия () show () с помощью jquery.

Я думал о вызове ajax, но не уверен, как вернуть изображение или как открыть новую страницу.

Не удается найти способ передачи сложной модели в методе Url.Action ().

Считаете ли вы, что кэширование может быть лучшим вариантом, и пусть метод click вызывает «старомодный» javascript для нового окна, передавая параметры для получения объекта из кэша?

Ответы [ 2 ]

0 голосов
/ 27 сентября 2011

У вас есть много способов сделать это, но вот что я бы сделал.

1 / Создайте действие, которое возвращает тег с хорошим src (при условии, что имя вашего контроллера - ChartsController). 

    public ActionResult GetImage(int chartId = 0)
    {
        var image = @"<img id='chart' src='" + Url.Action("GetChart", new {controller = "Charts", chartId = chartId}) + @"'/>";
        return this.Content(image);
    }

2 / Я предполагаю, что, по вашему мнению, у вас есть где-то элемент div, который содержит содержимое вашего модала (как сделал бы jQuery-ui) с img внутри для диаграммы. 

<div id="modal-div">
    <div id="chart-div"></div>
</div>

3 / Для каждой строки необходимо создать ссылку Ajax, которая будет вызывать ваше действие «GetImage» и заменять «chart-div» на вашу.Вы можете указать функцию Javascript «OnBegin», именно здесь вы поместите свой код для запуска модала. 

@Ajax.ActionLink("Show me the chart!", "GetImage", "User", new { chartId = @Model.Rows[i]}, new AjaxOptions()
                                                                                        {
                                                                                            HttpMethod="GET",
                                                                                            OnBegin = "showModalWindow",
                                                                                            UpdateTargetId="modal-div",
                                                                                            InsertionMode = InsertionMode.Replace
                                                                                        });

Каждый раз, когда вы нажимаете на ссылку Ajax, модал будет запущен, и внутренняя часть будетбыть заменено (фактически, все содержимое модального будет заменено).Не забудьте включить «Scripts / jquery.unobtrusive-ajax.js» и «Scripts / jquery.validate.unobtrusive.js» для работы ссылок Ajax.

0 голосов
/ 25 сентября 2011

У вас есть вопрос о разнице, смешанный в одном. Вы должны разделить их каждый в одном вопросе. Для заголовка вашего вопроса, загружая изображение с помощью AJAX, вы можете использовать фрагмент кода ниже:

HTML: 

<div id="chartholder"></div>
<a id="showchart">Show the chart</a> <!-- or any element else you want to fire show event -->

JS: 

$(document).ready(function(){
    $("#showchart").click(function(){
        // Put your controller and action (and id if presented) below:
        var file = "/YourControllerToGetChart/GetChart/id"
        $("<img />").attr("src", file).load(function () {
            $(this) // the loaded image
                .css({"some-css-you-want":"some-value"})
                .appendTo($("#chartholder")); // fixed syntax
        });
    });
});

Дайте мне знать, если у вас есть какие-либо вопросы или вам нужны разъяснения по какой-либо части, или вы хотите знать, как использовать div id="chartholder", чтобы отобразить его как модальное. Приветствия.

...