ASP. NET + AJAX simple style editor

Source: Internet
Author: User

Preface:
Here is a simple style editor based on AJAX. It mainly uses AJAX not to refresh it. Its function is very simple and there is no technical stuff in it,

I hope that I can learn a little help at the beginning, and also improve and consolidate what I have learned before;

Directory:
View running results

Code Description

Notes
Source code download

Summary

Section 1 running result browsing

Initial page

Font, color, font size browse page

Browse the page with bold or underline

Section 2 code explanation

Before I explain the code, we have to do something. From the toolbox, we just need to pull ScriptManager and an UpdatePanel. Finally, we just need to pull the desired control to the UpdatePanel, I will not describe it in detail here. Please forgive me.
In all our server controls, we must set their AutoPostBack to true, because this will be returned;

Now let's look at the code.

1. Get the font code of the font system:

/** // <Summary>
/// Obtain all fonts in the system
/// </Summary>
Public void FontList ()
{
System. Drawing. Text. InstalledFontCollection font = new System. Drawing. Text. InstalledFontCollection ();
System. Drawing. FontFamily [] fontFamily = font. Families;
Foreach (FontFamily list in fontFamily)
{
DropDownList1.Items. Add (list. Name. ToString ());
}
}

There is nothing to say here, that is, using the System. Drawing. Test. installedFontCollection class, we can further study this class.

2. Add font size code

/** // <Summary>
/// Obtain the font size
/// </Summary>
Public void getSize ()
{
For (int I = 1; I <70; I ++)
DropDownList2.Items. Add (I. ToString ());

}

It's easy to add data to the DropDownList in a for loop.

3. Color Code

/** // <Summary>
/// Obtain the font color
/// </Summary>
Public void getColor ()
{

DropDownList3.Items. Add ("Color. AliceBlue ");
DropDownList3.Items. Add ("Color. Blue ");
DropDownList3.Items. Add ("Color. Yellow ");

}

4. The following code is their event code:

Protected void dropdownlistincluselectedindexchanged (object sender, EventArgs e)
{
TextBox4.Font. Name = DropDownList1.SelectedItem. Value;
}
Protected void DropDownList3_SelectedIndexChanged (object sender, EventArgs e)
{
TextBox4.ForeColor = Color. Brown;
}
Protected void DropDownList2_SelectedIndexChanged (object sender, EventArgs e)
{
TextBox4.Font. Size = FontUnit. Parse (DropDownList2.SelectedItem. Value );
}
Protected void chkBold_CheckedChanged (object sender, EventArgs e)
{
TextBox4.Font. Bold = chkBold. Checked? True: false;
}
Protected void chkUnderline_CheckedChanged (object sender, EventArgs e)
{
TextBox4.Font. Underline = chkUnderline. Checked? True: false;
}
Protected void chkStrikOut_CheckedChanged (object sender, EventArgs e)
{
TextBox4.Font. Strikeout = chkStrikOut. Checked? True: false;
}

This adds events to all the arriving DropDownList and CheckBox respectively. You just need to do everything.

There are so few codes.

Section 3 notes

1. if there is no problem with the code at this time, that is, the page is still being refreshed, you will find a prompt in the lower left corner of your browser that SYS cannot be found, this is something that cannot be found in AJAX,

You can find the web. config file in the directory where you install AJAX

<HttpHandlers>
<Remove verb = "*" path = "*. asmx"/>
<Add verb = "*" path = "*. asmx "validate =" false "type =" System. web. script. services. scriptHandlerFactory, System. web. extensions, Version = 1.0.61025.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35 "/>
<Add verb = "*" path = "* _ AppService. axd "validate =" false "type =" System. web. script. services. scriptHandlerFactory, System. web. extensions, Version = 1.0.61025.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35 "/>
<Add verb = "GET, HEAD" path = "ScriptResource. axd "type =" System. web. handlers. scriptResourceHandler, System. web. extensions, Version = 1.0.61025.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35 "validate =" false "/>
</HttpHandlers>

Copy the file to the <system. web> node in the web. config file of your site.

2. All ASP. NET Server controls must be set to automatic return;

Section 4 download source code

Here we provide a source code download address for beginners, hoping to help you.
/Files/caodaiming/Web.rar

Section 5 Summary

In fact, this DEMO has no meaning. It is very simple and has no practical value. Here, I mainly want to help beginners and help you understand AJAX, at the same time, I also hope that you have confidence in your learning and a good improvement for yourself.

There is nothing new. I hope to get everyone's support for me. I will write more new articles according to your requirements in the future.

Thank you!

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.