Reader Level:
ARTICLE

Editor Control in AJAX Using ASP.NET

Posted by Davin Martyn Articles | AJAX February 02, 2012
This article uses the ASP.NET AJAX Editor Control to implement in-place content editing.
  • 0
  • 0
  • 22780

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.

ed1.gif

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

ed3.gif

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.
ed2.gif

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">
                               &nbsp;</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>

Step 11 : Now run the application by Pressing F5.

ed6.gif

Step 12 : Now click on the image; an editor window open.

ed7.gif

Step 13 : Now we write any text inside the editor and click on the save image button. Then the written text of the editor will be saved.

ed8.gif

Step 14 : Now we write any text inside the editor.

ed9.gif

Step 15 : Click on exit image button; note that it will exit from editor without saving anything (text).

ed8.gif

Resource

AJAX Rating Control

GridView Using Ajax ModalPopupExteder

ASP.Net AJAX GridView Loading using C#

COMMENT USING

Trending up