Step towards Dot Net: March 2013

Thursday, March 21, 2013

How to use JQuery Accordion in ASP.Net?

Asp.net Ajax Control Toolkit contains Accordion control, but it is server side control which is heavy weight. We have another alternative of Ajax Accordion Control. We can use JQuery Accordion. Jquery Accordion control is client side control so it is faster that Ajax Accordion control.

In this article I am explaining - How to use JQuery Accordion in ASP.Net?

To use JQuery Accordion first we need to include Jquery plug-in. You can easily download those .CSS and .JS files from jqueryui.com. After downloading those files create your directory structure like this-

http://steptodotnet.blogspot.in/2011/12/jquery-popup-window-in-aspnet.html

In this link you can see the solution structure.

Now here is the code to use Jquery Accordion control-

<head runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
    <link href="Css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
    <title></title>
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <div id="accordion" style="width: 400px">
            <h3>
                <a href="#">Section 1</a></h3>
            <div>
                Section 1 Description
            </div>
            <h3>
                <a href="#">Section 2</a></h3>
            <div>
                Section 2 Description
            </div>
            <h3>
                <a href="#">Section 3</a></h3>
            <div>
                Section 3 Description
            </div>
        </div>
    </div>
    </form>
</body>

In above code I have included Source files(.js files) and CSS files. Now to make Accordion to work I have written this lines of code-

<script>
        $(function () {
            $("#accordion").accordion();
        });
   </script>

Here "accordion" is the name of Div control which contains Child divs, These Child divs will be displayed as Accordion sections.

Output will be like this-

Note-

This example needs JQuery plug-in so after downloading include these files .js and .cs files in your project .

Thanks

Using #Region in Dot Net

The #region directive allows organizing code files. Using #region directive we can separate the code. We can create separate region for each code block. Means to declare the variables, constants, functions etc we can use different code block by separating using #region directive.

Here is the example-

// region 1
#region Public Variables
Public int value1
Public int value2
#endregion

//region 2
#region Methods
public string GetData()
{
--------
--------
}
#endregion

in above example we can see that I have created 2 region.

region1 for Public variables
region2 for methods

Like this we can create other regions also.

There are some benefits of using #region directive.

1. Separation of code
2. Readability
3. Easy to maintain
4. Easy to expand or collapse the code block
5. Easy to move entire code block

It is good to use #region directive while doing coding.

Thanks

Thursday, March 7, 2013

RichTextBox losing formatting : Workaround

Problem-

This is the common problem with RichTextBox, when we set any setting like - bold, Italic or Underline, then RichTextBox loses previous setting/formatting. Means it doesn't preserve previous settings.

Example-

We have Text -   Jitendra Faye

after making bold it should be - Jitendra Faye

But output will be - Jitendra Faye

means here RichTextBox not maintaining previous setting UnderLine.

In this article I am explaining - How to maintain RichTextBox setting while applying new settings?

I also faced same problem and came with one work around.

Solution-

This problem can be solved by setting new formatting to each character instead of going for whole string.

Here is the code-

To make Text as Bold

private void btnBold_Click(object sender, EventArgs e)
        {
            int selStart = rtfBox.SelectionStart;
            int selLength = rtfBox.SelectionLength;
            int selEnd = selStart + selLength;

            if (rtfBox.SelectionFont.Bold)
            {
                for (int x = selStart; x <= selEnd - 1; x++)
                {
                    rtfBox.Select(x, 1);
                    rtfBox.SelectionFont = new Font(rtfBox.Font, rtfBox.SelectionFont.Style & ~FontStyle.Bold);

                }
            }
            else
            {
                for (int x = selStart; x <= selEnd - 1; x++)
                {
                    rtfBox.Select(x, 1);
                    rtfBox.SelectionFont = new Font(rtfBox.Font, rtfBox.SelectionFont.Style | FontStyle.Bold);
                }
            }

        }

To make Text as Italic

private void btnItalic_Click(object sender, EventArgs e)
        {
            int selStart = rtfBox.SelectionStart;
            int selLength = rtfBox.SelectionLength;
            int selEnd = selStart + selLength;

            if (rtfBox.SelectionFont.Italic)
            {
                for (int x = selStart; x <= selEnd - 1; x++)
                {
                    rtfBox.Select(x, 1);
                    rtfBox.SelectionFont = new Font(rtfBox.Font, rtfBox.SelectionFont.Style & ~FontStyle.Italic);
                }
            }
            else
            {
                for (int x = selStart; x <= selEnd - 1; x++)
                {
                    rtfBox.Select(x, 1);
                    rtfBox.SelectionFont = new Font(rtfBox.Font, rtfBox.SelectionFont.Style | FontStyle.Italic);
                }
            }
        }

To make Text as UnderLine

private void btnUnderLine_Click(object sender, EventArgs e)
        {
            int selStart = rtfBox.SelectionStart;
            int selLength = rtfBox.SelectionLength;
            int selEnd = selStart + selLength;

            if (rtfBox.SelectionFont.Underline)
            {
                for (int x = selStart; x <= selEnd - 1; x++)
                {
                    rtfBox.Select(x, 1);
                    rtfBox.SelectionFont = new Font(rtfBox.Font, rtfBox.SelectionFont.Style & ~FontStyle.Underline);

                }
            }
            else
            {
                for (int x = selStart; x <= selEnd - 1; x++)
                {
                    rtfBox.Select(x, 1);
                    rtfBox.SelectionFont = new Font(rtfBox.Font, rtfBox.SelectionFont.Style | FontStyle.Underline);
                }
            }
        }

In above code you can toggle for Bold, Italic and UnderLine by maintaining previous setting also.

Try this code.

Thanks