Another way of doing search

I have an application that has a search page: search.aspx.  User can search by 2 criterias. A search-result page..searchresult.aspx... is displayed. All is working fine so far.

Now, I have another page...xyz.aspx page... with a grid that needs the same search. I can have a linkbutton in the grid and have a popup...has search.aspx in that pop-up and then have another pop-up to show searchresult.aspx BUT i dont want to use popups....

I'm thinking about this but not sure if it's a good approach: in xyz.aspx have a link to go to search.aspx page. User searches and searchresult.aspx page is displayed. User selects a row with rowId=10 in searchresult.aspx (for example). I need this value in xyz.aspx page... so how do I get back to xzy.aspx page and pass rowdId=10 value? Any other way of doing this besides a popup? thanks.
LVL 8
CamilliaAsked:
Who is Participating?
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.

Tom BeckCommented:
You could use a QueryString.

xyz.aspx?id=10
CamilliaAuthor Commented:
so this method i have in mind is not a bad idea? not using a popup is ok?
Tom BeckCommented:
Avoiding popups is always a good idea. The other option is to use a modal popup which is really just a div that you toggle on and off. You could just have the search and result code appear in the modal popup and do an ajax update of the modal so you never have to leave the xyz.aspx page in the first place.
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

CamilliaAuthor Commented:
I tired the modal popup : created a user control for the search page. I couldnt display the user control in modal popup. Spent a lot of time on it.

I know it's doable with Telerik's popup..with that...i don't need to use a user control..i can actually use an aspx page in the popup.... but i dont know how to pass the row selected back to the zyx.aspx page (parent page)
Tom BeckCommented:
Here's a very basic example that uses jquery for the ajax call to load the search and results pages into the modal pop up. It uses query strings in the url to get the row id back to the parent.
<!-- THIS IS THE CONTENT ON YOUR PARENT PAGE, ZYX.ASPX, NOTHING IN CODE BEHIND -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        * {margin:0 auto}
        #wrapper
        {
            width:800px;
            height:600px;
            background-color:#def
        }
        #content
        {
            padding:40px
        }
        .screen
        {
            position:fixed;
            top:0px;
            left:0px;
            display:none;
	        width:100%;
	        height:100%;
            background-color: #333; 
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
            filter: alpha(opacity=50); 
            opacity: 0.5;
            z-index:200;
            display:none
        }
        #result {
            background-color:#fff;
            bottom: 100px;
            height: 328px;
            padding: 10px;
            position: absolute;
            left: 200px;
            width: 500px;
            z-index:300;
            display:none
        }
        .functions {
            background-color: #fff;
            border: 2px solid #F9B41E;
            clear: both;
            margin: 20px 10px;
            padding: 5px 10px 10px;
        }
        .loading {
	        position: absolute;
	        top: 170px; left: 245px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
    <div id="screen" class="screen"></div>
    <div id="content">
        <div id="idHolder" style="font-size:2em;color:Green;border:2px solid Red"></div>
        <br />
        <p><span style="font-weight:bold;font-size:1.5em">Some content on the xyz.aspx page.</span>Quis ipsum ullamcorper dolore vulputate commodo suscipit eum duis  delenit molestie nostrud qui velit molestie zzril at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. Et, augue at tincidunt wisi duis sed  amet feugiat nulla luptatum nisl ut facilisis. Et veniam velit feugait  accumsan magna veniam, nulla vulputate in vero erat duis ea, illum  consequat at, exerci, ullamcorper. Te, dignissim feugiat iusto enim  consequat velit enim enim ea autem nulla eum, accumsan. Tation nisl, eum  in vero blandit et dolore consequat veniam accumsan duis ut eros in  odio delenit. Luptatum hendrerit molestie, et ullamcorper, odio ex, nisl  odio odio iriure minim vel elit exerci dolore, feugait nostrud, dolore  dolor ut. 
            Duis autem esse molestie euismod in commodo enim,  exerci qui quis dolore dignissim velit augue, esse et vel et sit iriure  te esse. Molestie autem ut consequat dignissim, facilisi eros quis, et  facilisis consectetuer laoreet aliquip. Suscipit tation dolor dignissim  ex nisl praesent et lobortis eu nulla laoreet zzril ea hendrerit in. 
            Vel  nisl ut facilisis nulla veniam velit feugait accumsan</p>
            <br />            
            <input type="submit" id="load_basic" value="Bring Up a Search Box" />
            <br /><br />
            <p> magna veniam,  nulla vulputate in vero erat duis ea, illum consequat at, exerci,  ullamcorper duis, dignissim. Iusto iusto enim consequat velit enim enim  ea autem nulla eum, accumsan blandit nisl, eum in. Feugait blandit et  dolore consequat veniam accumsan duis ut eros in odio delenit ea  hendrerit molestie. 
            Ullamcorper iriure ut diam aliquam conQuis ipsum ullamcorper dolore vulputate commodo suscipit eum duis  delenit molestie nostrud qui velit molestie zzril at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. Et, augue at tincidunt wisi duis sed  amet feugiat nulla luptatum nisl ut facilisis. Et veniam velit feugait  accumsan magna veniam, nulla vulputate in vero erat duis ea, illum  consequat at, exerci, ullamcorper. Te, dignissim feugiat iusto enim  consequat velit enim enim ea autem nulla eum, accumsan. Tation nisl, eum  in vero blandit et dolore consequat veniam accumsan duis ut eros in  odio delenit. Luptatum hendrerit molestie, et ullamcorper, odio ex, nisl  odio odio iriure minim vel elit exerci dolore, feugait nostrud, dolore  dolor ut. 
            Duis autem esse molestie euismod in commodo enim,</p>
    </div>
    <div id="result" class="functions"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    </div>
    <script type="text/javascript">
	$.ajaxSetup ({
		cache: false
	});
	var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";

    var loadUrl = "Default.aspx";
    if(window.location.href.indexOf("?x=true") != -1){
        loadUrl = "results.aspx";		
        $("#screen").css("display", "block");
	    $("#result").css("display", "block");
		$("#result").html(ajax_load).load(loadUrl);
    }
    if(window.location.href.indexOf("?id=") != -1){
        var id = window.location.href;
        id = id.substring(id.indexOf("id="));
        $("#screen").css("display", "none");
	    $("#result").css("display", "none");
	    $("#idHolder").html("Search returned: " + id + " to this page.");        
    }else{    
	    $("#load_basic").click(function(){
	        $("#screen").css("display", "block");
	        $("#result").css("display", "block");
		    $("#result").html(ajax_load).load(loadUrl);
	    });
    }
</script>
</body>
</html>

Open in new window

<!-- THIS IS THE CONTENT FOR YOUR SEARCH PAGE THAT WILL LOAD FIRST INTO THE MODAL POPUP -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-size:3em">
    Search.aspx loaded here    
    </div>
    <div style="font-size:2em">
    Type in the search criteria.
    </div>
    <br />
    <asp:TextBox ID="searchTerm" runat="server"></asp:TextBox>
    <asp:Button ID="searchBut" runat="server" Text="Search" OnClick="searchBut_Click" />
    <asp:Label ID="errorLbl" runat="server" ForeColor="Red"></asp:Label>
    </form>
</body>
</html>

Open in new window

// BUTTON CLICK EVENT IN THE SEARCH PAGE CODE BEHIND

protected void searchBut_Click(object sender, EventArgs e)
        {
            if (this.searchTerm.Text != "")
            {
                Response.Redirect("WebForm1.aspx?x=true");
            }else
            {
                this.errorLbl.Text = "You must enter a search term.";
            }
        }

Open in new window

<!-- CONTENT FOR THE RESULTS PAGE TO BE LOADED SECOND IN THE MODAL POPUP, NO CODE BEHIND -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div style="font-size:3em">
        Results.aspx loaded here    
    </div>
    <div style="font-size:2em">
        Choose a row.
    </div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>Some cell data 1</td>
                <td><a href="WebForm1.aspx?id=1">Row 1</a></td>
            </tr>
            <tr>
                <td>Some cell data 2</td>
                <td><a href="WebForm1.aspx?id=2">Row 2</a></td>
            </tr>
            <tr>
                <td>Some cell data 3</td>
                <td><a href="WebForm1.aspx?id=3">Row 3</a></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Open in new window

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
CamilliaAuthor Commented:
Thanks! let me look at this. I'm new to JQuery...kinda scared of it :)
Tom BeckCommented:
You will need to rename "WebForm1.aspx" in my code so it matches the actual name of your parent webform.

Also, in my markup, Default.aspx represents the Search webform and results.aspx represents the results webform.
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.NET

From novice to tech pro — start learning today.