Lecture – AJAX – UpdatePanel

 AJAX – Update Panel, Modal Popup, and Triggers

Prerequisites

Lecture – Advanced – Event Bubbling with User Controls

Lecture – Form Objects – User Controls

Part of Case Study – My Daily Math

Summary

This video demonstrates the user controls created as par of the My Daily Math case study. It demonstrates Event Bubbling used by the user controls. Also demonstrated is use of an AJAX ModalPopupExtender. The UpdatePanel, along with the use of Triggers in the update panel are demonstrated.

Video 

http://online1.daytonastate.edu/player2.php?id=4e2a6330465c8ffcaa696a5a16639176

Reference Materials

              CreateMCQuestion.aspx<%@ Page Title=”Create a Multiple Choice Question” Language=”C#” MasterPageFile=”~/LoggedIn.Master” AutoEventWireup=”true” CodeBehind=”CreateMCQuestion.aspx.cs” Inherits=”MyDailyMath.Users.CreateMCQuestion” ValidateRequest=”false” %>
<%@ Register Src=”~/UserControls/ucQuestionEditor.ascx” TagPrefix=”uc” TagName=”QuestionEditor” %>
<%@ MasterType virtualpath=”~/LoggedIn.Master” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”server”>
    <script type=”text/javascript” src=”http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML”>
    </script>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”server”>
    <asp:Panel ID=”Panel2″ runat=”server” CssClass=”QuestionTitleTextBox”>
    Question Title:  
    <asp:TextBox ID=”tbTitle” runat=”server” Width=”200″ BorderWidth=”4″ BorderStyle=”Double” BorderColor=”ActiveBorder” Font-Size=”Large” ></asp:TextBox>
    <asp:RequiredFieldValidator
        ID=”RequiredFieldValidator1″ runat=”server” ErrorMessage=”A Question Title is required” ControlToValidate=”tbTitle”></asp:RequiredFieldValidator>
        <asp:Button ID=”btnSubmit” runat=”server” Text=”Submit Question to Database and Enter Answers” 
            CssClass=”SubmitButton” onclick=”btnSubmit_Click” />
    </asp:Panel>
    <br />
    <asp:Panel ID=”Panel1″ runat=”server” ScrollBars=”Auto” BorderStyle=”Groove” BorderWidth=”2″ BorderColor=”Aquamarine”>
        <uc:QuestionEditor id=”qeQuestion” runat=”server” />
    </asp:Panel>
    <ajaxToolkit:RoundedCornersExtender ID=”rce1″ runat=”server” TargetControlID=”Panel1″ Corners=”All” Radius=”8″>
    </ajaxToolkit:RoundedCornersExtender>
</asp:Content>

 
         CreateMCQuestion.aspx.csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MyDailyMath.Code;

namespace MyDailyMath.Users
{
    public partial class CreateMCQuestion : System.Web.UI.Page
    {
        public int questionID
        {
            get { return MyDailyMathDB.getQuestionID(Session); }
            set { Session.Add(Global.QuestionID, value); }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            btnSubmit.Visible = (qeQuestion.Text != String.Empty);

            if (!IsPostBack)
            {
                if (questionID != 0)
                {
                    tbTitle.Text = MyDailyMathDB.getQuestionTitle(questionID);
                    qeQuestion.Text = MyDailyMathDB.getQuestionText(questionID);
                }
            }
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            if (questionID == 0)
                questionID = MyDailyMathDB.createQuestion(tbTitle.Text, qeQuestion.Text, Master.userID);
            else
                MyDailyMathDB.updateQuestion(questionID, tbTitle.Text, qeQuestion.Text);
                
        }

    }
} 
                   ucInsertEquation.ascx   <%@ Control Language=”C#” AutoEventWireup=”true” CodeBehind=”ucInsertEquation.ascx.cs” Inherits=”MyDailyMath.UserControls.ucInsertEquation” %>
<%@ Register Src=”~/UserControls/ucTaxonomySelector.ascx” TagPrefix=”uc” TagName=”TaxonomySelector”  %>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<table>
<tr>
<td>
    <asp:Panel ID=”Panel1″ runat=”server” CssClass=”PopupPanel” BackColor=”Beige” >
    <uc:TaxonomySelector runat=”server” id=”ucTaxonomySelector”></uc:TaxonomySelector><br />    
    </asp:Panel>
</td>
<td>
    <asp:GridView ID=”gvEquations” runat=”server” CellPadding=”4″ ForeColor=”#333333″ 
        GridLines=”None” AutoGenerateColumns=”false” OnRowCommand=”gvEquations_OnRowCommand”>
        <AlternatingRowStyle BackColor=”White” />
        <EditRowStyle BackColor=”#2461BF” />
        <FooterStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />
        <HeaderStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />
        <PagerStyle BackColor=”#2461BF” ForeColor=”White” HorizontalAlign=”Center” />
        <RowStyle BackColor=”#EFF3FB” />
        <SelectedRowStyle BackColor=”#D1DDF1″ Font-Bold=”True” ForeColor=”#333333″ />
        <SortedAscendingCellStyle BackColor=”#F5F7FB” />
        <SortedAscendingHeaderStyle BackColor=”#6D95E1″ />
        <SortedDescendingCellStyle BackColor=”#E9EBEF” />
        <SortedDescendingHeaderStyle BackColor=”#4870BE” />
        <Columns>
        <asp:BoundField DataField=”id” HeaderText=”ID” />
        <asp:BoundField DataField=”EquationTitle” HeaderText=”Text” />
         <asp:TemplateField HeaderText = “Equation”>
        <ItemTemplate>
            <asp:Literal ID=”litEqn” runat=”server” text='<%# Eval (“EquationText”) %>’></asp:Literal>
        </ItemTemplate>
        </asp:TemplateField>        
        <asp:TemplateField HeaderText=”Insert”>
        <ItemTemplate>
            <asp:LinkButton ID=”lbAdd” runat=”server” CommandName=”add” 
                    CommandArgument='<%#Eval(“id”) %>’ CausesValidation=”false” >Insert Equation</asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
 <asp:PostBackTrigger ControlID=”gvEquations” />    
</Triggers>
</asp:UpdatePanel>
    <asp:Button ID=”btnCancel” runat=”server” Text=”Cancel” 
        onclick=”btnCancel_Click”  />

 
                 ucInsertEquation.ascx.csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MyDailyMath.Code;

namespace MyDailyMath.UserControls
{
    public partial class ucInsertEquation : System.Web.UI.UserControl
    {
        public int EquationID
        {
            get { return MyDailyMathDB.getSessionVariable(“EquationID”, Session); }
            set { Session.Add(“EquationID”, value); }
        }

        public int EquationTaxonomyID
        {
            get { return MyDailyMathDB.getSessionVariable(“EquationTaxonomyID”, Session); }
            set { Session.Add(“EquationTaxonomyID”, value); }
        }

        public delegate void CancelButtonClickHandler(object sender, EventArgs e);
        public event CancelButtonClickHandler CancelButtonClick;

        public delegate void InsertButtonClickHandler(object sender, EventArgs e);
        public event InsertButtonClickHandler InsertButtonClick;
        

        protected void Page_Load(object sender, EventArgs e)
        {
            ucTaxonomySelector.TreeViewClicked += new UserControls.ucTaxonomySelector.TreeViewNodeChanged(ucTaxonomySelector_TreeViewClicked);
            EquationTaxonomyID = 0;
            EquationID = 0;
        }

        public string equationText()
        {
            return MyDailyMathDB.getEquationText(EquationID);
        }

        protected void gvEquations_OnRowCommand(Object sender, GridViewCommandEventArgs e)
        {
            // This will insert the equation
            int id = Convert.ToInt32(e.CommandArgument);
            EquationID = id;

            if (InsertButtonClick != null) InsertButtonClick(this, e);
        }

        protected void ucTaxonomySelector_TreeViewClicked(Object sender, EventArgs e)
        {
            EquationTaxonomyID = ucTaxonomySelector.TaxonomyID;
            gvEquations.DataSource = MyDailyMathDB.getAllEquations(EquationTaxonomyID);
            gvEquations.DataBind();        
        }

        protected void btnCancel_Click(object sender, EventArgs e)
        {
            EquationID = 0;
            EquationTaxonomyID = 0;
            if (CancelButtonClick != null) CancelButtonClick(this, e);
        }
    }
} 
             ucQuestionEditor.ascx<%@ Control Language=”C#” AutoEventWireup=”true” CodeBehind=”ucQuestionEditor.ascx.cs” Inherits=”MyDailyMath.UserControls.ucQuestionEditor” %>
<%@ Register Src=”~/UserControls/ucEditPanel.ascx” TagPrefix=”uc” TagName=”EditPanel” %>
<%@ Register Src=”~/UserControls/ucInsertEquation.ascx” TagPrefix=”uc” TagName=”InsertEquation” %>

<style type=”text/css”>
    .style1
    {
        width: 153px;
    }
</style>

<table>
<tr>
<td valign=”top” class=”style1″>
<uc:EditPanel runat=”server” id=”ucEP1″ Header=”Section 1″></uc:EditPanel><br />
<uc:EditPanel runat=”server” id=”ucEP2″ Header=”Section 2″></uc:EditPanel><br />
<uc:EditPanel runat=”server” id=”ucEP3″ Header=”Section 3″></uc:EditPanel><br />
</td>
<td>
    <asp:TextBox ID=”tbContentHTML” runat=”server” TextMode=”MultiLine” Width=”600″ Height=”450″ Visible=”false” BackColor=”White”></asp:TextBox>
    <ajaxToolkit:HtmlEditorExtender ID=”html” runat=”server” TargetControlID=”tbContentHTML” DisplaySourceTab=”true” >
    </ajaxToolkit:HtmlEditorExtender>
    <asp:TextBox ID=”tbContentText” runat=”server” TextMode=”MultiLine” Width=”600″ Height=”450″ Visible=”false” Enabled=”true”></asp:TextBox>
    <asp:Panel ID=”PanelQuestion” runat=”server”  Width=”600″ Height=”450″ CssClass=”QuestionDisplay” Visible=”false”  ScrollBars=”Auto”>
    <asp:Literal ID=”litQuestion” runat=”server” ></asp:Literal>
    </asp:Panel>
    <br />
    <asp:Button ID=”btnSubmit” runat=”server” Text=”Enter Question Text” CssClass=”QuestionButton”  
        onclick=”btnSubmit_Click” Visible=”false” />   
    <asp:Button ID=”btnInsertEquation” runat=”server” Text=”Insert Equation” CssClass=”QuestionButton”  
        Visible=”false” CausesValidation=”false” 
        onclick=”btnInsertEquation_Click” />   
    <asp:Button ID=”btnCancelEquation” runat=”server” Text=”Cancel Equation” 
        Visible=”false” onclick=”btnCancelEquation_Click” />
    </td>
    </tr>
</table>
<asp:Panel ID=”Panel1″ runat=”server” BackColor=”Beige” Visible=”false”>
<uc:InsertEquation runat=”server” id=”ucInsertEquation”></uc:InsertEquation>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID=”mpe1″ runat=”server” PopupControlID=”Panel1″ TargetControlID=”btnInsertEquation” BackgroundCssClass=”ModalBackground” DropShadow=”true” >
</ajaxToolkit:ModalPopupExtender>

 
                      ucQuestionEditor.ascx.csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MyDailyMath.UserControls
{
    public partial class ucQuestionEditor : System.Web.UI.UserControl
    {
        public string mode
        {
            get { return Convert.ToString(Session[“QEditMode”]); }
            set { Session.Add(“QEditMode”, value); }
        } // html, text, done
        public int editn
        {
            get { return Convert.ToInt32(Session[“QEditN”]); }
            set { Session.Add(“QEditN”, value); }
        } // 1, 2, or 3

        public string Text
        {
            get { return fullContent(); }
            set
            {   litQuestion.Text = value;
                PanelQuestion.Visible = true;
                ucEP1.Text = litQuestion.Text; }
        }


        protected void Page_Load(object sender, EventArgs e)
        {
            ucEP1.HtmlButtonClick += new UserControls.ucEditPanel.HtmlButtonClickHandler(ucEP1_HtmlButtonClick);
            ucEP2.HtmlButtonClick += new UserControls.ucEditPanel.HtmlButtonClickHandler(ucEP2_HtmlButtonClick);
            ucEP3.HtmlButtonClick += new UserControls.ucEditPanel.HtmlButtonClickHandler(ucEP3_HtmlButtonClick);

            ucEP1.TextButtonClick += new UserControls.ucEditPanel.TextButtonClickHandler(ucEP1_TextButtonClick);
            ucEP2.TextButtonClick += new UserControls.ucEditPanel.TextButtonClickHandler(ucEP2_TextButtonClick);
            ucEP3.TextButtonClick += new UserControls.ucEditPanel.TextButtonClickHandler(ucEP3_TextButtonClick);

            //ucInsertEquation.CancelButtonClick += new UserControls.ucInsertEquation.CancelButtonClickHandler(ucInsertEquation_CancelButtonClick);            
            ucInsertEquation.InsertButtonClick += new UserControls.ucInsertEquation.InsertButtonClickHandler(ucInsertEquation_InsertButtonClick);
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            getEditText();
            setDoneMode();
        }

        protected void getEditText()
        {
            if (mode == “html”)
            {
                if (editn == 1) ucEP1.Text = tbContentHTML.Text;
                if (editn == 2) ucEP2.Text = tbContentHTML.Text;
                if (editn == 3) ucEP3.Text = tbContentHTML.Text;
                setDoneMode();
                return;
            }

            if (mode == “text”)
            {
                if (editn == 1) ucEP1.Text = tbContentText.Text;
                if (editn == 2) ucEP2.Text = tbContentText.Text;
                if (editn == 3) ucEP3.Text = tbContentText.Text;
                setDoneMode();
                return;
            }
        }

        protected void appendEditText(string s)
        {
            if (mode == “html”)
            {
                if (editn == 1) tbContentHTML.Text += s;
                if (editn == 2) tbContentHTML.Text += s;
                if (editn == 3) tbContentHTML.Text += s;
                
                return;
            }

            if (mode == “text”)
            {
                if (editn == 1) tbContentText.Text += s;
                if (editn == 2) tbContentText.Text += s;
                if (editn == 3) tbContentText.Text += s;
                
                return;
            }


        }

        private string fullContent()
        {
            return ucEP1.Text + ucEP2.Text + ucEP3.Text;
        }

        private void setHTMLEdit(int n)
        {
            getEditText();
            tbContentHTML.Visible = true;
            PanelQuestion.Visible = false;
            tbContentText.Visible = false;

            btnInsertEquation.Visible = true;
            btnSubmit.Visible = true;
            Panel1.Visible = true;
            btnSubmit.Text = “Submit HTML for Section ” + n.ToString();
            mode = “html”;
            editn = n;
        }

        private void setTextEdit(int n)
        {
            getEditText();
            tbContentHTML.Visible = false;
            PanelQuestion.Visible = false;
            tbContentText.Visible = true;

            btnInsertEquation.Visible = true;
            Panel1.Visible = true;
            btnSubmit.Visible = true;
            btnSubmit.Text = “Submit Text for Section ” + n.ToString();
            mode = “text”;
            editn = n;
        }

        private void setDoneMode()
        {
            tbContentHTML.Visible = false;
            tbContentText.Visible = false;
            PanelQuestion.Visible = true;

            btnInsertEquation.Visible = false;
            Panel1.Visible = false;
            btnSubmit.Text = “Awaiting Edit Mode”;
            btnSubmit.Visible = true;
            litQuestion.Text = fullContent();
            mode = “done”;
            editn = 0;
        }


        protected void ucEP1_HtmlButtonClick(object sender, EventArgs e)
        {
            setHTMLEdit(1);
            tbContentHTML.Text = ucEP1.Text;
        }
        protected void ucEP2_HtmlButtonClick(object sender, EventArgs e)
        {
            setHTMLEdit(2);
            tbContentHTML.Text = ucEP2.Text;
        }
        protected void ucEP3_HtmlButtonClick(object sender, EventArgs e)
        {
            setHTMLEdit(3);
            tbContentHTML.Text = ucEP3.Text;
        }

        protected void ucEP1_TextButtonClick(object sender, EventArgs e)
        {
            setTextEdit(1);
            tbContentText.Text = ucEP1.Text;
        }
        protected void ucEP2_TextButtonClick(object sender, EventArgs e)
        {
            setTextEdit(2);
            tbContentText.Text = ucEP2.Text;
        }
        protected void ucEP3_TextButtonClick(object sender, EventArgs e)
        {
            setTextEdit(3);
            tbContentText.Text = ucEP3.Text;
        }

        protected void ucInsertEquation_CancelButtonClick(object sender, EventArgs e)
        {
            btnCancelEquation_Click(sender, e);
            mpe1.Hide();
        }

        protected void ucInsertEquation_InsertButtonClick(object sender, EventArgs e)
        {
            string s = ucInsertEquation.equationText();
            appendEditText(s);
            mpe1.Hide();            
        }

        protected void btnCancelEquation_Click(object sender, EventArgs e)
        {
            mpe1.Hide();
        }

        protected void btnInsertEquation_Click(object sender, EventArgs e)
        {
            Panel1.Visible = true;
            mpe1.Show();
        }

    }
}

Additional Information