Arhn - архитектура программирования

Как отобразить диаграмму в представлении с помощью помощников mvc?

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

   public ActionResult CharterColumn(string Status)

                {
                    var results = (from c in db.Clockcards select c);




                var groupedByMonth = results
                    .Where(a => a.Name == Status)
                    .OrderByDescending(x => x.Date)
                    .GroupBy(x => new {x.Date.Year, x.Date.Month}).ToList();



                List<string> monthNames = groupedByMonth

                    .Select(a => a.FirstOrDefault().Date.ToString("MMMM"))
                    .ToList();

                List<double> hoursPerMonth = groupedByMonth
                    .Select(a => a.Sum(p => p.Hours))
                    .ToList();


                ArrayList xValue = new ArrayList(monthNames);
                ArrayList yValue = new ArrayList(hoursPerMonth);

                new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: xValue, yValues: yValue)
                    .Write("bmp");

                return null;
            }



            public ActionResult Index()
            {

                ViewBag.Status = (from r in db.Clockcards
                    select r.Name).Distinct();


                return View();
            }

Мой вид

    <p>
        @using (Html.BeginForm("CharterColumn", "Chart", FormMethod.Get))
        {
            <b>Search by Full Name:</b><font color="black">@Html.DropDownList("Status", new SelectList(ViewBag.Status), new { onchange = "this.form.submit()" })</font>


        }
    </p>

  • Только один вопрос, какие символы вы используете? 29.09.2017
  • Я использую помощники по диаграммам 29.09.2017
  • Хорошо, извините, я не понял, что я думал, что вы делаете себе помощника. Вам просто нужно выполнить функцию записи в вашем представлении, а не в контроллере. 29.09.2017
  • только часть .write(bmp)? 29.09.2017
  • Вы можете, но я бы не рекомендовал это. Я бы предложил передать данные xValue и yValue в модель и выполнить полное определение диаграммы в пользовательском интерфейсе. Это лучше всего подходит для разделения слоев, поэтому, если в какой-то момент вы захотите изменить используемые диаграммы, вам не нужно будет менять контроллер и представление. 29.09.2017
  • Пробовал не особо получается. просто переместите .write... :( Я попробую то, о чем вы говорили дальше 29.09.2017

Ответы:


1

Извините за комментарии, я немного не понял, в чем именно проблема. Но я думаю, это то, что вы хотите. Для контроллера

public ActionResult Index() 
        {
            ViewBag.Status = new[] { "A", "B" };

            return View();
        }
//This controller returns an jpeg image you can use bmp but I think this will be better.
        public ActionResult Chart(string status) 
        {
            WebImage image;
            switch (status)
            {
                case "A":
                    image = new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: new[] { "A" }, yValues: new[] { 10 })
                    .ToWebImage("jpeg");
                    break;
                default:
                    image = new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: new[] { "B" }, yValues: new[] { 20 })
                    .ToWebImage("jpeg");
                    break;
            }

            return File(image.GetBytes(), "image/jpeg");

        }

И вид

<b>Search by Full Name:</b>
<font color="black">
    @Html.DropDownList("Status", new SelectList(ViewBag.Status), new { id="dropdown", onchange = "updateChart()" })
</font>
<img id="chart" src="[email protected][0]" />
<script>
    function updateChart()
    {
        var list = document.getElementById('dropdown');
        var value = list.options[list.selectedIndex].value;
        document.getElementById('chart').setAttribute('src', 'Chart?status=' + value);
    }
</script>

Вам необходимо указать источник тега img в html. Если вы хотите только обновить изображение без обращения к серверу, вам нужно будет использовать некоторый javascript. но это действительно просто: он просто получает значение из раскрывающегося списка и отправляет его на сервер. src — это просто путь к контроллеру, который вы можете использовать для отправки. Просто помните, что вы не можете использовать вспомогательные функции тегов в javascript, поскольку они отображаются на сервере.

29.09.2017
  • Просто помните, что у вас, вероятно, не будет проблем с производительностью в вашем случае использования, но диаграммы System.Web.Helpers не очень хорошо масштабируются, поэтому в большинстве ситуаций рекомендуется делать все на стороне клиента с помощью некоторой библиотеки диаграмм javascript. Вы можете взглянуть на syncfusion (у него есть лицензия сообщества, поэтому я рекомендую его вам ) или какую-либо другую клиентскую библиотеку пользовательского интерфейса. 29.09.2017
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..