Обновить диаграмму ASP в интерфейсе пользователя Shield без перезагрузки страницы?

Я использую диаграмму Shield UI ASP.NET на веб-странице (aspx). Мне нужно обновить диаграмму и отобразить данные в соответствии с выбранным элементом в раскрывающемся списке. Но происходит следующее: при нажатии кнопки страница перезагружается, и мне нужно, чтобы другие диаграммы оставались с выбранной серией. Вот мой код:

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (DropDownList1.SelectedIndex == 0) {
            ShieldChart3.DataSource = new List<int>() { 12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67 };
        }
        if (DropDownList1.SelectedIndex == 1)
        {
            ShieldChart3.DataSource = new List<int>() { 3, 9, 12, 14, 22, 32, 45, 12, 67, 45, 55, 7 };
        }
        if (DropDownList1.SelectedIndex == 2)
        {
            ShieldChart3.DataSource = new List<int>() { 23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57 };
        }
        if (DropDownList1.SelectedIndex == 3)
        {
            ShieldChart3.DataSource = new List<int>() { 13, 19, 112, 114, 212, 332, 435, 132, 67, 45, 55, 7 };
        }
    }

Как я могу обновить только одну из диаграмм, перезагружая страницу?


asp.net shieldui
person Faris Abdi    schedule 05.08.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужна кнопка, но ее код будет обрабатываться не из модуля кода C #, а внутри скрипта. Для этого вам нужно объявить функцию JS. Смотрите код:

    function PS(qtr){
        var SD = SalesData[qtr].values;
        detailChartElement = $('#' + "<%=ShieldChart3.ClientID%>"),
        detailChart = detailChartElement.swidget(),
        initialOptions = detailChart.initialOptions,
        headerText = ' Your sales data... ';
        detailChart.destroy();
        detailChartElement.shieldChart($.extend(initialOptions, {
            primaryHeader: {
                text: headerText

            },
            dataSeries: [{
                seriesType: 'line',
                collectionAlias: 'Sales data...',
                data: SD
            }]
        }));
    }

чем в событии нажатия кнопки вы должны поместить clal в функцию. Или, проще говоря, вы можете использовать select, чтобы передать значение функции:

<select id="Quarter" onChange="PS(this.value)">
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
    <option value="2">Option 3</option>
    <option value="3">Option 4</option>
</select>
person Ed Jankowski    schedule 05.08.2013

arrow_upward
0
arrow_downward

Вы можете разместить элемент управления диаграммой внутри UpdatePanel control и сделайте эту кнопку триггером UpdatePanel. Таким образом, когда вы нажимаете на нее, страница будет выполнять только частичную обратную передачу, и только диаграмма внутри UpdatePanel будет обновляться при нажатии кнопки.

person Yuriy Galanter    schedule 05.08.2013