DotNet Snippets^1.0

Ever have a Linkbutton you want to have a confirm dialog (ie. Ok/Cancel) popup before performing the postback? Simply do something like this on the OnClientClick:

Reset Password

• Comments / Show

After some research looking for a good jquery password strength meter, I found one that I liked, looked good, and was easy to use. It is also a jquery plugin, which makes it easier to implement.

Here is the link: SelectBox Password Strength Plugin

• Comments / Show

We often have variable width objects in a page, like Buttons or images that we need to center. I came across this article that explains it well: Centering Variable Width Content

• Comments / Show

function ShowItem(itemId) {
		var item = $get(itemId);
		if (item.style.display == "none" || item.style.display == "") {
			item.style.display = "block";
		}
		else {
			item.style.display = "none";
		}
	}

If you are using masterpages, you will want to do something like this in your CS codebehind:

HyperLinkLogin.NavigateUrl = String.Format("javascript:ShowItem('{0}');", LoginPanel.ClientID);

• Comments / Show

This came in handy when I was using the ModalPopupExtender to pop up a Panel to add a new record. After I had added one item, and hit add again, it would still show the old data. So, I needed a way to clear the text boxes with javascript.

First add the following javascript function in the head, or referenced js file. If you are using master pages, it can go in there.

function clearTheInputs(inputType) 
{
     tags = document.getElementsByTagName("input");
     for(i = 0; i < tags.length; i++) {
          if(tags[i].type==inputType) {
                tags[i].value = "";
		}
     }
}

Now, to call this simply do something like this. You could add this in the designer but I'll do it from the codebehind just to demonstrate how it would be done from cs.

protected void Page_Load(object sender, EventArgs e)
{
     LinkButtonAddTemplate.Attributes.Add("onclick", "javascript:clearTheInputs('text')");
}

• Comments / Show

Let's say we have a gridview within an UpdatePanel. The GridView throws some command arguments, ie Edit, Delete, or a Custom LinkButton in a template field with it's CommandArgument set.

When the GridView's command arguments are fired, only the things in that UpdatePanel will get updated, nothing else. So if we want to intercept that call and for example refresh another update panel we would do the following:

Your Gridview with it's command arguments goes in here...

Now define the OnLoad function for the updatepanel.

protected void UpdatePanelList_Load(object sender, EventArgs e)
{
   if (String.IsNullOrEmpty(Request.Params.Get("__EVENTARGUMENT")) == false)
   {
      // We are gonna pull the commandargument that is coming in as an eventargument from the GV
      int itemId = 0;
      Int32.TryParse(Request.Params.Get("__EVENTARGUMENT"), out itemId);
      // Now we can execute something with that code, or update a different update panel.
      LoadSomething(itemId);
   }
}

• Comments / Show

When we have forms being submitted that record something to the Database, it is often a good idea to disable the buttons after the first click.

First add the following code to your header. If you are using master pages, this goes in the masterpage.

Then, in your code behind you will need to add an onclick attribute to the buttons you want to disable

CheckoutButton.Attributes.Add("onclick", "javascript:if(submitFlag){return false;}else{submitFlag = true; return true;}");

Note that on the onclick attribute you could also do something like $get('buttonClientId').Enabled = false . If you use master pages be sure you are using the right clientId for the button.

• Comments / Show

The asp net AJAX library has some useful things built into it. One thing I found I needed was how to find object components or page dotnet controls.

By page objects I mean javascript objects registered like this:

var app = Sys.Application;
			app.add_load(applicationLoadHandler);

function applicationLoadHandler(sender, args) {
$create(MsdnMag.Timer, 
		            {enabled:true, id:"SULTimer", timeout:60000}, 
		            {tick:OnTick}, null, null);
}

To find them you can do something like in this example:

if(typeof(this._components["SULTimer"]) !== 'undefined')
{
// then the object SULTimer exists
}

• Comments / Show

The accordion control from the ajax control toolkit can be pretty nice for building Hierarchical structures. The accordion provides expand and collapse to preserve screen real estate and keep the view organized.

Lets start with the aspx side: Drag in your controls and make em look like this:

                     
                        <%# Eval("Date", "{0:yyyy}") %> 
                     
                     
                         
                         
                            
                                <%# Eval("Date", "{0:MMMM}")%> 
                            
                            
                                
                                
                                
                            
                         
                         
                     
                    
                    

Notice a few things: In this example we are using a dates based hierarchy, starting out with the years and coming down to the months and finally to the days in that month.
The outer Accordion pane, Accordion1, is databound to an object datasource that puts out a table with a column "Date".
The inner accordion is not databound to anything, it will be databound in the codebehind. This is because we need to pull that value from the hiddenField that will let us know what year/month we need to build the next accordion pane for.
At the end we just have a GridView that lists the final days in the archive for the selected month.

Now for the css that provides the look, alter this to get something different than the default view provided by microsoft.

.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.accordionHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}
.accordionHeader a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.accordionHeaderSelected a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

.accordionHeaderSelected a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

Finally lets get to the codebehind, written in c-sharp of course:

protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
    {
        IssuesData data = new IssuesData();

        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
        {
            AjaxControlToolkit.AccordionContentPanel contentPanel = e.AccordionItem;

            HiddenField yearHf = (HiddenField)contentPanel.FindControl("HiddenField1");

            AjaxControlToolkit.Accordion innerAccordion = (AjaxControlToolkit.Accordion)contentPanel.FindControl("AccordionMonths");
            innerAccordion.DataSource = data.LoadArchiveMonths(yearHf.Value);
            innerAccordion.DataBind();
        }


    }

    protected void AccordionMonths_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
    {
        IssuesData data = new IssuesData();

        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
        {
            AjaxControlToolkit.AccordionContentPanel contentPanel = e.AccordionItem;

            HiddenField monthHf = (HiddenField)contentPanel.FindControl("HiddenFieldMonth");

            DateTime monthDate = Convert.ToDateTime(monthHf.Value);

            GridView datalist = (GridView)contentPanel.FindControl("GridViewDates");
            datalist.DataSource = data.LoadArchiveForMonth(monthDate.Month, monthDate.Year);
            datalist.DataBind();
        }
    
    }

Notice that these are the on row / item commands that get run during databinding. Note how we pull the hiddenfield value to then build the inner accordion pane with the right data, and further build the GridView with the right data.

• Comments / Show