Uses of Jquery Filter Selector

Jquery Filter selector becomes very handy for a geek who’s found of lambda function in LINQ. Here are some scenarios where we can easily use filter selector. Its very useful for a complex filter.
Some of the scenarios are;

  1. Dynamically setting the selected option of a dropdownlist
    
      $('#dropdownlistId option').filter(function() {
    return $.trim( $(this).text() ) == "Value to Compare"; })
    .attr('selected',true);
    
    
  2. Dynamically changing the background color of a particular checked checkbox.
    
      $('input:checked').filter(function() { 
    return $.trim( $(this).val() ) == "Value to Compare"; })
    .css('background-color','#fff');
    
    

Posted in Jquery Good Practices, Jquery in Asp.Net | Tagged , , , | Leave a comment

Could not complete the operation due to error 80020101 in IE11

My asp.net application was working on all browsers before IE11 came in. But when IE11 launched and users started to use it,I got lot of complaints about the UI mess and postbacks . The most irritating thing was neither AJAX UpdatePanel was working nor any postbacks on the page.  So I googled it for almost two days trying different tricks/tips but didn’t work, but then I found this hotfix on microsoft website; http://support.microsoft.com/kb/2836939/en-us.
Most important thing is that after downloading this file you need to install on the server where asp.net website/application is deployed/hosted. Because this error is not an error of your project/application, but its an issue of dotnet framework 4.0 and 2.0.

Posted in asp.net postback problem in ie11, Best Practices of ASP.Net | Tagged , | Leave a comment

jQuery Dialog in Asp.Net Master Page

Web developers have been enjoying the elegancy of the jQuery over the years. Many of us have used jQuery Dialog for different purposes.

In this post I’m trying to show how you can easily integrate it in your master page.
You’ll need to import the jquery core and ui libraries before this dialog code.
Define the dialog code in the head section of the master page.
If you want to know all of its properties and configurations then you can find Documentation

<script type="text/javascript">
$(function () {var dialogDefine = $("#divLoginDialog").dialog({
               autoOpen: false,
               modal: true,
               closeOnEscape: true,
               draggable: false,
               resizable: false,
               position: [350, 250],
               title: "Login",
               overlay: "background-color: black; opacity: 90",
               buttons: {
               Cancel: function(){ $(this).dialog('close');},
               Ok: function () { /*Call your custom validation code;*/ }}
         }); //end dialog
$("#hlkShowLogin").click(function () {
            $("#divLoginDialog").dialog('open');
            $("#divLoginDialog").parent().appendTo($("form:first"));
            return;
        });
});//end Jquery
</script>

The hyperlink which will show the dialog is like;

<a href="#" id="hlkShowLogin" class="link">Login</a>

Here’s the login dialog html. In this post I’ve used jQuery buttons, but you can use asp.net buttons.
EDIT:: In ASP.Net sample code jQuery buttons replaced with normal asp.net buttons.

<div id="divLoginDialog" style="display: none;">
<table cellspacing="0" cellpadding="2">
<tr>
<td class="label">User Name:</td>
<td>
<asp:TextBox ID="txtUserName" ClientIDMode="Static"  runat="server"/>
<asp:RequiredFieldValidator ErrorMessage="User name required" ControlToValidate="txtUserName" runat="server" />
</td>
</tr>
<tr>
<td class="label">Password:</td>
<td>
<asp:TextBox ID="txtPassword" Mode="password" ClientIDMode="Static"  runat="server"/>
<asp:RequiredFieldValidator ErrorMessage="Password required" ControlToValidate="txtPassword" runat="server" />
</td>
</tr>
</table>
</div>

Here download the sample solution in asp.net.

Posted in Jquery in Asp.Net | Tagged , | 15 Comments

Cross Browser Compatible AJAX Toolkit Auto-Complete Extender

Asp.net developers use AJAX Toolkit’s AutoCompleteExtender to get a Google like search behavior. It is a very easy to use control.
You can easily set all its properties using asp.net markup screen.

It works with every browser but sometimes its suggestion list doesn’t properly aligned with the associated control.
It needs little work around for cross browser compatibility.

So, in this post I am going to show you how can make it more cross browser compatible by using its OnClientShown event.

For more detail about the properties of the control , you can get msdn;

Markup look;
Control Markup

Javascript function to make it cross browser compatible;
SuggestionListPositionSet

Service Method to get suggestions;
ServiceMethod

Tested it on IE8, IE8+,Fire-Fox, Google Chrome, Safari and IPad.
You can download the sample solution from here;

Posted in AJAX Toolkit, Best Practices of ASP.Net | Tagged , , | Leave a comment

MessageBox in ASP.Net using JQuery Impromptu.

I have been working in Asp.net for 3 years. But this is my first attempt to write blog article. It wouldn’t be so good as should be , but I ‘ll assure you next time it would be lot better. So, if you found some improper then for this time pardon me.

In developing web applications it is always very useful to show some nice alerts and popups to get some approvals or feedbacks from user at runtime , e.g. in deleting a record you always use “Are you sure ,you want to delete this order ?” etc. So, Before Trent Richardson’ JQuery-Impromptu, I always used AJAX modalpopup to show windows like MessageBox in asp.net. But it was slow and also had to do work around much for browser compatibility for AJAX.

Because of these issues I decided to find some other ways to show user some nice looking message-box. When I was Goggling I found JQuery Impromptu by Trent Richardson. It is a very elegant library to use in any web application for popup. You can read more about this library on Trent blog.
Then I found a good article of Aron Goldenthal for using impromptu in asp.net. I took the idea to write the class from this article. It was little complex that is why I though the need of a class which is easier to use for anyone.

MessageBox is the core class which is responsible to display MessageBox on the browser.

It has the following properties;
Caption: Caption or heading of the MessageBox like Warning, Information, Error, etc.
Message: The text or the description of the MessageBox.
Buttons: Buttons to display on the MessageBox, you can add as many buttons as your requirement. It needs the name of the button and text. It has the following default button types; OK, CANCEL, YES and NO.
Focus: The Index of the button to set the focus at startup, default index is 0.
CallBackFunction: You can have your own custom javascript function to call whenever buttons on the MessageBox is fired. It is optional.

One thing I should mention here is that If you are using AJAX ModalPopup then uncomment the below lines in javascript.
$(“#jqibox”).css(‘position’,’absolute’);
$(“#jqibox”).css(‘z-index’,’10002′);

This is the MessageBox;

That is all for this time, I ‘ll come back soon with some enhancements.
Download Sample Application

Posted in Jquery in Asp.Net | Tagged , , , , | 9 Comments

DataSet Vs DataReader

Best Practices developing applications Part-1

There are many reasons why we follow best practices. My own thoughts have changed over the course of my career. Early in my career as a junior developer I strictly followed the patterns and practices of my seniors and leads, and I assumed that their advice would be better than my own.

But with the passage of time my perceptions started to change because of research . As we have to research when our application consumes lot of time in executing and also when its scalability becomes a question. Before doing so I always used DataSet to get the data from the database. Whether it is for large application or too small, but then I found something was doing wrong.

DataSet is a collection of in memory tables and datareader provides the ability to expose the data from database.

Both are very widely used in asp.net applications to get/fetch the data from the database . But for a scalable ,fast and reliable application one has to know the best practices in developing application.

DataSet

We should use when the application is;

  • Windows application
  • Not too large data
  • Returning multiple tables
  • If, to be serialized
  • Disconnected architecture
  • To return from a WCF  service
  • To send across layers
  • Caching the data
  • Do not need to open or close connection

Code snippet using dataset;

public DataSet GetRecord(Guid id, string procedureName)
{
DataSet resultSet = new DataSet();
SqlConnection connection = new SqlConnection(System.Configuration.
ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
SqlCommand command = new SqlCommand(procedureName, connection);
command.CommandType = CommandType.StoredProcedure;
command.Parameters["pID"].Value = id.ToString();
IDataAdapter adapter = new SqlDataAdapter(command);
try
{
adapter.Fill(resultSet);
}
catch (Exception ex)
{
throw new PerformanceException(ex.Message, ex.InnerException);
}
return resultSet;
}

DataReader
DataReader is a stream which is readonly and forward only. It fetches the record
from databse and stores in the network buffer and gives whenever requests.
DataReader releasese the records as query executes and do not wait for
the entire query to execute. Therefore it is very fast as compare to the
dataset. It releases only when read method is called.

Its usages;

  • Web application
  • Large data
  • Returning multiple tables
  • For Fast data access
  • Needs explicitly closed
  • Output parameter value will only available after close
  • returns only a row after read

code sample for DataReader

 public SqlDataReader GetRecord(Guid id, string procedureName)
        {

            SqlDataReader resultReader = null;
            SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
            SqlCommand command = new SqlCommand(procedureName, connection);
            command.CommandType = CommandType.StoredProcedure;
            command.Parameters["pID"].Value = id.ToString();
            try
            {
                connection.Open();
                resultReader = command.ExecuteReader(CommandBehavior.CloseConnection);
            }
            catch (Exception ex)
            {
                if (resultReader != null || connection.State == ConnectionState.Open)
                {
                    resultReader.Close();
                    connection.Close();
                }
                throw new PerformanceException(ex.Message, ex.InnerException);
            }

            return resultReader;
        }

Posted in Best Practices of ASP.Net | Tagged , , | 2 Comments