Asp.Net Ajax Tutorials

Windows azure assembly not listed under .Net tab

2011-12-06T09:17:24-08:00

while developing azure application, i stuck with a strange issue.

When i tried to add windows azure assemblies, i was not able to find them under .Net tab on add reference dialogue.

after spending some, I was able to fix this issue. here i have narrated whole problem. hope this can save your time.

Recently I was writing application to rad data from windows azure table storage. I have created windows application to display data from azure table storage.

I need to query data from azure table storage, using windows azure SDK.

These assemblies are:

1) Microsoft.WindowsAzure.Diagnostics
2) Microsoft.WindowsAzure.StorageClient

When I click on Add Reference in my windows application, I was not able to find any assembly in the list of .Net assemblies.

I have tried but not able to find exact reason on this issue. Then after I realized that this was working on my previous application. It was web application.

I have compared all the properties of both the project and find out exact problem.

Cause of problem:

In the project properties we have “Target framework” option, when I see for windows application it was set to “.Net Framework 4 Client Profile”. See figure-1.

So I was not able see windows azure assemblies under .Net tab.
When I inspect my web application, it was set to “.Net Framework 4”. Here I was able to see all windows azure assemblies. See figure-2.

So it was finalized that when there “.Net Framework 4 Client Profile” is selected as “Target framework”, we will not able to reference windows azure assemblies .

Behaviour of this issue:

Because of this setting you can face following issue.

1) You will not able to see windows azure assembly in .Net assembly list.

2) You will not able to reference windows azure assemblies in your application.

3) If you have any class library which includes reference of windows azure assemblies,

And you are trying to add this assembly into your project. Assembly will be added but

It will give you “are you missing an assembly reference?” error.

Resolution:

If you face this issue, you can go to project properties and change “Target framework” To ”.Net Framework 4”.

Microsoft has delivered a new target framework type, to optimize for client applications which run on client only; it doesn’t include windows azure assemblies.

You can see more about .Net Framework Client Profile at

http://msdn.microsoft.com/en-us/library/cc656912.aspx

AJAX Control Toolkit 50927 Released for September 2011

2011-09-27T22:37:21-07:00

A new version of Ajax Control Toolkit has been released.

New version is marked as Release number 50927

New features included

Calendar Date Ranges - You can specify a StartDate and EndDate and restrict the dates which a user can select when using the Calendar.
Twitter Control -- Display tweets associated with a Twitter user or tweets which match a search query.
Gravatar Control -- Display unique images for each user of your website. Users can upload custom Gravatar images at Gravatar.com.

You can find more details on http://ajaxcontroltoolkit.codeplex.com/

Visual Studio 11 Developer Preview with .Net 4.5

2011-09-18T20:42:55-07:00

Visual Studio 2011 Developer Preview with .Net 4.5 has been announced last week.

New features and improvements in core framework are

Ability to limit how long the regular expression engine will attempt to resolve a regular expression before it times out.
Ability to define the culture for an application domain.
Console support for Unicode (UTF-16) encoding.
Support for versioning of cultural string ordering and comparison data.
Better performance when retrieving resources.
Zip compression improvements to reduce the size of a compressed file.
Ability to customize a reflection context to override default reflection behavior through the CustomReflectionContext class.
Managed Extensibility Framework
Asynchronous File Operations

New Features in ASP.Net 4.5 Developer Preivew are

Support for new HTML5 form types.
Support for model binders in Web Forms. These let you bind data controls directly to data-access methods, and automatically convert user input to and from .NET Framework data types.
Support for unobtrusive JavaScript in client-side validation scripts.
Improved handling of client script through bundling and minification for improved page performance.
Integrated encoding routines from the AntiXSS library (previously an external library) to protect from cross-site scripting attacks.
Support for WebSockets protocol.
Support for reading and writing HTTP requests and responses asynchronously.
Support for asynchronous modules and handlers.
Support for content distribution network (CDN) fallback in the ScriptManager control.

New Features in WCF 4.5 are

Simplification of generated configuration files.
Support for contract-first development.
Ability to configure ASP.NET compatibility mode more easily.
Changes in default transport property values to reduce the likelihood that you will have to set them.
Updates to the XmlDictionaryReaderQuotas class to reduce the likelihood that you will have to manually configure quotas for XML dictionary readers.
Validation of WCF configuration files by Visual Studio as part of the build process, so you can detect configuration errors before you run your application.
New asynchronous streaming support.
New HTTPS protocol mapping to make it easier to expose an endpoint over HTTPS with Internet Information Services (IIS).
Ability to generate metadata in a single WSDL document by appending ?singleWSDL to the service URL.
Websockets support to enable true bidirectional communication over ports 80 and 443 with performance characteristics similar to the TCP transport.
Support for configuring services in code.
XML Editor tooltips.
ChannelFactory caching support.
Binary encoder compression support

You can get start with Visual Studio 2011 and .Net 4.5 from here.

Web Forms Model Binding ASP.Net vNext

2011-09-12T22:30:38-07:00

We have already checked functionality of Model Binding in next version of ASP.Net. That is not only interesting feature, there is more on it. With Model Binding we can add Value Provider to our method. Value Provider can be Cookie, QueryString, Form or a Control. Your method will look for the Control ID which is your parameter name in method.
For more details you can checkout below video.

An article for the same you can have a look at Web Forms Model Binding Part 2: Filtering Data

jQuery Mobile Beta 3 Released

2011-09-08T23:06:30-07:00

For mobile web developers, there is a new version of jQuery Mobile has been released.

New version of the jQuery Mobile contains

pushState: to enable clean URL ajax based navigation
beforechangepage event: to help generate your content at proper time
Some issue fixes, etc.

You can download jQuery Mobile Beta 3 from here.

Web Standards Update for Visual Studio 2010

2011-09-07T21:39:16-07:00

Hello Readers,

Check out the video below for Web Standards Update for Visual Studio 2010.

This update provides supports for HTML5 and CSS3. Other features included in this update are Image Optimizer and CSS Essentials.

Thanks

jQuery Control Toolkit

2011-09-07T02:34:12-07:00

Hello ASP.Net Coders,

While some of the good site, I came across a very good resource of jQuery Control Toolkit.
This Toolkit come with some extenders, you can customize extender, you can specify Server Control Id as jQuery selector.

You can find more detail for jQuery Control Toolkit on http://jquery.codeplex.com/

Enjoy the coding

Thanks,
Nirav

Strongly Typed Data Controls in ASP.Net

2011-09-02T06:14:52-07:00

Hello Friends,

In next version of ASP.Net we will get Strongly Typed Data Controls in ASP.Net. With this feature, we can bind a model to our data control and use directly use Model Properties for the binding purpose.

This Strongly Typed Data Controls will aslo help us to avoid simple typing mistakes in binding expression.

You can review link Strongly Typed Data Controls for more details

Thanks

Rendering 3D with CSS and javascript with dom3d

2011-08-08T01:59:55-07:00

A very good post from James Long on how can we render 3D objects with JavaScript and CSS.

Static class vs static member vs Singleton

2011-06-16T00:34:50-07:00

Static class vs Static members

	Static Class	Not Static Class with All Static Methods
1.	This version can’t have instance constructor, and hence we can’t create object of static class. they can contain a static constructor.	This version has constructors and we can create object of this class.
2.	We can’t pass this class as argument of the method.	We can pass this object as argument.
3.	You can’t inherit another class in static class.	You can inherit another class.
4.	Static class can’t be inherited.	This version can be inherited in another class.
5.	All method and fields inside this call must be static.	Not necessary to make all fields/methods to be static. Though C# does not support static local variables.
6.	Static class cannot implement interface.	This version can implement interface.
7.	Method is static class can’t be virtual.	Static method can’t be virtual, we can’t override them. Static methods can be overloaded but not overridden.
8.	Use static class to group methods which are not associated with particular objects, for example, we can use static class for utility methods or methods which behaves like fire and forgot.	Use this version, when your method needs to be used as utility method inside the class, for some internal processing.
9.	The advantage of using a static class is that the compiler can check to make sure that no instance members are accidentally added.	It is more typical to declare a non-static class with some static members, than to declare an entire class as static. Two common uses of static fields are to keep a count of the number of objects that have been instantiated, or to store a value that must be shared among all instances.

Static class vs Singleton

Though both have single instance throughout the application, we can create instance of the singleton instance and can pass it as object in the method, as a result you can use singleton object as normal. This is the huge advantage of singleton over the static class.

Javascript Mistakes You Must Avoid

2011-06-09T23:17:45-07:00

Hi Friends,

I have came across a great post on developers making mistakes while writing JavaScript. Please have a look.
http://www.ifadey.com/2011/05/javascript-mistakes-you-must-avoid/

Thanks,
Nirav

Ajax Control Toolkit released 50508 version

2011-05-11T06:28:51-07:00

Hey friends,

A new version of Ajax Control Toolkit is released (50508).
There are some improvments in ModalPopup, AsyncFileUpload and DropShadow controls.

Though you will require Visual Studio 2010 to use new release of Ajax Control Toolkit.

You can download new binaries from http://ajaxcontroltoolkit.codeplex.com/releases/view/65800

Thanks
Nirav

jQuery 1.6 released, download now

2011-07-31T00:23:25-07:00

Hi Friends,

I am happy to share with you all that a new version of jQuery has been released. jQuery 1.6 available to download and on cdn as well.

A few changes in new version are

$.holdReady() - this allows user to hold the .ready function until some event
.prop() - this allows user to get the value of a property for the first element in the set of matched elements
.removeProp() - remove a property from set of element
other changes are like, .promise(), deferred.pipe(), deferred.always()

You can find more details for jQuery 1.6 release on jQuery blog http://blog.jquery.com/2011/05/03/jquery-16-released/

jQuery 1.6 is also available on Microsoft CDN you can find out details at http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0

Thanks,

LinkButton inside ListView within UpdatePanel cause full postback

2011-05-02T10:14:05-07:00

Hi Friends,

Today I was creating a listing page with ASP.Net 4.0. I wanted below items on the page

A result for my search, I have used ListView for it
Inline editing for 1-2 column of my list
Edit & Update/Cancel button

Generally I am using ImageButton to display Edit/Update/Cancel buttons
This time I thought lets use LinkButton, I have also used AjaxControlToolkit’s HoverMenu extender.

Apply Ajax on the page, I have placed ListView inside UpdatePanel and set ChildrenAsTriggers as true.

Ok, now I have implemented all the items I required on the page. When I clicked on the Edit link, I was surprised, LinkButton was causing Synchronized Postback (Full page postback). There are many causes where your page do full postback like

Page HTML have some unclosed tags
there is some JavaScript error
You have generated control dynamically but forgot to assign ID to your control

Well I have verified all of them but my problem was different, I was totally confused that how to overcome this issue “I have a update panel, have ChildrenAsTriggers true, Ajax framework is loaded, still my LinkButton causing full postback”

I have given a try, I have converted my LinkButton to Button, everything works fine and page is now doing Partial postback. Now I knew that there is a problem with LinkButton.

By lots of trial and error I figured it out, we need to add

<pages clientIDMode="AutoID"></pages>

ClientIDMode specifies, how will ASP.Net 4.0 generates the id attribute for rendered HTML controls/elements. In previous version of ASP.Net there was not any concept of client id generation, but it was similar to AutoID configuration we have set. Currently default settings for client ID is Predictable.

Hope this will help you to solve your problem

Nirav

Generate SQL Server Data dictionary

2011-04-16T06:42:52-07:00

SQL server comes with many built-in Stored Procedures and Views; we know them as system view or stored procedure.

While design of project documentation we often need to generate Dictionary which lists all the tables along with Columns, Data type and Description of columns.

There isn’t any tool or command which Extract this information directly. We can write SQL query using system stored procedures and system views.

1) Using System Stored Procedure.

We have stored procedure called sp_columns. This procedure returns column information for the specified tables or views.

Procedure sp_columns has five parameters. Parameters we are going to use are explained here.

Table_name	This parameter accept name of table without schema, and returns column information. NULL value of this parameter returns Columns for All tables in the database.

table_owner	Takes owner as argument, if specified will returns columns of tables for that schema only.

Here is the query using sp_columns stored procedure.

declare @ColumnTable table(

TABLE_QUALIFIER varchar(100),

TABLE_OWNER varchar(100),

TABLE_NAME varchar(100),

COLUMN_NAME varchar(100),

DATA_TYPE varchar(100),

[TYPE_NAME] varchar(100),

"PRECISION" varchar(100),

"LENGTH" varchar(100),

SCALE varchar(100),

RADIX varchar(100),

NULLABLE varchar(100),

REMARKS varchar(100),

COLUMN_DEF varchar(100),

SQL_DATA_TYPE varchar(100),

SQL_DATETIME_SUB varchar(100),

CHAR_OCTET_LENGTH varchar(100),

ORDINAL_POSITION varchar(100),

IS_NULLABLE varchar(100),

SS_DATA_TYPE varchar(100)

)

insert into @ColumnTable exec sp_columns null,@table_owner='dbo'

select * from @ColumnTable

2) Using System views.

Some system views returns information about table schema defined in the current database.

sys.columns	Returns a row for each column of an object that has columns.

sys.tables	Returns a row for each table object.

sys.systypes	Returns one row for each system-supplied data type.

We can write following query to returns table column information using system views.

select tab.name, cols.name,typs.name,cols.system_type_id from sys.columns cols

inner join sys.tables tab on tab.object_id =cols.object_id

LEFT OUTER JOIN sys.systypes typs on typs.xtype=cols.system_type_id

You can use any of the option to generate Data Dictionary and then Copy result directly in the EXCEL.

You can refer MSDN for more information about views and stored procedures.

As far as my knowledge there is not any option in Management Studio/Visual Studio to generated Data Dictionary.

If you know any better options please let us know.

Hope this will help.

ScriptManager.RegisterDataItem to update control outside UpdatePanel

2011-08-10T21:21:52-07:00

Hi Friends

Today I would like to share an interesting stuff with Ajax. I have seen many of my colleague to use 2 Different UpdatePanel when they want to update a DataBind control and just a single value on the page but outside of UpdatePanel.

Consider a scenario where you are creating a sample application to provide comments threading. And main thread will show total number of comments. Check the sample layout if as below.

So here we have a main thread on the top, below that Total Comments which needs to be updated. There are many ways to do this.

1. Put whole page in UpdatePanel. Each and every content will be updated. This is the easiest way.

2. Put the repeater of comments and Textbox in one UpdatePanel and Total comments in another UpdatePanel. (In this simple layout we may not require, but in real life scenario we have much more complex layout where it could not be possible every time)

3. As we just want to update number of comments in a label. We can use ScriptManager.RegisterDataItem method.

ScriptManager.RegisterDataItem method have 2 override signatures.

1. ScriptManger.RegisterDataItem(Control control, string dataItem)

2. ScriptManager.RegisterDataItem(Control control, string dataItem, bool isJsonSerialized)

This method can be accessed from instance of ScriptManager.

Here is the use of each parameter

control: You need to pass your control for which you are registering the data item

dataItem: String value which will be passed as value to your script manager on client side.

isJsonSerialized: With this Boolean value you can specify that whether string value which you have set as data item is serialized as JSON format.

Now, how does this RegisterDataItem works. RegisterDataItem register a data key and its value while responding to your asynchronous request. Now on client side you need to handle pageLoading event of the script manager.

Here is the code which we will write to achieve output as screenshot.

HTML required

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table>
    <tr>
        <td>
            Hi this is main thread users are commenting on this post.
        </td>
    </tr>
    <tr>
        <td>
            Total Comments:
            <asp:Label ID="lblShowData" runat="server" Text="0"></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            <asp:UpdatePanel ID="updData" runat="server">
                <ContentTemplate>
                    <table>
                        <tr>
                            <td>
                                <asp:Repeater ID="rptComments" runat="server">
                                    <HeaderTemplate>
                                        <ul>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <li>
                                            <%# Container.DataItem %></li>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </ul></FooterTemplate>
                                </asp:Repeater>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:TextBox ID="txtData" runat="server" TextMode="MultiLine"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="btnSubmit_Click" />
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>
        </td>
    </tr>
</table>

JavaScript to handle pageLoading event and set data

var pageReqManger = Sys.WebForms.PageRequestManager.getInstance();
pageReqManger.add_pageLoading(OnPageLoading);
/// To execute on page loading while async postback
function OnPageLoading(sender, args) {
    var dataItems = args.get_dataItems();
    if ($get('lblShowData') !== null)
        $get('lblShowData').innerHTML = dataItems['lblShowData'];

}

In javascript we have firstly retrieved the instance of our script manager. Then we have added pageLoading hander. Now when this handler is called you can get the dataitems in the arguments. So we have get the data item for lblShowData and assign it as innerHTML of the control.

C# code for store and binding

public List<string> Comments
{
    get
    {
        List<string> lstComments = Cache["keyComments"] as List<string>;

        if (lstComments == null)
        {
            lstComments = new List<string>();
            Comments = lstComments;
        }
        return lstComments;
    }
    set { Cache["keyComments"] = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        lblShowData.Text = Comments.Count.ToString();
        rptComments.DataSource = Comments;
        rptComments.DataBind();
    }
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
    // Add comment to list
    Comments.Add(txtData.Text);

    //Bind list to repeater
    rptComments.DataSource = Comments;
    rptComments.DataBind();

    // register data item to scriptmanager
    ScriptManager1.RegisterDataItem(lblShowData, Comments.Count.ToString());

    // set the string empty
    txtData.Text = string.Empty;
}

We have registered the data item in click event of the button. With our ScriptManager1 for lblShowData with the values of our total comments. As we only have simple number to display we have not pass the third parameter for json serialization.

If we think of more scenario we can use this method in many ways.

Let me know in case you have query on this method.

Thanks

Nirav

jQuery UI 1.8.9 Released today

2011-07-31T00:23:25-07:00

Hello Friends,

Its good to know that a new version of jQuery UI has been released today. Released version is jQuery UI 1.8.9.

The change log mainly contains fixes over Draggable and Sortable interactions. Fixes on Accordion, Datepicker and Tabs widgets. There are also localization addition in Datepicker widget.

You can find more detail on below link.

jQuery UI 1.8.9

Thanks

Nirav

Technorati Tags: jQuery UI

Behaviour of disabled controls in Asp.net

2011-07-31T00:21:41-07:00

How to disable controls:

When we are developing web applications we need to disable/enable controls on the form. Controls which supports disabled are BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

Please do not try to disable a control which doesn’t support this attribute it may have weird behaviour.

We can set attribute disabled="disabled" OR $('#ctrlID').attr('disabled','disabled') OR

document.getElementById(' ctrlID'').setAttribute("disabled",'disabled');

We can enable controls by removing disabled from the elements.

What will change in behaviour of controls when you disable them?

If you are working with dynamic web application and you are disabling/enabling controls then you should remember some key effect of disabling control.

1) Disabled controls will not be posted when you submit form.

Because of this if you have changed value in disabled control dynamically by JavaScript. Then new value will not be posted back on the server and your server control will behave like normal html control.

Is there any way to submit disabled control?

In Asp.Net server side form control have one property called submitdisabledcontrols.

Setting submitdisabledcontrols="true" will submit disabled control values on the server.

Never disable hidden field controls.

Even though we set disabled hidden fields will not be submitted. So please keep in mind that you are not disabling hidden fields by knowing or unknowingly. Otherwise your may behave weird.

jQuery autocomplete with Asp.Net WCF service

2011-07-31T00:23:25-07:00

jQuery autocomplete is a very good tool to provide user selection from a number of choices. We can easily create jQuery autocomplete with static JavaScript array. In this article we will see how we can use jQuery autocomplete with ASP.Net and WCF service.

In this article below version of scripts are used

jQuery version 1.4.1

jQuery UI version 1.8.6

We will create 2 example with WCF service.

First of all we will create a WCF service and configure it to response as json format.

We will bind endpoint with webHttpBinding. We will create service with name “AutoComplete” and our interface will be IAutoComplete. We will create an endpoint behavior which uses webHttp behavior. So our web.config file will have configuration as below.

<system.serviceModel>
    <behaviors>
        <serviceBehaviors>
            <behavior name="jQueryExamples.Services.AutoComplete.AutoCompleteBehavior">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="false" />
            </behavior>
        </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="webHttpEndpoint">
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <services>
        <service behaviorConfiguration="jQueryExamples.Services.AutoComplete.AutoCompleteBehavior"
            name="jQueryExamples.Services.AutoComplete.AutoComplete">
            <endpoint address="" binding="webHttpBinding" 
                    contract="jQueryExamples.Services.AutoComplete.IAutoComplete"
                      behaviorConfiguration="webHttpEndpoint">
                <identity>
                    <dns value="localhost" />
                </identity>
            </endpoint>
            <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
        </service>
    </services>
</system.serviceModel>

Now we will add reference of System.ServiceModel.Web to our application, because we will be using some of its features.

Example 1

In our first example of jQuery autocomplete, we will create a WCF service method which will return simple string array.

In our interface we will create method GetTagString which will return us string array.

[OperationContract]
[WebInvoke(Method = "GET", UriTemplate = "GetTagString?term={term}",
BodyStyle = WebMessageBodyStyle.WrappedRequest,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json)]
string[] GetTagString(string term);

In above declaration you will be able to find that apart from OperationContract there are some more attributes are assigned to method. WebInvoke attribute is part of System.ServiceModel.Web. WebInvoke adds meta data to the service method, provide operation behavior and verb on which method will be invoked. Method parameter will define which method will be used for invocation, we will use GET. UriTemplate will define url template in the service and bind url parameter to method parameter. We will use RequestFormat and ResponseFormat as WebMessageFormat.Json.

We will implement the interface and write below method into AutoComplete.svc file.

public string[] GetTagString(string term)
{
    string[] tags = //Your logic to retive tags
    return tags.Where(t => t.StartsWith(term, StringComparison.InvariantCultureIgnoreCase)).ToArray();
}

Currently I have used static array of tags and then filtered it with LINQ to response only those items which are starting with the term our autocomplete have provided.

Now on the aspx page, we will create a html input and then add a script to add auto complete to it.

<div class="ui-widget">
    <label for="tags">
        Tags:
    </label>
    <input id="tags" />
</div>

And our script to initialize autocomplete will be

<script type="text/javascript" language="javascript">
    $(function () {
        $("#tags").autocomplete({
            source: "Services/AutoComplete/AutoComplete.svc/GetTagString"
        });
    });
</script>

In the JavaScript function we have created autocomplete with URL to our AutoComplete.svc as source and followed by our method name which will be requested each time user hit a key.

So it will give us output as below.

This output and method of autocomplete is not much different from the original jQuery example. The only difference is we have created autocomplete with a WCF service.

Example 2

In above example we have created autocomplete with only names. In real life scenario we have different requirements as well. One of the scenario is when we retrieve a tag name we need its id as well. So how we will achieve it with modification in our above example.

To achieve it we need to first change original jquery.ui.autocomplete.js file. We will add our function into this file so that our example works perfect.

As first item we will add a “normalize” option in the autocomplete widget options. Its declaration will be look like-

$.widget("ui.autocomplete", {
        options: {
            appendTo: "body",
            delay: 300,
            minLength: 1,
            position: {
                my: "left top",
                at: "left bottom",
                collision: "none"
            },
            source: null,
            normalize: null
        }
        //Further code

Second step will be the use of normalize function in code. We will modify the call in _response method. Now this method will look like -

_response: function (content) {
    if (content && content.length) {
        content = (this.options.normalize != null) ? this.options.normalize(content) : this._normalize(content);
        this._suggest(content);
        this._trigger("open");
    } else {
        this.close();
    }
    this.element.removeClass("ui-autocomplete-loading");
}

We have put a check that if normalize function defined by us is not null then we will call it otherwise we will call default _normalize function. You must have question that what does this normalize function will do. Normalize function will parse our service response and pass it to autocomplete so that it can generate the output.

HTML for second example is as below -

<div class="ui-widget">
    <label for="tags">
        Tags object:
    </label>
    <input id="tags2" />
    <label id="lblId">
    </label>
</div>

In html we have added a label as “lblId” and we require autocomplete to add id of the tag to this label. You can also use hidden field to store the id. We will modify our WCF method, JavaScript to initialize autocomplete

We will create a class named Tags which will have property of tag name and id.

[DataContract]
public class Tags
{
    [DataMember]
    public int id { get; set; }
    [DataMember]
    public string tagName { get; set; }
}

We have applied DataContract attribute to our class so that it can be transferred with out WCF service.

Our WCF Service Method definition in interface will be as below

[OperationContract]
[WebInvoke(Method = "GET", UriTemplate = "GetTagObject?term={term}",
        BodyStyle = WebMessageBodyStyle.WrappedRequest,
        RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json)]
List<Objects.Tags> GetTagObject(string term);

In above method we have returned a list of our class Tags. Hence implementation of this method will be as follows

public List<Objects.Tags> GetTagObject(string term)
{
    List<Objects.Tags> lstTags = new List<Objects.Tags>();
    //Logic to retive list of tags
    return lstTags.Where(t => t.tagName
    .StartsWith(term, StringComparison.InvariantCultureIgnoreCase))
    .ToList();
}

In above example I have added items manually to list and then filtered it with LINQ to return desired output.

now we will initialize autocomplete with script

$(function () {
    $("#tags2").autocomplete({
        source: "Services/AutoComplete/AutoComplete.svc/GetTagObject",
        normalize: function (items) {
            if (items.length && items[0].label && items[0].value) {
                return items;
            }
            return $.map(items, function (item) {
                return $.extend({
                    label: item.tagName,
                    value: item.id
                }, item);
            });
        },
        select: function (event, data) {
            $('#tags2').val(data.item.tagName);
            $('#lblId').text(data.item.id);
            return false;
        }
    });
});

In above script we have specified two functions in the options. One is normalize and another is select. I will first explain normalize (which I have created with reference from jQuery’s original _normalize function) it will have items as input. When jQuery request to our service it will parse the response as json and pass it to normalize function. In first if block we have checked that whether json output contains label and value as attribute then we will return same items as output to process further. We will note here that if we always want to use label and value as class member then we do not need to modify autocomplete.js file. Now after the if block we have mapped our data with assigning tagName and id to label and value respectively. So autocomplete can parse our item and display us the autocomplete menu.

In select function we will specify that when user select an item how should it be processed with the data. In our case we have assigned tagName to our textbox value and id to our label text.

When we run our code it will provide us output as below

With this logic you can create your own autocomplete and even you can convert your dropdowns into a nice autocomplete.

Let me know if you have any query over it.

Thanks

Nirav

del.icio.us Tags: jquery,autocomplete,wcf

BlogEngine.NET 2.0 Release Candidate download available now

2010-11-24T08:27:56-08:00

Release Candidate of BlogEngine 2.0 is available for download now.

In BlogEngine 2.0 below are some of new features are listed

A completely new Control Panel
Syntax Highlighter
Anti spam comment filter
Captcha for reduce comment spam
Included jQuery
Media element extension for HTML5 video support
JS/CSS minimization

Most stable version for BlogEngine is 1.6 till now.

You can find more information for BlogEngine on blogengine.codeplex.com You can try new BlogEngine 2.0 by downloading it from BlogEngine 2.0 Release Candidate

Keep up the good work BlogEngine team.

Technorati Tags: BlogEngine.NET,BlogEngine.NET 2.0 RC

How To: Extension Methods with C#, definition and implementation of Extension Methods in code

2010-11-09T10:08:40-08:00

We all know that there are many types in .Net Framework. Each type contains value, property(ies) and Methods. We can create derived types to use existing type properties and methods and add our own custom methods and properties. But in some cases we do not need to add any properties but only need to add some method which can be used, Extension Method provides a functionality with which we can create a method and use it with existing type and there is no need to create a derived type, isn’t it interesting?

In this article we will see how to define an Extension Method and how to use it. An Extension Method is static method to specially work with an existing type, but it will be called like it is part of original type. In coding there is not any difference between call of an y method defined in type or an Extension Method of the type.

As a type we can consider string, int, arrays of any type and even List, Collection or a DateTime can be treated as a type and we can create extension method for that.

First of all we will take example of string and create an extension method for it. Most of the time we need to check length of the string and then we need to remove extra characters beyond certain limit, lets create an extension method for it.

public static class StringExtension
    {
        public static string TrimToLength(this string objString, int Length)
        {
            return objString.Length > Length ? objString.Substring(0, Length) : objString;
        }
    }

In above example we have created a static class which will contains extension methods for string. And we have created a static method containing 2 arguments. Now first argument defines on which type the method will work and this argument is preceded with modifier this. Second argument and onwards if any will be arguments in the client calls. Method return types define what output our method will return. Now lets see how we will use above extension method in our code.

string s = "This is a dummy string";
Console.WriteLine(s.TrimToLength(100));
Console.WriteLine(s.TrimToLength(6));

Above implementation will generate output as below

This is a dummy string

This i

Lets take an example of DataReader. When we use data reader and we are retrieving data from various method we are using dataReader.GetString(dataReader.GetOrdinal("fieldName")) this method will raise error if the field value is null so we will modify our code to check the whether field is null or not with dataReader.IsDBNull(dataReader.GetOrdinal("fieldName")). Generally there are many fields and we need to check null for all of them. Lets see if we create extension method for it how much easily we can do for all of the fields.

public static class DataReaderExtension
{
    public static string GetStringOrDefault(this IDataReader dataReader, string fieldName)
    {
        return dataReader.IsDBNull(dataReader.GetOrdinal(fieldName)) 
            ? string.Empty 
            : dataReader.GetString(dataReader.GetOrdinal(fieldName));
    }
}

Implementation of the above method will be as below (dr is a SqlDataReader)

dr.GetStringOrDefault("fieldName1");
dr.GetStringOrDefault("fieldName2");
dr.GetStringOrDefault("fieldName3");

So you can see that we do not need to repeat our code of check of db null and get ordinal and we can directly use our single method.

We can create extension method for DateTime to calculate difference between date instance and current date. We can also create extension method with all the types which are inherited from System.Object.

Yours,

Nirav

del.icio.us Tags: Extension Method,C#

How to check query performance without profiler.

2010-09-20T22:06:43-07:00

If you don’t have profiler installed and you just want to find out execution statistics of procedures, you can take help of DMVs. You can write T-SQL queries using DMV to gather execution statistics of SQL procedures.

You can extract following information using DMV regarding Procedure.

· How many times your stored procedure executed.

· Total number of cached plans.

· Identify Missing Indexes Using.

· Buffer Cache hit ratio example.

· SQL CLR Memory Usage

· And many more information we can find from below references.

Here is the sample query using DMV which if found from some good sites.

SELECT OBJECT_NAME(st.objectid,dbid) StoredProcedure
      ,max(cp.usecounts) Execution_count
 FROM sys.dm_exec_cached_plans cp
         CROSS APPLY sys.dm_exec_sql_text(cp.plan_handle) st
 where DB_NAME(st.dbid) is not null and cp.objtype = 'proc'
   group by cp.plan_handle, DB_NAME(st.dbid),
            OBJECT_SCHEMA_NAME(objectid,st.dbid), 
   OBJECT_NAME(objectid,st.dbid) 
 order by Execution_count desc.

SELECT TOP ( 100 )
        p.name AS [SP Name] ,
        deps.total_logical_reads AS [TotalLogicalReads] ,
        deps.total_logical_reads / deps.execution_count AS [AvgLogicalReads],
        deps.execution_count,
        ISNULL(deps.execution_count / DATEDIFF(Second, deps.cached_time,
                                           GETDATE()), 0) AS [Calls/Second],
        deps.total_elapsed_time,
        deps.total_elapsed_time / deps.execution_count AS [avg_elapsed_time],
        deps.cached_time
FROM    sys.procedures AS p
        INNER JOIN sys.dm_exec_procedure_stats
                       AS deps ON p.[object_id] = deps.[object_id]
WHERE   deps.database_id = DB_ID()
ORDER BY  deps.execution_count DESC

References:

http://glennberrysqlperformance.spaces.live.com/blog/cns!45041418ECCAA960!828.entry

http://technet.microsoft.com/en-us/library/cc966540.aspx

http://www.databasejournal.com/features/mssql/article.php/3687186/Monitoring-Stored-Procedure-Usage.htm

http://blogs.msdn.com/b/sqlprogrammability/archive/2007/01/23/4-0-useful-queries-on-dmv-s-to-understand-plan-cache-behavior.aspx

http://www.simple-talk.com/sql/t-sql-programming/dmvs-for-query-plan-metadata/

Though DMV are very powerful and we can find out any information about query execution. we can’t spend time to change them as our requirement. The thing we can do is keep DMV for some test cases ready and just run them when it comes to performance testing.

Profiler:

SQL profiler provides GUI to gather same data, only good thing about using SQL profiler will give you all the information separated by events, let’s say If you want to know that which statement in procedure force recompilation of plan?.

Well, if you prefer DMV you have to write DMV to find out how many time plans have re-used, and if you are running SQL profiler it will just log all the events and will show all the data at all point of execution. Also SQL profiler has many pre-defined templates which come handy when we are running profiler for collection different types of data.

You can see http://support.microsoft.com/kb/243586 for more details about Troubleshooting stored procedure recompilation

But the point when I would like to Use DMV over Profiler is, when your application is in development mode you can use SQL profiler wisely running and seeing data. But once application is running on production server it is very time cumbersome to run profiler and then find which procedure have taken maximum time to execute.

In this case you can just run one Query and result will be in front of you….NICE….

Hope this will help you.

Any input always invited.

CustomValidator validation in Repeater with RegisterExpandoAttribute and ClientValidationFunction JavaScript

2010-11-13T09:58:27-08:00

Hi All,

ASP.Net comes with many validators, one of the validator is CustomValidator. We can use custom validator in 2 ways, either client side or server side validation.

In this post I will provide information specifically on client side validation. Client side validation is achieved with JavaScript function. JavaScript function sample is as below

function MyClientValidation(source, arguments) {
       if ( your validation condition ){
            arguments.IsValid = true;
       } else {
            arguments.IsValid = false;
       }
}

Now we will call above function with ClientValidationFunction property of custom validator mentioned as below.

   1:  <asp:CustomValidator ID="MyValidator" runat="server" ClientValidationFunction="MyClientValidation"></asp:CustomValidator>

It is simple to call client validation function with a custom validator.

Now you must have question, why I am writing this basic thing for a client validation. Client validation function is really simple when we write validator and control which we are validating both are on page directly. But there is a scenario where this simple method will not work.

In this post I will explain how to use CustomValidator with client side validation when validator is within a Repeater or a ListView control.

We will go through scenario when a CustomValidator is inside a Repeater control. We will have 3 items in Repeater.

A CheckBox control
A TextBox control
And a CustomValidator

Now as per scenario we need to validate TextBox text when check box for same row is selected.

Below will be html for the Repeater:

<asp:Repeater ID="rptItem" runat="server" OnItemDataBound="rptItem_ItemDataBound">
      <HeaderTemplate>
          <table>
      </HeaderTemplate>
      <ItemTemplate>
          <tr>
              <td>
                  <asp:CheckBox ID="chkSelectItem" runat="server" />
              </td>
              <td>
                  <asp:TextBox ID="txtToValidate" runat="server"></asp:TextBox>
              </td>
              <td>
                  <asp:CustomValidator ID="cValidation" runat="server" ClientValidationFunction="MyClientValidation"
                      ErrorMessage="Invalid"></asp:CustomValidator>
              </td>
          </tr>
      </ItemTemplate>
      <FooterTemplate>
          </table>
      </FooterTemplate>
</asp:Repeater>

I have registered item data bound event over here to do some code.

We have set the html for our scenario, now custom validator need to validate only those textbox for which corresponding checkbox is selected. We will achieve it with ClientScript.RegisterExpandoAttribute method. ClientScript.RegisterExpandoAttribute is used to register custom attributes for your ASP.Net server controls on runtime. Below is the code to register custom attributes.

protected void rptItem_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
      if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
      {
          CheckBox chkSelectItem = e.Item.FindControl("chkSelectItem") as CheckBox;
          TextBox txtToValidate = e.Item.FindControl("txtToValidate") as TextBox;
          CustomValidator cValidation = e.Item.FindControl("cValidation") as CustomValidator;

          if (chkSelectItem != null && txtToValidate != null && cValidation != null)
          {
              ClientScript.RegisterExpandoAttribute(cValidation.ClientID, "chkId", chkSelectItem.ClientID);
              ClientScript.RegisterExpandoAttribute(cValidation.ClientID, "txtId", txtToValidate.ClientID);
          }
      }
}

Once we register above method in code behind of page and run the page, it will register some script dynamically as below.

var MainContent_rptItem_cValidation_0 = document.all ? document.all["MainContent_rptItem_cValidation_0"] : document.getElementById("MainContent_rptItem_cValidation_0");
MainContent_rptItem_cValidation_0.chkId = "MainContent_rptItem_chkSelectItem_0";
MainContent_rptItem_cValidation_0.txtId = "MainContent_rptItem_txtToValidate_0";
MainContent_rptItem_cValidation_0.errormessage = "Invalid";
MainContent_rptItem_cValidation_0.evaluationfunction = "CustomValidatorEvaluateIsValid";
MainContent_rptItem_cValidation_0.clientvalidationfunction = "MyClientValidation";

Now we need to modify our JavaScript function in such a way that will use our custom registered attributes to validate the control. Modification is as below.

function MyClientValidation(source, arguments) {
      var chkBox = document.getElementById(source.attributes["chkId"].value);
      var txtBox = document.getElementById(source.attributes["txtId"].value);
      if (chkBox.checked == true) {
          var re = new RegExp("[0-9]+");
          if (re.test(txtBox.value)) {
              arguments.IsValid = true;
          }
          else {
              arguments.IsValid = false;
          }
      } else {
          arguments.IsValid = true;
      }
}

Now we have set all, our validation function will validate textbox with numeric value and non empty and should only validate those textboxes for which checkbox is checked.

Here is the output of our code.

You can modify the JavaScript function as per your requirement. also you can register more expando attributes if you require. But note that it will rendered on the client side and will considerably increase your client script.

Now if you are binding your repeater in an UpdatePanel then you need to register the expando attribute somewhat differently as below

   1:  ScriptManager.RegisterExpandoAttribute(MyUpdatePanel, cValidation.ClientID, "chkId", chkSelectItem.ClientID);

   2:  ScriptManager.RegisterExpandoAttribute(MyUpdatePanel, cValidation.ClientID, "txtId", txtToValidate.ClientID);

Hope you liked this post and it helped you.

Any question or suggestion is welcome.

Thanks,

Nirav

del.icio.us Tags: javascript,.net customvalidator,expando attribute,custom attribute

Manipulate Dynamic DOM elements in JavaScript with JQuery

2011-07-31T00:25:22-07:00

JQuery have a huge set of selectors to manipulate DOM elements. But when it comes to manipulate dynamically generated elements it needs some logic to access all of them and perform operation.

Ex. Suppose you want to check all checkboxes inside GridView OR any DataBound control, you need to loop over them and perform operation.

To loop over them you need to access them by ID or by class, now because IDs are dynamically generated you can’t access them directly. You can have two solutions in this scenario.

Case-1: You can give unique class to them and find them by class name.

Suppose you have a Grid having textboxes in one column. You want to change text of all of them to

‘Deleted’, when user check the checkbox in Header.

<asp:GridView ID="grvProducts" runat="server">

<asp:TemplateField>

<asp:CheckBox ID="chkAllProduct" runat="server" onclick="chkSetStatus_Click(this.checked)" />

</HeaderTemplate>

<asp:TextBox ID="txtStatus" runat="server" CssClass="dummyForSelect"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

Here is the function which will perform this operation.

function chkSetStatus_Click(ischecked) {

$('.dummyForSelect', $("#dvProducts")).each(

function(d, obj) {

if(ischecked)

obj.value = 'Deleted';

else

obj.value = '';

});

}

Case-2: You can use pattern of generated IDs and find them using regular expression.

Suppose you have a Grid having Checkboxes in one column. You won’t to check all when checkbox in the header checked, and remove selection when user unselects it.

<asp:GridView ID="grvProducts" runat="server">

<asp:TemplateField>

<asp:CheckBox ID="chkAllProduct" runat="server" onclick="chkAllProduct_Click(this.checked)" />

</HeaderTemplate>

<asp:CheckBox ID="chkProduct" runat="server" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

You can’t use CssClass here because it will not work for you, you have to use pattern in which ID of checkboxes is generated.

ID generated by asp.net will be “grvProducts_ctl03_chkProduct”, we need to make RegEx to find out checkboxes with such pattern and make operation on them.

So our RegEx will look like this var rExp = /.*grvProducts.*chkProduct/;

Using this we can write JavaScript function below to finish task.

function chkAllProduct_Click(ischecked) {

var rExp = /.*grvProducts.*chkProduct/;

$('input:checkbox', $("#dvProducts")).each(

function(d, obj) {

if (rExp.test(obj.id)) {

obj.checked = ischecked;

}

});

}

This is the tasks becomes too easy because of the JQUERY. Please put your suggestion here if any.

Hope this will help you.

Thanks,

Haresh Dhameliya

Performance consideration using collection .Net framework

2011-07-31T00:45:31-07:00

.Net framework is loaded with good amount of collection to make programming as easier, when we are developing small application it is ok if we don’t consider which

Programming practice is batter then other. But if we are working on any application having enterprise customers we must have to think about which programming element is batter over other. Here I have tried to make some flash over this.

1) Array:

· Use strongly typed array if you don’t won’t much operations like searching and sorting.

· Strongly Arrays gives best performance because they avoids boxing and unboxing.

2) Iteration:

· Index based iteration will be efficient then enumerating (for each). Use loops for very big size collections.

3) Collections:

· Prefer Array over Collection for storing Value types, this will avoid boxing and unboxing.

· Use strongly typed collection, Use StringCollection for storing string instead of ArrayList.

· Use binary search method while searching large size ArrayList.

· Store small amount of data in ListDictionary instead of Hashtable.

· Use StringDictionary for storing strings.

· Avoid using SortedList if you are performing add/update operation frequently, use ArrayList instead.

· If you are Using ArrayList declare it with approximate possible length, this will save memory, remember that doing this you will not lost variable length feature of ArrayList.(e.g. Use ArrayList arrList = new ArrayList(4);)

Any inputs will always be accepted.

Thanks,

Haresh Dhameliya.