Question

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

下面的代码

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

我该如何执行此任务？

如果我想显示一个不同的表格来代替主要内容区域中出现的第一个表格，我该怎么做呢？

Answer 1

没有页面重新加载的Web请求通常使用Javascript完成，称为AJAX（异步JavaScript和XML）。您可以使用常规Javascript来完成此操作，但像jQuery（http://jquery.com/）这样的库可以让它变得更容易。

Answer 2

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

有一些简单的教程（添加，链接先前已被阻止）

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

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

2 个答案: