• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 229
  • Last Modified:

Passing links without url navigation, ASP.NET

I'm wanting to implement something 'similar' to the 'Lightbox' feature that is floating around everywhere, but for a much different purpose. I really want to avoid using the Lightbox script for a number of reasons.

The main thing is that I want to be able to pass data to a control without having to pre-render all of the controls. An example given is to list a series of image thumbnails, and each one would trigger an existing control on the page, but the content of the control would change based on the image clicked.

Any suggestions on how this could be approached? if POSSIBLE I'd like to avoid as much JavaScript as I can ..since it is absolutely drives me crazy and I am about to rip my hair out from it. The control will exist on the same page as the data I am trying to access.

Essentially I need to take a link and render a pop-up modal dialog with it - but I need dozens of links on the page, and the dialog will change depending on the image clicked , and there will be other page elements in the dialog that relate to it.
0
veruthandai
Asked:
veruthandai
  • 10
  • 7
1 Solution
 
aibusinesssolutionsCommented:
Have you looked at the Ajax control toolkit?

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

It sounds like you want something like the modalpopup.

Even if you just use an Ajax UpdatePanel you could have it post back without reloading the entire page.
0
 
veruthandaiAuthor Commented:
Yes, that handles the modal popup part - but what I cannot seem to figure out is how to actually pass data from the link into the popup. It's not a separate page. I'm not trying to figure out how to make the popup, but to get the data to it appropriately.
0
 
aibusinesssolutionsCommented:
Here is an example of passing data to the modal popup.

http://www.codeproject.com/KB/ajax/Dynamic_AJAX_Modal_Popup.aspx
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
veruthandaiAuthor Commented:
Hrnm. Web Services?

I'm not certain I can do web services on my hosting plan. Do they require anything special? Do most shared web hosting providers allow for that?
0
 
aibusinesssolutionsCommented:
Yes, if they allow asp.net, then they allow web services.

You could create a basic "Hello World" web service just to be sure.
0
 
veruthandaiAuthor Commented:
Hrnm... That's all coming from a DropDown list, though. Is there any way to get the information from simple hyperlinks?
0
 
veruthandaiAuthor Commented:
Also, is the ONLY way to format any of the output using a string builder?

I'm not sure - this seems to take a lot of steps to simply pass an ID from a mouse click to a user control on the same page.
0
 
aibusinesssolutionsCommented:
Yes, just set the value on click, but you will need just a little bit of javascript.  Using that example you could do something like this:

<script type="text/javascript">
function showModal(key) {
mpeCourt.DynamicContextKey = key;
mpeCourt.Show();
}
</script>

Then in your hyperlink, you could do this: <a href="#" onclick="showModal(key)">Click Here</a>

If you are doing it from the code behind, with hyperlinks, you could do something like this:

Link1.OnClientClick = String.Format("showModal({0})", keyVariable)

<asp:HyperLink id="link1" runat="server" NavigateUrl="#">Click Here</asp:HyperLink>



0
 
veruthandaiAuthor Commented:
That would probably work. I'm reading through this example and the output formatting still confuses me. Is there no way to define it with anything but literally raw-writing HTML code through strings?
0
 
aibusinesssolutionsCommented:
Basically, here's how it works.

Click a link on your page, that sets the Data ID of the modal popup with javascript.
The modal popup then takes that Data ID and calls the web service.
The web service takes the ID, looks up the data in the database, and returns the data in whatever format you specify.  The stringbuilder is just the simplest way to return an HTML string.
0
 
veruthandaiAuthor Commented:
But how would I go about passing the data to other HTML if I couldn't use a String builder?

Can I intercept the data at any stage and actually fill it into existing HTML? It also seems to me that this wouldn't support Theming, since the HTML is generated on the fly and wouldn't allow for insertion of server-side elements.
0
 
aibusinesssolutionsCommented:
Yeah that would just support plain html.

You might want to just use a asp:panel and hide it.  That way when you click something, you could make the panel show, and populate the controls on the panel with what you need.

I would still use Ajax, but just an UpdatePanel.  That way when you click a picture, the code behind would run the OnClick event for that picture, which would contain the function to populate and display the Panel.  

You could also format the panel however you want, just use CSS to make it look like a modal or whatnot.
0
 
veruthandaiAuthor Commented:
Erhm, now I'm lost again. Let me cite example in the code. look below.

I cannot understand how I can take courtRow.CourtID and put it anywhere in my HTML outside of RAW writing the HTML through a string - which is a far, far, far cry from what I am needing to do.

Where does this data come in? At what point can it be handled?

I'm used to things like

<div><%# contentsomethinghere %> and the like, I'm trying to get to where I can write out my HTML and just fill in the blanks with the returned data.

        _sb.Append("<b>Court Code: </b>").Append(_courtRow.CourtID);
        _sb.Append("<br/>");
        _sb.Append("<b>Judge Name: </b>").Append(_courtRow.Judge);
        _sb.Append("<br/>");
        _sb.Append("<b>Court More Info:</b><br/>");
        _sb.Append(_courtRow.Info);

Open in new window

0
 
aibusinesssolutionsCommented:
Yeah, check out the UpdatePanel http://www.asp.net/Ajax/Documentation/Live/tutorials/IntroductionUpdatePanel.aspx

Instead of using a web service to return your data as plain html, you can just use a plain Panel with asp controls on it, so you can get the returned data and do something with it.
0
 
veruthandaiAuthor Commented:
Also below, the code for the index changing - it sets the DynamicContextKey in the ModalPopupExtender to a value.

Is this the only way to give an ID to it? Could I not set the ID of another control and use that for some kind of query? If I can, where in my project do I build the HTML to structure around it, and how do I fill in said blanks with the data returned from the WebService?

    protected void drpCourt_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (drpCourt.SelectedIndex != 0)
        {
            mpeCourt.DynamicContextKey = drpCourt.SelectedValue;
            mpeCourt.Show();
        }
    }

Open in new window

0
 
veruthandaiAuthor Commented:
I think some of these questions are beyond the scope of what I originally asked. You've answered what I want to do very nicely - I think from here it is a matter of extended depth as to manner I can execute it.

Thank you very much for your help, I'm going to award points for this question and start a new one for more information on the Web Services and Data Return/Control in HTML.
0
 
veruthandaiAuthor Commented:
The new question on the extended topic is at : http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_24144027.html if you're interested.

The JavaScript example will work very well for getting what I need. As the images are queried from the database and the Thumbnails drawn, I can pass the primary key through the JavaScript function in the Onclick event to give me the data I need.

From here I need to figure out how to design the rest of the component, which is what this new topic is going to try and garner for.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 10
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now