Friday, June 29, 2012

Asp.net jQuery DropDown set Selected Index


In this post, we will see on how to set the Selected Index of an Asp.net DropDownList control.

To set the Selected Index of an Asp.net DropDownList control, use the following code.
$('yourDropDown').prop("selectedIndex",yourIndex);

Asp.net jQuery DropDown set Selected Value


In this post, we will see on how to set the Selected Value of an Asp.net DropDownList control.

To set the Selected Value of an Asp.net DropDownList control, use the following code.
$('yourDropDown').val('your value');

Asp.net jQuery DropDown set Selected Text


In this post, we will see on how to set the Selected Text of an Asp.net DropDownList control.

To set the Selected Text of an Asp.net DropDownList control, use the following code.
$("#yourDropDown option:contains('your text')").attr('selected', 'selected');

Asp.net jQuery DropDown get Selected Text


In this post, we will see on how to get the Selected Text of an Asp.net DropDownList control.


To get the Selected Text of an Asp.net DropDownList control, use the following code.
$('#yourDropdown option:selected').text()


Asp.net jQuery DropDown get Selected Value


In this post, we will see on how to get the Selected Value of an Asp.net DropDownList control.

To get the Selected Value of an Asp.net DropDownList control, use the following code.
$('#yourDropdown').val()

Asp.net jQuery DropDown get Selected Index


In this post, we will see on how to get the Selected Index of an Asp.net DropDownList control.

To get the Selected Index of an Asp.net DropDownList control, use the following code.

$('#yourDropdown').prop("selectedIndex")

Asp.Net jQuery Restrict dropdown list Selection without disabling

In this post, We will see on how to restrict the user from selecting an option in a DropDownList without disabling the control, using jQuery.

In the post Disable DropDownList without blur effect in Asp.Net, we saw how to achieve this effect using JavaScript, but this required us to set the onfocus and onchange event functions in all the dropdowns.


jQuery UI Button with Icons


In the post Asp.net jQuery UI Simple Button Example, we have seen oh how to create a simple jQuery UI Button, here we shall see on how to create a decorated jQuery UI Button with icons.

Let us first add a simple button to the page.
<button type="button" id="cmdLogin" value="Login" />

Asp.net jQuery UI Change Button Size / Button Text Font Size


In jQuery UI, the size of the button is controlled by the font size of the text inside the button, hence to change the size of the buttons we will have to change the font of the text inside the buttons.

System.ArgumentException: Invalid postback or callback argument


This error occurs when the mapping between the controls in the .aspx page and the corresponding events in the code-behind file is changed.

For example if you try to fire the Button1_Click event while clicking Button2 then this error will occur.

Invalid postback or callback argument.  Event validation is enabled using &ltlpages enableEventValidation="true"/> in configuration or &ltl%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

This is done explicitly by Asp.net to make sure that there are no breach is security, to prevent some hacking script to trigger the code-behind events.

Solution
1. If your application is not a very critical or if it a restricted intranet application then you can set the
enableEventValidation attribute in the @Page directive to false, this will prevent Asp.net from checking the control-event mappings

EnableEventValidation="false"

2. If your application is critical then you can use the ClientScriptManager.RegisterForEventValidation method to register the postback.

Thursday, June 28, 2012

Asp.net jQuery UI Simple Button Example


The jQuery UI library provides us option to decorate the button control, and add additional features to the Button control using jQuery

Let us start with a simple example, let us place a simple Asp.Net Button on a page and apply the jQuery button effect to the control.

Wednesday, June 27, 2012

Show jQuery UI Dialog is mouse position


In the post Open jQuery dialog on aspnet Button click, we have seen on how to show and hide a jQuery Dialog when an Asp.Net button is clicked, what if we want to display the dialog in the mouse positions, when the user hovers over a link, we shall see on how to get this working.

This feature is useful to display help text information in WebPages, display a help icon or text and when the user hovers the same, display a dialog with the help information.

We can show the dialog in mouse position, by tracking the page X/Y positions.

Show Asp.net jQuery Dialog on mouse over


In the post Open jQuery dialog on aspnet Button click, we have seen on how to show and hide a jQuery Dialog when an Asp.Net button is clicked, what if we want to display the dialog when the user hovers over a link, we shall see on how to get this working.

We can show the dialog on mouseover, by tracking the events
mouseenter/ mouseleave.

Asp.net jQuery Dialog with fading effect


In the post Open jQuery dialog on aspnet Button click, we have seen on how to show and hide a jQuery Dialog when an Asp.Net button is clicked, this will just open the dialog without any effect, how about opening the Dialog with a good fading effect, we shall on how to set the effect.

The fading effect can be set by setting the show/hide properties while opening the dialog as follows.

$('#myDialog').dialog({ show: "puff", hide: "puff" });

Tuesday, June 26, 2012

Apply styles to all controls in an Asp.Net page


Applying style sheets (CSS) helps us to maintain uniform look and feel for all the controls across the page/application. The normal way of applying styles is to declare the styles in the <style> tag or in a separate .css file and refer the class in all the controls as follows.

<asp:TextBox ID="txtName" CssClass="textStyle" runat="server"></asp:TextBox>

This was good, but we had to set the CssClass="textStyle" property to each and every control in the page/application, any changes done in the <style> section or .css file will get reflected in all the controls referring to the class.

Apply style in only one place
Now there is another shortcut, we can apply the styles even without specifying the CssClass="textStyle" property. Here’s how we do in.

Declare styles in the <style> section or in a .css file as follows

<style type="text/css">
[type=text]
{
    color:Blue;
    border: 1px solid black;  
    font-family:Verdana;
      font-size:9pt;
}
[type=textarea]
{
    color:Blue;
    border: 1px solid black;  
    font-family:Verdana;
      font-size:9pt;
}
[type=submit]
{
    color:Blue;
    border: 1px solid black;  
}
td
{
      color:Maroon;
      font-family:Verdana;
      font-size:10pt;
}
.redtextBox
{
    color:Red;
    border: 1px solid black;  
    font-family:Verdana;
    font-size:9pt;
}
       
</style>

Once we declare the styles in this way, we need not even set the class/cssclass property to the controls, they will automatically take the styles.

<body>
    <form id="frmStyles" runat="server">
        <table>
            <tr>
                <td>Name</td>
                <td><asp:TextBox
ID="txtName"
runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Age</td>
                <td><asp:TextBox
ID="txtAge"
runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Address</td>
                <td><asp:TextBox
ID="txtAddress"
runat="server" TextMode="MultiLine"></asp:TextBox>
    </td>
            </tr>
            <tr>
                <td>Phone</td>
                <td><asp:TextBox
ID="txtPhone"
CssClass="redtextBox" runat="server"></asp:TextBox>
    </td>
            </tr>  
            <tr>
                <td colspan="2" align="center">
                    <asp:Button
ID="cmdSave"
runat="server"
Text="Save" />  
                    <asp:Button
ID="cmdCancel"
runat="server"
Text="Cancel" />
                </td>
            </tr>
        </table>
    </form>
</body>


However if we want specific controls to take a different style, we can set the class/cssClass property to that control alone, setting at the control level overrides the settings done at the page/global level, hence the specific control takes the different style. In the above example the textbox txtPhone has a different style
CssClass="redtextBox" hence appears different in the screen.

Build and run the application, the page will be displayed as follows.

Enable / Disable nested controls in an Asp.Net User Control


In the post Enable / Disable all controls in an Asp.Net Page, we saw how to Enable/Disable controls in an Asp.net page, there are situations in which we load User Controls in the main page, in these situations the normal approach will not enable/disable the nested/child controls in the User Control, since the user control will be treated as a single control in the asp.net page.

To Enable/Disable the child controls within the user control, we need to iterate through the controls in the user control and Enable/Disable them separately. Identify the control from the page using Page.FindControl(), and pass the control to the EnableUserControls() method.

ucMyControl objMyControl = (ucMyControl)Page.FindControl("ucMyControl");
if
 (strMode.ToUpper() == "VIEW"))
{
   EnableUserControls(false, objMyControl)
}
else if (strMode.ToUpper() == "EDIT"))
{
   
EnableUserControls(true, objMyControl)
}

Based on the mode VIEW/EDIT we will pass false/true to the EnableUserControls function, and the same will DISABLE/ENABLE controls in the page.

public void EnableUserControls(bool status, UserControl currControl)
{ 
  
foreach (Control ctrl in currControl.Controls)
   {
        if (ctrl is TextBox)
        ((TextBox)ctrl).ReadOnly = (ctrlStatus == true) ? false : true;

        else if (ctrl is Button)
         ((Button)ctrl).Enabled = ctrlStatus;

        else if (ctrl is RadioButtonList)
         ((RadioButtonList)ctrl).Enabled = ctrlStatus;

        else if (ctrl is ImageButton)
         ((ImageButton)ctrl).Enabled = ctrlStatus;

        else if (ctrl is CheckBox)
         ((CheckBox)ctrl).Enabled = ctrlStatus;

        else if (ctrl is DropDownList)
         ((DropDownList)ctrl).Enabled = ctrlStatus;

        else if (ctrl is HyperLink)
         ((HyperLink)ctrl).Enabled = ctrlStatus;

        else if (ctrl is HtmlImage)
         ((HtmlImage)ctrl).Visible = ctrlStatus;
   }
}

Notice the we are setting the .Enabled property for all other controls except the textBox control, when a TextBox is disbled the contents in the TextBox will not be clearly visible to the users hence we are setting the ReadOnly property for the TextBox, and this functions opposite to the Enable/Disable

If Enable is set to true then ReadOnly should be set to false
If Enable is set to false then ReadOnly should be set to true

To achieve this we are using a conditional operator to reverse the value for the ReadOnly property.

((TextBox)ctrl).ReadOnly = (ctrlStatus == true) ? false: true;

Related Post