如何在不重新加载页面的情况下调用要显示在页面主要内容中的表单答案

【问题标题】：How to call a form to be displayed in main content of a page without page reload如何在不重新加载页面的情况下调用要显示在页面主要内容中的表单
【发布时间】：2011-06-06 07:18:38
【问题描述】：

我有一个基于我的母版页的页面。下面的代码

<%@ 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>

当上面的页面加载时，左侧有链接按钮，右侧有一个空的 maincontent 区域。我想要做的是在左侧链接按钮的单击事件的主要内容中显示一个输入表单。第二种形式如下。（不是基于母版页的形式）。

 <%@ 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>

我如何执行这项任务？

如果我想显示一个不同的表单来代替出现在 maincontent 区域中的第一个表单，我该怎么做？

【问题讨论】：

标签： c# asp.net web-applications webforms

【解决方案1】：

无需重新加载页面的 Web 请求通常使用称为 AJAX（异步 JavaScript 和 XML）的 Javascript 完成。你可以使用常规的 Javascript 来做到这一点，但是像 jQuery (http://jquery.com/) 这样的库可以让它变得更容易。

【讨论】：

感谢您的回复...非常有帮助...请您推荐和活动链接，我可以轻松地学习如何使用 jQuery 实现这一点？我可能对 javascripts、XMl 或 jQuery 一无所知，但我不能愚蠢地从一个非常直观的解释中应用它......
这是我在 msdn 上阅读后所做的。
我也会推荐 W3c 学校的教程......它们非常好而且简单...... www.w3schools.com/ajax/default.asp

【解决方案2】：

使用 MS AJAX，将 maincontent 区域放置在 UpdatePanel 中，并使用 UpdatePanel 的 AsyncPostBackTrigger 标记将 LinkButtons 设置为 UpdatePanel 的触发器。

有一些简单的教程（已添加，链接之前被屏蔽了）

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

【讨论】：

感谢 Lloyd，如果您能提供一些活动链接来演示我如何应用 MS AJAX 和 AsyncPostBack ...，我将不胜感激
我的链接按钮在 leftnav 内容持有者中，而我的更新面板和触发器在我的 maincntent 内容持有者中。如何从 leftnav 内容中引用链接按钮？更清晰的显示在下面的代码中......
左侧导航内容的代码如下：

打开案例ton>

注册展览ton>
和 maincntent 内容的代码：这里是什么？