How to call a form to be displayed in main content of a page without page reload_问答_开发者

I have a page that is based on my master page. the code below

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CaseAdmin.aspx.cs" Inherits="Prototype4.CaseAdmin" %>
<%@PreviousPageType VirtualPath="~/Account/Login.aspx"%>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="CaseRightNews" ContentPlaceHolderID="RightNewsItem" runat="server">
</asp:Content>
<asp:Content ID="CaseLeftNav" ContentPlaceHolderID="LeftNavigation" runat="server">

    <div style="margin-top:20px; margin-bottom:20px;">
    <p class="actionButton"><asp:LinkButton ID="OpenCaseLinkButton" runat="server" 
            onclick="OpenCaseLinkButton_Click">Open Case</asp:LinkButton> </p>
    <p class="actionButton"><asp:LinkButton ID="RegisterExhibitLinkButton" runat="server">Register Exhibit</asp:LinkButton> </p>
    </div>
</asp:Content>
<asp:Content ID="CaseMainContnt" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>

when the page above loads, i have link buttons on the left and an empty maincontent area next to its right. what i want to do is display an entry form in the main content on click event of the link button on the left. the second form is as below.(form not based on master page).

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OpenCase.aspx.cs" Inherits="Prototype4.EntryForms.OpenCase" %>
<%@PreviousPageType VirtualPath="~/CaseAdmin.aspx" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!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></title>
    <style type="text/css">
        .casePage
        {
            width: 430px;
            height:314px;
            background-color:#3a4f63;
        }
        .style1
        {
            font-weight: normal;
            color: #FFFFFF;
            text-align: center;
        }
        .style2
        {
            font-weight: normal;
            color: Black;
            text-align: left;
            margin-left: 20px;
            margin-top:0px;

        }
        .style3
        {
            width: 85%;
        }
        .style4
        {
            width: 175px;
            background-color: #808080;
        }
        .style5
        {
            background-color: #CCCCCC;
            padding-left:10px;
        }
    </style>
</head>
<body class="casePage">
    <form id="form1" runat="server">
    <div style="height: 313px; width: 430px">
    <h2 class="style1">
        <strong>Open Case
        Form</strong></h2>
    <div style="width: 426px; margin-bottom:20px;">


        <table class="style3" align="center">
            <tr>
                <td class="style4">
                    <p class="style2">
                    Case ID:    
                    </p>
            </td>
                <td class="style5">
            <asp:TextBox ID="caseIDTextBox" 
                runat="server" height="22px" width="154px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style4">
                    <p class="style2">
                    Case Description:
                    </p>
                </td>
                <td class="style5">
                    <asp:TextBox ID="caseDescTextBox" 
                runat="server" height="22px" width="154px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style4">
                   <p class="style2">
                    Case Administrator ID:
                    </p>
                </td>
                <td class="style5">
                    <asp:TextBox 
                ID="caseAdminIDTextBox" runat="server" height="22px" width="154px"></asp:TextBox>
                </td>
            </tr>
        </table>






            </div>
            <div>


                <table class="style3" align="center">
                    <tr>
                        <td align="center">
                            <asp:Button ID="openCaseBotton" runat="server" Text="Open Case" 
                                onclick="openCaseBotton_Click" />
                        </td>
                        <td>
                            &nbsp;</td>
                        <td align="center">
                            <asp:Button ID="addExhibitBotton" runat="server" Text="Add Exhibit" 
                                onclick="addExhibitBotton_Click" />
                        </td>
                    </tr>
                </table>


            </div>
    </div>
    </form>
</body>
</html>

how do i perform this task?

and if i wanted to display a different form in place of the first one that appeared in the maincontent area, how do i go about it?

Web requests without page reloads are usually done with Javascript, called AJAX (Asynchronous JavaScript and XML). You can do this with regular Javascript, but a library like jQuery (http://jquery.com/) makes it a lot easier.

Use MS AJAX, place the maincontent area inside an UpdatePanel and set the LinkButtons as Triggers for the UpdatePanel using the AsyncPostBackTrigger tag of the UpdatePanel.

There are some simple tutorials (added, link was previously blocked)

http://ajax.net-tutorials.com/controls/updatepanel-control/