Как вызвать форму для отображения в основном содержимом страницы без перезагрузки страницы - PullRequest
1 голос
/ 10 января 2011

У меня есть страница, основанная на моей главной странице. код ниже

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

при загрузке страницы выше, у меня есть кнопки ссылки слева и пустая область основного контента рядом с ней справа. то, что я хочу сделать, это отобразить форму ввода в основном контенте по событию нажатия кнопки ссылки слева. вторая форма как показано ниже (форма не основана на главной странице).

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

как мне выполнить эту задачу?

и если я хочу отобразить другую форму вместо первой, которая появилась в области основного контента, как мне это сделать?

Ответы [ 2 ]

1 голос
/ 10 января 2011

Веб-запросы без перезагрузки страницы обычно выполняются с помощью Javascript, который называется AJAX (асинхронный JavaScript и XML).Вы можете сделать это с обычным Javascript, но такая библиотека, как jQuery (http://jquery.com/) делает это намного проще.

0 голосов
/ 10 января 2011

Используйте MS AJAX, поместите область основного содержимого внутри UpdatePanel и установите LinkButtons в качестве триггеров для UpdatePanel, используя тег AsyncPostBackTrigger на UpdatePanel.

Есть несколько простых руководств (добавлено, ссылка была ранее заблокирована)

http://ajax.net -tutorials.com / управление / UpdatePanel-контроль /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...