ASP.NET Chart Click, Pass Data and in New Tab

Question

I am trying to get an asp.net chart and it's legend to allow me to open up another page in another tab passing the values of the piece of the chart I clicked on with it. I have been able to get it to open up another tab when clicking on the chart by doing the following but it does not pass the data.

Chart2.Series[0].LegendUrl = "chartdetails.aspx";
Chart2.Series[0].Url = "chartdetails.aspx";
Chart2.Series[0].LegendMapAreaAttributes="target=\"_blank\"";
Chart2.Series[0].LegendPostBackValue = "#VALY-#VALX";
Chart2.Series[0].MapAreaAttributes="target=\"_blank\"";
Chart2.Series[0].PostBackValue = "#VALY-#VALX";

If I leave out the urls and mapareaattributes I can then get it to go to the onclick where I am able to get the data, put it in a session variable and use Reponse.Redirect to open the new page where it sees the session variable data,however it doesn't open in another tab, it opens in the same tab.

Chart2.Series[0].LegendPostBackValue = "#VALY-#VALX";
Chart2.Series[0].PostBackValue = "#VALY-#VALX";

protected void Chart2_Click(object sender, ImageMapEventArgs e)
{
    HttpContext.Current.Session["VAL"] = e.PostBackValue;
    Response.Redirect("chartdetails.aspx", false);
}

How can I get it to do both? Does Response.Redirect have a way to open a new tab? Some research leads me to believe it does not. Is there a way to get both the server side onclick event to run, so I can set the session variable and the chart.series.url to fire after the server side click runs so the session variable would be set before I open the new tab?

I'm feeling like this may be a case of "I can't have my cake and eat it too."

score 1 · Accepted Answer · answered Dec 19 '13 at 19:04

1

As it turns out I can have my cake and eat it too. If I set the url, postbackvalues, and legendmapareaattributes in my Page_Load and set up the click for the chart to put the PostBackValue in the session variable when you click on the chart it saves the value in the session variable that is listed in the PostBackValue of the Series of the chart. It then opens in a new tab chartdetails.aspx where I can access the information from the session variable.

Chart2.Series[0].LegendUrl = "chartdetails.aspx";
Chart2.Series[0].LabelUrl = "chartdetails.aspx";
Chart2.Series[0].Url = "chartdetails.aspx";

Chart2.Series[0].LegendPostBackValue = "#VALY-#VALX";
Chart2.Series[0].LabelPostBackValue = "#VALY-#VALX";
Chart2.Series[0].PostBackValue = "#VALY-#VALX";

Chart2.Series[0].LegendMapAreaAttributes = "target=\"_blank\"";
Chart2.Series[0].LabelMapAreaAttributes = "target=\"_blank\"";
Chart2.Series[0].MapAreaAttributes="target=\"_blank\"";

protected void Chart2_Click(object sender, ImageMapEventArgs e)
{
    HttpContext.Current.Session["VAL"] = e.PostBackValue;                  
}

answered Dec 19 '13 at 19:04

John Wesley Gordon

910
2
17
39

You can also set the Url and MapAreaAttributes on the series points themselves. I did this when creating the series and therefore didn't have to use a session variable in the chart click event. – Adam Bruss Nov 28 '17 at 15:29
@AdamBruss. Can you give me some code instruction? I am struggling with how to pass data to another .aspx without chart_click event. Is it possible? – 劉鎮瑲 Sep 20 '19 at 09:10
@劉鎮瑲 I'm not sure exactly what your scenario is. If you want to send data to another aspx page then you could use the query string of the url to the new page. You can put arguments in the page url and query them in the new page. Here is an example: https://www.c-sharpcorner.com/UploadFile/ca2535/query-string-in-Asp-Net/ – Adam Bruss Sep 23 '19 at 14:53
@AdamBruss. Sorry for misleading you. I want exactly what you say "I did this when creating the series and therefore didn't have to use a session variable in the chart click event." I want to click series points and open up my another .aspx page with the value of point without chart_click event than my page won't reload again, and dynamic created object will preserve. Is it possible just use Url and MapAreaAttributes to accomplish my goal? – 劉鎮瑲 Sep 24 '19 at 08:29
1

@劉鎮瑲 Yes it is possible. Loop over the series points after data binding the chart. For each point set it's MapAreaAttributes to "target=\"_blank\"" and the Url to your url. For my case I needed a custom url for each point. So I formed a list before hand of the custom data in order of the points. So when I looped the points I could set the url to a custom page by indexing into the previously setup list. – Adam Bruss Sep 25 '19 at 15:29
1

I'll show you my Url set call on a point for clarity even though it's somewhat specific to my case. cur.Points[i].Url = "~/test/TestsBreakdown.aspx?" + QueryStringKeys.Session() + "=" + lSessions[i].serial where cur is the series. The QueryStringKeys.Session() is just a string constant I use. lSessions is the list I setup before hand that I now index into using the series point indexer. serial is just a name of a property which returns an integer which makes each point page unique. – Adam Bruss Sep 25 '19 at 15:34
@AdamBruss. Thank for your suggestion. It help me a lot. – 劉鎮瑲 Oct 25 '19 at 07:28

score 0 · Answer 2 · answered Oct 25 '19 at 07:27

I can't use postback to get the value on the series for some reason. So, I want to share my way inspired by @Adam that is loop over the series points after data binding the chart and set URL.

GET:

Series s=new Series("Test");
/*
*  After Data bind to the series s 
*/
for (int p = 0; p < s.Points.Count; p++)
{
  s.Points[p].Url ="test.aspx?name1=value1&name2=value2";
  s.Points[p].MapAreaAttributes = "target=\"_blank\"";
}

POST:

(I put javascript function in url. So, It will execute the javascript for me to send a form I created in the function to the text.aspx.)

Series s=new Series("Test");
/*
*  After Data bind to the series s 
*/
for (int p = 0; p < s.Points.Count; p++)
{
    s.Points[p].Url ="javascript:(function(){" +
                                "var mapForm = document.createElement('form');mapForm.target = '_blank';" +
                                "mapForm.method = 'POST';mapForm.action = 'test.aspx';" +
                                "var mapInput = document.createElement('input');mapInput.type = 'hidden';" +
                                "mapInput.name = 'partID';mapInput.value = 'put any value you need';" +
                                "mapForm.appendChild(mapInput);document.body.appendChild(mapForm);" +
                                "mapForm.submit();document.body.removeChild(mapForm);})();";
}

Reference:

Javascript pass values using POST

ASP.NET Chart Click, Pass Data and in New Tab

2 Answers2