Jquery Ui tabs loads to page in asp.net

Question

I am using a jquery Ui tabs in my application

In this i am loading three different tabs which has a asp form on each tab. We know that asp page must have only one form so i loaded those contents from two other pages like below.

<li><a href="#tabs-1">Home</a></li>
<li><a href="user_info.aspx">My Uploads</a></li>
<li><a href="Enquiry.aspx">Enquiry</a></li>

In user_info.aspx page i am having a GridView

 <form runat="server">
   <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" ></asp:GridView>     
 </form>

I have added a pagenation in my grid view which on changing page loads that user_info.aspx page. Is there a way to load this inside the after when i am changing the pagenation pages of grid view.

Answer 1

Edit: After much researching I came to the conclusion that this cannot be done the way you are trying to do it. The reason why is because when you load the user_info.aspx page into Default.aspx you are having 2 forms with id form1 in your page. Therefore, when the __doPostBack() function is called by clicking in the GridViews pages, you will get a Javascript exception because the __doPostBack() being called is the one from Default.aspx. Since you are passing arguments from user_info.aspx (GridView1), you get the error. If you change one of the ids of the forms in your pages, and click in the GridView's page, you will get an asp.net exception, because the ViewState is going to be invalid (in case you also change the action of the form, to Default.aspx).

Not everything is bad news, you have some solutions:

Solution 1: Simply add the GridView to your tab.

Solution 2: Add an IFrame pointing to user_info.aspx. If you REALLY have to have the GridView in a different page, I would go with this solution.

Example:

Markup:

<div id="tabs-2">
    <iframe src="user_info.aspx" id="myFrame" frameborder="0"></iframe>
</div>

jQuery:

$('#myFrame').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

This jQuery makes the IFrame fit it's content. It really does look like it belongs there (it's also borderless), and if you change the page, it stays in the same tab.

Screenshot: