Classic ASP Page Setup Master/Detail Setup

Hi.  I created an application in classic asp and would like to somehow display the master and detail data on the same page.  Normally I woudl just display the master data and then give a link for the detail page(s) to open in a new window.  But this client would like to see the detail pages from the same master page.  In Access, this is easy to do because we just use continous subforms tied to the key field in the master table.  For example, the table is clients and one client can have many contacts.  If I have the client update page open for Client ABC, is there a way to display all ABC's contacts in a "subform" page below all the client data for client ABC?  I found a couple posts about using iframes but I'm not sure how to incorporate that into my pages.   This project has been developed on godaddy with a sql server backend.
Thanks for your help.
Alexis
alexisbrAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

worthyking1CTOCommented:
Simple, just do a second SELECT query to pull a recordset for all the client's contacts then loop through those and display them below the master client data. If you want to get sexy about it, or if there are a large number per client, then you could put each contact into a separate div set to hidden (via CSS) and display the contact's full info only onClick of the contact's name.

Not sure if your question is asking about being able to update each contact also from the same page. If so, then either:

1. Create a separate form while looping through the contacts and give each a unique name (eg. <form action="" method="post" name="ContactForm<%=LoopCount%>">) I normally use a hidden field in each form with the unique ID of that contact in the contacts table so that you can identify which contact is being updated. In this case you would have a separate "Update" button for each contact.

2. Have all contacts in a single form and name each input field using their database unique ID eg. <input name="FirstName<%=ContactID%>" type="text" value="<%=FirstName%>" />. Then, if the form is submitted you can iterate through the request object and update the contacts by parsing the contact's database ID from the request value names.

Hope that helps.
alexisbrAuthor Commented:
Thanks for your reply.  From your answer, I see that my issue is not how to update the data but how to display them and on the same page.  I have it set up now via links that open up the "subforms" in new browser windows but I'd like to show all the different "subforms" on the same page, not in a different window.  I also have used hidden id's like you described above and, like I said, it all works fine from links on first page.  I hope I am making sense.  I am good with the databse and form logic but I'm not too strong with display issues like div and css. I do most of my work in Access and Access has a great setup for forms and subforms and I'm just trying to get something close on the web.  If I have to leave the links as I now have them, it could work but I'm wondering if there's a way to use iframes or something else to get all the detail data (subforms) on the same page as the master data.

Thanks,
Alexis
G_HCommented:
You need to think about what worthyking1 said about updating. If you need to or not may affect where you go from here.

Either way, a great way to do this (mostly using code you already have) would be to use AJAX.

There is a simple example at: http://www.w3schools.com/ajax/ajax_aspphp.asp

Your "sub-form-page" which you are currently popping out, would effectively be returned as the HTML to enter into a DIV. This content could also later be deleted or updated.

If you are new to AJAX, look at using something like JQuery, which offers a very powerful, set of AJAX functions. Using JQuery also stops you having to worry about cross-platform issues, as they are dealt with by JQuery. (Yes JQuery looks very frightening to begin with, but there are plenty of examples out there). See http://api.jquery.com/jQuery.ajax/.

GH
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

worthyking1CTOCommented:
It's a bit difficult to understand exactly what your issue is without seeing the page and code, but is sounds like all you need to do is move the code from your sub-pages onto the main page. Unless you're trying to update data on the page dynamically without reloading it. Then you could use iframes but a much better way would be to use AJAX. Then you can still do all the processing on your subpages but simply display the output back to the master page instead of in a separate window or page.

Here's a sample of how you might do it:

Form button (let's say attached to a contact name) --
<input name="Submit" type="button"  value="View Contact Details" onClick="CallAjax('DetailDiv','ShowContactDetails.asp?ContactID=<%=ContactID%>')">

Include this file (attached) in the HEAD section of your page (it does all the ajax work) --
<script src="/includes/cba.js"></script>

Make sure you have a Div with the ID of whereever you want the output displayed to, in this example "DetailDiv".

On your processing page (subpage) do your database work, grab your recordset(s) etc. then output the html to a string called TheContent (in this case) and output it like this (at the very bottom of the page) --

<%
cbaID = CInt(request("_cba_request_id"))   ' will be passed automatically by cba.js
%>
_cba.ready (
   <%=cbaID%>,
   '<%= TheContent %>'
);

Hope that helps and that I'm not totally misunderstanding your needs :)
worthyking1CTOCommented:
Here's the file, sorry forgot to attach it to last post. cba.js
alexisbrAuthor Commented:
Thanks to both of you.  I think you both understand what i am trying to do.  I have never used AJAX or JQUERY and don't know anything about them or if they are even usable on a webhost like Godaddy.  I will review all the details in both your posts and see where I can go from there, and get back to you.

Thanks again.
Alexis
rlovetxCommented:
Alexisbr,

Another option would be to pass the data via querystring from the master to the details section of your page.

For example, when you first hit the page, you have no querystring value set for the details.  So, the details section uses code something like this...

If querystringvalue <> "" Then...
--display details
Else
--don't display details section

But, if a user clicks on a contact in the parent area, you refresh the page and pass the contact id via the querystring (ex. contactid = 52).

When the page reloads, your details section now has a value (52) that it can display the detail data of.

This solution means more hits on your server (more round-trips).  But, I'm guessing this isn't a high-volume app since you're using Access?

Good luck!

Rick
alexisbrAuthor Commented:
Hi rlovetx,
I am not using Access - the backend db is SQL Server.  I would never use Access on the web.  I was using Access as an example of how I would like to see "subforms" like Access does so easily.  But I don't think this system will have high volume.  I know the web is different but I am trying to find a way to show detail data on the same page as the master data.  For example, if I have clients (master data) and they have contacts (detail data), I want to be able to select a client and show that client's data at the top of the page and then all the contacts for that client below.  I would want to allow the users to be able to change master or detail data on the same web page.  Worthyking and G H have suggested using Ajax so I am going to review that.  I have to be somewhere today but I plan to check this out tonight and tomorrow and try to apply it to my logic.  For now, I have just put a link at the top of the "master" page for the detail page to have the detail data open in a new window. So, once a user has selected a client, they can click on the link for Contacts and that client's contacts will be displayed in a new window (target=_blank).

I have attached a screenshot.  On the left you can see the Client Entry screen.  The first red arrow shows the links at the top of the page that are the detail pages that are all related data to the client.  On the right you can see how I pressed Contacts at the top and a new window came up with the contacts for that user.  By the way, this data is all fake - not real people.  This system is still in development so I have entered dummy data.

Thanks,
Alexis     Main page with new window for detail data
rlovetxCommented:
Alexis,

You have all the code ready...you just need to shift it around a bit.

When you open the new window, you're probably passing the id number of the client to the new window from the master.

If you copy your details code into the master page, then you can display the same details data based on the querystring.  Just remember to add an if statement to hide the details display on the initial page load before the user selects a client.

You'd then just need to change the links on the master page to point to the same page, but to pass the id of the client so you can display its details below.

You can do Ajax and it's much cooler, etc.  But, you should be able to do this in just a few minutes since you have all the other code ready.

Rick
alexisbrAuthor Commented:
Thanks, Rick.  Yes, i am passing the ID to the new window.  It all works fine.  I am a strong database programmer and am good with ASP.  However, i am not so strong with HTML and how to set up the page using DIV and maybe the css.  I can't think of how to set up the page to be able to show the detail code I already have working in the new Window setup.  That's where I am stuck - how to display the master and detail data all on the same page.  If I can get it to work without Ajax, that would be great but I have been unable to find examples of how to do it.

Thanks,
Alexis
rlovetxCommented:
Alexis,

Basically, put your details code underneath your master code in your HTML.

Then, at the start of your details code, put an anchor tag... <a name="details" />

Now, in your link into the page, you can add a #details to the end so that when the user clicks on your link, the inpage link will take them to the top of your details section.

As for html...it doesn't really matter.  Suppose you have a table for the details.  

You're hiding the display when the user is looking at the master page using your code:

If length(id) > 0 Then
--show table with your ASP code here
Else
--do nothing (don't show table)

You can wrap your data with divs and use a show/hide (visibility = hidden to hide).

You can wrap your details with a div and set the height to a fixed height and allow scrolling.  This makes for a cleaner display on the page, since you will know how tall/wide the details area is.

Is that what you're looking for?
alexisbrAuthor Commented:
Rick,
Yes, this is what I'm looking for but I'm still a bit unclear on how to get it to display on the page.  I will be home tonight and tomorrow trying to work on this and will let you know if I am able to get the data to display correctly.  Thanks for all the help.

Alexis
rlovetxCommented:
Alexis,

Try just copy/pasting the code from your details page underneath the code for your master info (on the master page).  Then just add the if statement to make its display conditional.

To make it nice...try surrounding your details with this div (adjust size to suit):

if length(id) > 0 then

<div style="height: 500px; width: 400px; overflow: scroll">

your details data display...

</div>

end if

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
alexisbrAuthor Commented:
Thanks, Rick.  I think I see now what you mean.  I will try it tonight and let you know.

Thanks again,
Alexis
alexisbrAuthor Commented:
Thanks, Rick.  Your suggestion about using div works fine.  I didn't realize it could be done that way so thank you for taking the time to explain it clearly.  Now at least I have an option to give the client to choose this way or using new windows for the detail forms.  Thanks also to the other experts for their help.

Regards,
Alexis  
rlovetxCommented:
Alexis,

There are lots of cool css tricks like that...sometimes it's easier to do things in css than in code!
Regards,
Rick
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.