Editor Control in AJAX Using ASP.NET

Davin Martyn
Feb 02, 2012

78.4k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. With AJAX help we can develop a web application and retrieve small amounts of data from the web server. AJAX consists of a different type of technology.

JavaScript
XML
Asynchronous Call to the server

Editor Control

The Editor includes options for changing font size, selecting a font, changing background color, modifying the foreground color, adding links, adding images, changing text alignment, and performing cut, copy, and paste operations.

Step 1 : Open Visual Studio 2010.

Go to File->New->WebSite
Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

Select Add->New Item
Select WebForm
Default.aspx page open

Step 3 : Go to the Default.aspx page and click on the [Design] option and drag a control from the Toolbox.

Drag ScriptManager, UpdatePanel, ImageButton, Label, Panel

Step 4 : Go to the Toolbox option and drag an Editor control.

Step 5 : Go to the Default.aspx[Design] option, then look at the control.

ContentTemplate

Step 6 : We can be use an UpdatePanel for the Editor control. Inside the UpdatePanel define <ContentTemplate>.

Code

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
          <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
              <asp:View ID="View1" runat="server">
                  <asp:Panel ID="Panel1" runat="server">
                  <p style="text-align: left">
                <h> Click on This image</h> <asp:ImageButton ID="ImageButton1" ImageUrl="~/MY IMAGE.jpg" Width="100px"
                          Height ="60px" ToolTip="enter the value" runat="server"
                          onclick="ImageButton1_Click" />
                      </p>
                      <asp:Label ID="Label2" runat="server" Text="Labe2" Width="25px"></asp:Label>
                      </asp:Panel>
                      </asp:View>
    </ContentTemplate>
</asp:UpdatePanel>

Step 7: Ajax style behavior is accomplished by a combination of ASP.NET's MultiView control and the ASP.NET Ajax's UpdatePanel. Go to the Toolbox option and drag a Multiview control.

Code

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
              <asp:View ID="View1" runat="server"/>
                  <asp:Panel ID="Panel1" runat="server">
                  <p style="text-align: left">
                <h> Click on This image</h> <asp:ImageButton ID="ImageButton1" ImageUrl="~/MY IMAGE.jpg" Width="100px"
                          Height ="60px" ToolTip="enter the value" runat="server"
                          onclick="ImageButton1_Click" />
                      </p>
                      <asp:Label ID="Label2" runat="server" Text="Labe2" Width="25px"></asp:Label>
                      </asp:Panel>
                      </asp:MultiView>

Step 8 : Go to the Default.aspx[Source] option and define and click on UpdatePanel.

Go to property option and define ViewStateMode.

Step 9 : Go to Default.aspx.cs file and write some code as follows:

Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    private int _ContentHeight;
    public int ContentHeight
     {
         get
         {
             return _ContentHeight;
         }
         set
         {
             _ContentHeight = value;
         }
     }
    private int _ContentWidth;
    public int ContentWidth
       {
           get
            {
                return _ContentWidth;
            }
                set
            {
                _ContentWidth = value;
                Panel1.Width = _ContentWidth;
                ContentEditPanel.Width = _ContentWidth;
           }
       }
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
        Editor1.Content = Label2.Text;
        MultiView1.SetActiveView(EditView);
    }
    protected void Save_ImageButton_Click(object sender, ImageClickEventArgs e)
    {
        Label2.Text = Editor1.Content;
        MultiView1.SetActiveView(View1);
    }
    protected void Abort_ImageButton_Click(object sender, ImageClickEventArgs e)
    {
       MultiView1.SetActiveView(View1);
    }
}

Step 10 : Go to the Default.aspx[Source] option and write some code as follows:

Code :

<title></title>
</head>
<body bgcolor="#9acbc9">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
          <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
              <asp:View ID="View1" runat="server">
                  <asp:Panel ID="Panel1" runat="server">
                  <p style="text-align: left">
                <h> Click on This image</h> <asp:ImageButton ID="ImageButton1" ImageUrl="~/MY IMAGE.jpg" Width="100px"
                          Height ="60px" ToolTip="enter the value" runat="server"
                          onclick="ImageButton1_Click" />
                      </p>
                      <asp:Label ID="Label2" runat="server" Text="Labe2" Width="25px"></asp:Label>
                      </asp:Panel>
                      </asp:View>
                      <asp:View ID="EditView" runat="server">
                       <asp:Panel ID="ContentEditPanel" runat="server">
          <p style="text-align: left">
    <h>save the editor value click here</h><asp:ImageButton ID="Save_ImageButton" runat="server" Height="60px"
                  ImageUrl="~/MYIM1.jpg" Width="100px"
                  ToolTip="SAVE and Exit Edit Mode." onclick="Save_ImageButton_Click" />
             <br />
             <br />
                          <asp:ImageButton ID="Abort_ImageButton" runat="server" Height="70px"
                  ImageUrl="~/exit.jpg" Width="100px"
                  ToolTip="Click to Exit Edit Mode Without Saving."
                  onclick="Abort_ImageButton_Click" />
          </p>
                           <p style="text-align: left">
                                </p>
          <cc1:Editor ID="Editor1" runat="server" BackColor="#EEAACA"
            BorderColor="#FFFF99" ForeColor="#9E4A2E" Height="300px" Width="400px" />
          </asp:Panel>
           </asp:View>
           </asp:MultiView>
           </ContentTemplate>
           </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>