Thursday 20 June 2013

Editor Control in AJAX Using ASP.NET

Editor Control in AJAX Using ASP.NET


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 

No comments:

Post a Comment