Buddying Programmer

How to cancel all the old XHR (http / ajax ) requests on state change (url change) - AngularJS Interceptor

2014-08-17T23:31:00.000-07:00

I am working on an AngularJS app which earlier was a jquery based web app. Still some global utilities are using jquery and we haven't yet converted that fully to AngularJS.

The whole app workflow is now handled with state changes using Angular UI Router. So, on state change, we will send the XHR requests for partial templates which will be filled on content area and also other functionalities required for the new state.

Now, we face an issue. If we switch the navigation fast.. ie. if we change state fast, the html of the old state is first showing on the content area, even though it is not relevant any more.

So, I did some google search and found some useful posts.

Cancelling Ajax requests in AngularJS Applications

Interceptors in AngularJS and Useful Examples

Aborting An AJAX Request In AngularJS Using httpi

Here is the summary of what I got from these posts and others:

1. We can create a custom interceptor for AngularJS http requests. With this custom interceptor, we can add some custom functionalities for the following states:
a. request - On request success
b. requestError - On request failure
c. response - On response success
d. responseError - On response failture

2. Jquery Ajax has a ajaxSend function. In that we can get the xhr object.

So, lets do this step by step. I am not going to tell how to create the interceptor because which is clearly given in the above posts.

First we need to save all the requests so that we can cancel them later if needed.

So, first lets create an empty object.

In currentRequests, I have created two objects, http and ajax, for handling angular http requests, and jquery ajax requests respectively.

First, we will save the jquery ajax requests using the ajaxSend function.

Here we will get xhr as a parameter. So, we just need to save it. I am saving url also as the key, in case it is required at a later point.

Now, we have to save the Angular http requests.For the we have to check the request property of our custom Interceptor. request function has a config parameter which contains all the info for the http request. In that, timeout property is the one we are interested in. If we check the angular code, we can see that, timeout is a promise which if resolved will do xhr abort. So, to use this, we we create a custom deferred object using $q and we will save the deferred object.

In this code, we are creating the deferred object, deferred. Promise object of the deferred is passed to config.timeout property. We will save our deferred object in currentRequests object.

Now that we have saved all the requests, we just need to loop through each xhr objects and just abort it.

I haven't finalized on it. Please add your suggestions/corrections in the comments.

You can see the gist here - GlobalAjaxInterceptor

Full automation of Protractor E2E tests using Grunt - Part 2

2014-03-22T03:33:00.003-07:00

This is a continuation of the article series on automating protractor tests using grunt. You can see the first part here

In this part we will be doing the following tasks.

Adding the setup tasks to grunt to make the whole process easier to start.
Adding an HTML reporter

Adding the setup command tasks

When you create a repo, you may want to clone this repo on several machines. Or, when someone else wants to use your repo to use in his/her project. When they do that, they also have to go through all the basic setup that you have done like installing selenium, chromedriver etc. We don't want that.

We are doing all our setup on the command console. Then, why not automate it? Is there any grunt plugin for that? Yes. There is. We can use grunt-shell-spawn for running all the shell commands.

Lets add grunt-shell-spawn module to our project.

Now, we will add the shell-spawn task to Gruntfile.

You can see that I have added two options. 'protractor_install' and 'npm_install'. It is better to add an npm install before we are installing chrome driver and selenium just to make sure that, everything is ready beforehand.

Now we will add the install task. I have added both 'npm_install' and 'protractor_install' to the install task.

Now, if we do a grunt install on the command console, it will show as everything uptodate, since we have already installed selenium and chromedriver in the current project folder.

PS: You can see some warning. Please ignore that for now. This is because we haven't added the README.md file and repo to the project, which we will add at the end.

To demonstrate the usefulness of what we did now, lets make a copy of our project folder. Make sure that, you are not copying the node_modules folder. I copied the files to 'exampleCopy' folder. Go to this copy folder in the command console.

Now, if we do the grunt install, everything should work, right? Let's see.

It is saying that a local copy of grunt is required. So, we have to do an npm install before we call any grunt tasks. Let's do that.

1. npm install

2. grunt install

Now you are ready to do the protractor tests. So, any other person using this repo only need to run two commands "npm install" and "grunt install" and they are ready to go.

Adding the HTML Reporter

When we run the tests, we can see that tests are passing or failing in the command console. What if we have hundreds of tests and also want to keep a record of the test results whenever we run the tests? We need test reporters for that.

Protractor gives the options to add onPrepare function property on its configuration file. This onPrepare function will be called before each tests. Jasmine test framework(which we are using inside protractor) provides the option to add test reporter. We will get the metadata about each test by using these two configurations.

There is a node module available for generating screenshots for each tests. protractor-screenshot-reporter. However this doesn't process the meta data and gives us the result in a readable format.

I couldn't find a node module doing this for protractor. So, I created a module for generating this HTML report, on top of protractor-screenshot reporter, protractor-html-screenshot-reporter. What it does is generate an HTML report with all the details of the test like status, browser used, message, link to screenshot etc. (If you are finding some other modules which are doing the same, please add in the comments. )

Lets install protractor-html-screenshot-reporter module in our project.

We need to add this reporter in the Protractor configuration file.

1. require the protractor-html-screenshot-reporter module and assign to a variable.

2. add this reporter on the onPrepare function.

onPrepare: function() {
      // Add a reporter and store screenshots to `screnshots`:
      jasmine.getEnv().addReporter(new HtmlReporter({
         baseDirectory: 'screenshots'
      }));
   },

3. Run the test using grunt command. It will run the default task in the Gruntfile.

We can see that the tests are passing. Lets see if the reports are generated.

Screenshots folder is created.

Inside the screenshots folder, one json and png with a guid filename is available. This is the metadata and screenshot respectively for the single test. There is also a combined.json which combines all the metadata into a single file and a reporter.html file which shows all the test reports.

Opening the reporter.html looks like below.

Clicking on View link opens the screenshot image also.

So, now you have an html reporter ready. But, there is one issue though. Whenever you run the tests, the reporter files are getting overridden. If I want to keep a track of tests, this is not going to help.

protractor-html-screenshot-reporter provides the option of pathBuilder function property to give your own dynamic paths. We will add this in Protractor configuration file.

  onPrepare: function() {
      // Add a reporter and store screenshots to `screnshots`:
      jasmine.getEnv().addReporter(new HtmlReporter({
         baseDirectory: 'screenshots',
         pathBuilder: function pathBuilder(spec, descriptions, results, capabilities) {
          
            var monthMap = {
              "1": "Jan",
              "2": "Feb",
              "3": "Mar",
              "4": "Apr",
              "5": "May",
              "6": "Jun",
              "7": "Jul",
              "8": "Aug",
              "9": "Sep",
              "10": "Oct",
              "11": "Nov",
              "12": "Dec"
            };

            var currentDate = new Date(),
                currentHoursIn24Hour = currentDate.getHours(),
                currentTimeInHours = currentHoursIn24Hour>12? currentHoursIn24Hour-12: currentHoursIn24Hour,
                totalDateString = currentDate.getDate()+'-'+ monthMap[currentDate.getMonth()]+ '-'+(currentDate.getYear()+1900) + 
                                      '-'+ currentTimeInHours+'h-' + currentDate.getMinutes()+'m';

            return path.join(totalDateString,capabilities.caps_.browserName, descriptions.join('-'));
         }
      }));
   },

I am just using a basic function to give the folder name as the current date and time and browser.

Note that I am using the path module for creating the file path (path is a native node module for handling and tranforming file paths. ). Make sure that, you have required the path and assigned to a variable.

Lets run the test again using grunt command in command console. As expected tests are running successfully.

If we check the project folder we can see that, the report is now generated in the path 'screenshots/22-Feb-2014-5h-58m/chrome'. Great. Now, on seeing the folder names itself, you know when the test was run and on which browser.

Finally, lets make this project ready to add as a git repo.

1. It is not a good a good practice to push node_modules directory to the repo. In order to avoid node_modules to be pushed to git, we need to add it to .gitignore file.

Create a new file in the root folder with name as .gitignore.

We don't want screenshots and node_modules folder to be added in git. So, I have added both names in .gitignore.

2. We will also add the repository details to package.json.

3. Also, create a README.md file in the root folder and add some description of your project.

Finally, we are ready to push to the repo.

More Requirements

Now that we are in a good state, we can check the further requirements.

Generating tests based on style guide
Doing CSS Regression testing

We will cover that in the coming articles. Stay tuned.

Please share your comments.

All the changes are added on github repo - protractor-e2e-bootstrap

Full automation of Protractor E2E tests using Grunt - Part 1

2014-03-18T01:37:00.000-07:00

Everyone now talking about Test Driven Development(TDD), Behaviour Driven Development(BDD) and all. I also got interested in the topic and tried to learn more about it. I tried several frameworks like Jasmine, Mocha, Siesta(for an ExtJS application), but couldn't go further on this. I always ended up in stopping after doing some sample tests

I think one reason for that could be that, I didn't see the practical use of Test
Then came a requirement in our project to refactor an existing application. Before I start into details of testing, let me give you some insights of the current app structure.

Half of the application is based on jQuery.
Other half is the part which got converted to Angular recently, but still not completely. Some global jQuery plugins are still used as it is in Angular enabled pages

Now the requirement is we need to convert two pages to Angular without breaking any existing functionality or styles. So, the first time I am seeing a great need of Testing.

Since ours is a web application, we are now mostly interested in browser testing. We have got an automation testing in selenium available. But that is for testing in the production site. How do we do the browser testing in localhost (local environment), with the new changes?

Here comes the Protractor for our rescue. There are already some content available in net on Protractor, setting up and all. However, most of the tutorials are mainly focused on Linux or MacOS, not windows. I found it difficult to setup the protractor.

If we don't find it very easy to use, we will stop using and modifying the tests, because we are all lazy :-).
I was looking everywhere to find ways to make it as easy as possible to setup and start testing. So, we should automate it. What I would have done if Grunt was not there.

So, Protractor + Grunt combination seems perfect. So, I decided to try that. I am going to write about all the steps of setting up Protractor in Grunt and the issues I have faced.

I will be also adding the samples to the following repository, so that, anyone can try it out.

Protractor-e2e-bootstrap Repo

Setting up the project

Requirements:
1. Install Node.js
2. Install Grunt-cli (Get more details here)

We will first setup a basic project by running the command 'npm init'

It will ask for a few questions and you will get a package.json created for you.

Create a folder 'specs'. We will put all our tests in specs folder. (You can give any name you want)

Installing Protractor

Lets first install Protractor.

You can install protractor globally also. Then you can run test directly from the command line using protractor command.

But since our goal is to automate the process, global installation is not required.

Notice the --save-dev argument given when we did the npm install. By giving an attribute like this, the installed module name will be added to package.json under 'devDependencies' automatically. (--save will add the module name under 'dependencies' property)

Adding Grunt

Now we will add Gruntfile.js to our root folder. This file is required for grunt to run the tests.

A minimum configuration Grunt file with jshint task added is given below.

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    jshint: {
      files: ['Gruntfile.js', 'specs/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }

    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');

  grunt.registerTask('default', ['jshint']);

};

For this to work, we need to install the jshint grunt plugin.

For the protractor to be run as a grunt task, we need to wrap it as a grunt plugin. There is already a grunt plugin for that, 'protracter-grunner'. We will install that now.

Adding Protractor configuration to Grunt

Now, we will add the protractor. We can put all the configuration of protractor in grunt file itself. But that will be very messy. So we will put all the configuration of protractor to a separate file.

You can get a sample protractor configuration file from the Protractor repo

https://github.com/angular/protractor/blob/master/referenceConf.js

We are going to use the following configuration file with basic settings.

// A reference configuration file.
exports.config = {
  // ----- How to setup Selenium -----
  //
  // There are three ways to specify how to use Selenium. Specify one of the
  // following:
  //
  // 1. seleniumServerJar - to start Selenium Standalone locally.
  // 2. seleniumAddress - to connect to a Selenium server which is already
  //    running.
  // 3. sauceUser/sauceKey - to use remote Selenium servers via SauceLabs.

  // The location of the selenium standalone server .jar file.
  seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.40.0.jar',
  // The port to start the selenium server on, or null if the server should
  // find its own unused port.
  seleniumPort: null,
  // Chromedriver location is used to help the selenium standalone server
  // find chromedriver. This will be passed to the selenium jar as
  // the system property webdriver.chrome.driver. If null, selenium will
  // attempt to find chromedriver using PATH.
  chromeDriver: 'node_modules/protractor/selenium/chromedriver',
  // Additional command line options to pass to selenium. For example,
  // if you need to change the browser timeout, use
  // seleniumArgs: ['-browserTimeout=60'],
  seleniumArgs: [],

  // If sauceUser and sauceKey are specified, seleniumServerJar will be ignored.
  // The tests will be run remotely using SauceLabs.
  sauceUser: null,
  sauceKey: null,

  // ----- What tests to run -----
  //
  // Spec patterns are relative to the location of this config.
  specs: [
    './specs/*.js'
  ],

  // ----- Capabilities to be passed to the webdriver instance ----
  //
  // For a full list of available capabilities, see
  // https://code.google.com/p/selenium/wiki/DesiredCapabilities
  // and
  // https://code.google.com/p/selenium/source/browse/javascript/webdriver/capabilities.js
  capabilities: {
    'browserName': 'chrome'
  },

  // A base URL for your application under test. Calls to protractor.get()
  // with relative paths will be prepended with this.
  baseUrl: 'http://localhost:9999',

  // Selector for the element housing the angular app - this defaults to
  // body, but is necessary if ng-app is on a descendant of

  rootElement: 'body',

  // ----- Options to be passed to minijasminenode -----
  jasmineNodeOpts: {
    // onComplete will be called just before the driver quits.
    onComplete: null,
    // If true, display spec names.
    isVerbose: false,
    // If true, print colors to the terminal.
    showColors: true,
    // If true, include stack traces in failures.
    includeStackTrace: true,
    // Default time to wait in ms before a test fails.
    defaultTimeoutInterval: 10000
  }
};

We will be modifying this file in a bit. For now, lets keep it like this.

We need to add the protractor task in Gruntfile.

 },
    protractor: {
      options: {
        keepAlive: true,
        configFile: "protractor.conf.js"
      },
      singlerun: {},
      auto: {
        keepAlive: true,
        options: {
          args: {
            seleniumPort: 4444
          }
        }
      }
    }

  });


  grunt.loadNpmTasks('grunt-protractor-runner');

You can see that, I have added two options. auto and singlerun. For 'auto', I am giving keepAlive as true. This setting can be run if we need to run tests on each modification. 'singlerun' opiton will run just once and stop the task.

Finally, register the 'singlerun' task to grunt.

grunt.registerTask('default', ['jshint', 'protractor:singlerun']);

Now, that we have done the basic set up. For running protractor from grunt, lets add some test.

Adding the tests

Lets take a basic test which is given in Protractor site and save in 'specs' folder.

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('http://www.angularjs.org');

    element(by.model('yourName')).sendKeys('Julie');

    var greeting = element(by.binding('yourName'));

    expect(greeting.getText()).toEqual('Hello Julie!');
  });
});

Most of it is self explanatory. Protractor is a wrapper around selenium Selenium WebdriverJS with its angular flavour.

The runner exposes global variables browser, by and element. The browser variable is a wrapper around the WebDriver instance. We use the browser variable for any navigation or for grabbing any information off the page. element and by is used for selecting an HTML element, using various selectors. You can get more details on Protractor and WebdriverJS here

So, what this test does is given below:

1. browser opens the url http://www.angularjs.org
2. Gets the input having ng-model="yourName" and set the value as 'Julie'
3. Gets the element which binds the same model.
4. The expectation is that, the binding value is changed to 'Hello Julie!'

Installing Selenium and Chromedriver

Ok... So the test is ready. Now, lets try running this. Wait a minute.. we haven't installed Selenium. A standalone selenium server, and chromedriver is required to run Protractor. Luckily for us, Protractor npm module ships all the required items with it.

'webdriver-manager update' will install Selenium and Chrome driver and chromedriver. .

'webdriver-manager start' command will start the selenium server

Running Test

Keeping this command window open, open another console. Lets run the test using 'grunt' and see what happens.

You can see that browser is opening up and goes to angularjs.org.

Test is passing!!!

Improvements

However, there are some still some improvements needed.

1. I don't want to do the webmanager-update whenever I clone this project to another location. I want to make the installation easy.
2. The reports are just showing in command line. I want to see the reports in HTML with some screenshots also if possible.
3. And, some other improvements..

We will cover that in the next post. Stay tuned.

All the files are available in https://github.com/jintoppy/protractor-e2e-bootstrap

Update: Part 2 of this article series is available here.

Javascript Puzzle - 2

2013-12-18T00:33:00.002-08:00

Courtesy: A Javascript conference video. I forgot the name of the conference. Will update.

var name = 'Mr. Bond';

(function(){

if(typeof name === 'undefined'){

var name = "Mr. Bond";

sayHello(name);

} else {

alert(name);

}

})();

function sayHello(name){

alert('hello, ' + typeof name !== 'undefined'? name: 'Mr. Robert!');

}

What this alerts? And, give me the reason for that.

JavaScript Puzzle - 1

2013-12-18T00:29:00.002-08:00

Courtesy: A Javascript conference video. I forgot the name of the conference. Will update.

var END = 9007199254740992; //Math.pow(2,53)
var START = END - 100;

var count = 0;
for(var i = START; i<= END; i++){
count++;
}

alert(count);

What this alerts? And, give me the reason for that.

Browser rendering performance testing - document.createfragment vs jquery-element

2013-10-22T07:13:00.002-07:00

After reading the post on browser rendering perforamnce, I tried some performance tests. You can see the test in the following url:

http://jsperf.com/document-createfragment-vs-jquery-element

See the chrome result. Doing with jquery element is faster than doing with document.createDocumentFragment. Surprising for me!!

Console is undefined error on console.log

2013-10-16T09:32:00.002-07:00

I got error in my script on console.log('sample text'). Only possibility I could think of is I am adding this in IIFE. Is this could be an issue? I will post the udpate

Browser specific CSS Hacks

2013-10-01T11:49:00.001-07:00

1. Webkit browser

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* put your styles here */
}

2. IE8

use the \0/ attribute

.elementclass
{
width: 50px\0/; /* This will get only applied to IE8 */
}

3. IE7

use the *

.elementclass
{
*width: 50px; /* This will get only applied to IE7 */
}

4. IE9
using the :root attribute

:root .elementclass
{
/* this style will be applied to IE9 only */
padding-top: 5px;
}

Web RTC Project in Backbone

2013-09-29T02:24:00.001-07:00

I have created a WebRTC project in backbone so that, the code will be easy to follow.

https://github.com/jintoppy/webrtc-backbone

All web rtc related functions are given in the webrtc-backbone / public / js / services / WebRTCService.js file.

Duff’s Device pattern in JavaScript

2013-09-18T07:20:00.001-07:00

Duff’s Device pattern in JavaScript

Duff’s Device is a technique of unrolling loop bodies so that each iteration actually does
the job of many iterations. Jeff Greenberg is credited with the first published port of
Duff’s Device to JavaScript from its original implementation in C. A typical implementation
looks like this:
//credit: Jeff Greenberg


var iterations = Math.floor(items.length / 8),

startAt = items.length % 8,

i = 0;

do {

switch(startAt){

case 0: process(items[i++]);

case 7: process(items[i++]);

case 6: process(items[i++]);

case 5: process(items[i++]);

case 4: process(items[i++]);

case 3: process(items[i++]);

case 2: process(items[i++]);

case 1: process(items[i++]);

}

startAt = 0;

} while (iterations--);

The basic idea behind this Duff’s Device implementation is that each trip through the
loop is allowed a maximum of eight calls to process(). The number of iterations
through the loop is determined by dividing the total number of items by eight. Because
not all numbers are evenly divisible by eight, the startAt variable holds the remainder
and indicates how many calls to process() will occur in the first trip through the loop.
If there were 12 items, then the first trip through the loop would call process() 4 times,
and then the second trip would call process() 8 times, for a total of two trips through
the loop instead of 12.
A slightly faster version of this algorithm removes the switch statement and separates
the remainder processing from the main processing:
//credit: Jeff Greenberg


var iterations = items.length % 8;

i = items.length -1;

while(iterations){

process(items[i--]);

iterations--;

}

iterations = Math.floor(items.length / 8);

while(iterations){

process(items[i--]);

process(items[i--]);

process(items[i--]);

process(items[i--]);

process(items[i--]);

process(items[i--]);

process(items[i--]);

process(items[i--]);

iterations--;

}

Even though this implementation is now two loops instead of one, it runs faster than
the original by removing the switch statement from the loop body.

It can be useful for performance improvement if the number of iteration is more than 1000.

courtesy: High Performance JavaScript by Nicholas Sakas

My WebRTC experiments

2013-09-11T22:31:00.001-07:00

I am trying on WebRTC. I will update my progress here. Currently, I am stuck on the following issue.

When I am using RTCDataChannel.send method, I am getting the following error:

Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

I am checking if this is because of the createOffer issue.

Those who are not familiar with webRTC, you can get idea from webrtc.org

The superpowers of constructors

2013-05-12T02:37:00.001-07:00

Invoking a function as a constructor is a powerful feature of JavaScript, because when a constructor is invoked, the following special actions take place:

A new empty object is created.
This object is passed to the constructor as the this parameter, and thus becomes the constructor’s function context.
In the absence of any explicit return value, the new object is returned as the constructor’s value.

Scoping and functions

2013-05-12T02:16:00.000-07:00

In JavaScript, scopes are declared by functions, and not by blocks. The scope of a declaration that’s created inside a block isn’t terminated (as it is in other languages) by the end of the block.

Consider the following code:

if (window) {
var x = 213;
}
alert(x);

In most other languages, one would expect the scope of the declaration for x to terminate at the end of the block created by the if statement, and for the alert to fail with an undefined value. But if we were to run the preceding code in a page, the value 213 would be alerted because JavaScript doesn’t terminate scopes at the end of blocks.

That seems simple enough, but there are a few nuances to the scoping rules that depend upon what is being declared. Some of these nuances may come as a bit of a surprise:

Variable declarations are in scope from their point of declaration to the end of the function within which they’re declared, regardless of block nesting.
Named functions are in scope within the entire function within which they’re declared, regardless of block nesting. (Some call this mechanism hoisting.)
For the purposes of declaration scopes, the global context acts like one big function encompassing the code on the page.

SQL Cascading Query

2011-08-11T23:12:00.001-07:00

with MessageList
as
(
select MessageID_,ParentID_ from Messages_ where ParentID_='3529'
union all
select m.MessageID_,m.ParentID_ from Messages_ m inner join MessageList ml on m.ParentID_= ml.MessageID_
)
SELECT distinct(MessageID_) FROM MessageList group by MessageID_

Testing mail locally

2011-06-28T22:54:00.000-07:00

1. Create a temp folder.

http://blog.divergencehosting.com/2010/01/27/testing-email-from-localhost-with-aspnet-without-smtp-server/

2. The mails sent will be available at that temp folder.

JavaScript in UpdatePanel

2011-04-16T23:13:00.000-07:00

Javascript events don't work after the UpdatePanel does a partial page update.

An UpdatePanel completely replaces the contents of the update panel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

Soln1: Re-subscribe to the events I need after every update. I use $(document).ready() for the initial load, then this snippet below to re-subscribe every update.

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
// re-bind your jquery events here
});

The PageRequestManager is a javascript object which is automatically available if an update panel is on the page. You shouldn't need to do anything other than the code above in order to use it as long as the UpdatePanel is on the page.

Soln2: Use jQuery's live() event subscriber
$(document).ready(function () {
$("#Button2").live("click", function () {
alert("test");
});

});

Soln3:

where bind is the jquery function

Where bind is the jquery function

Cannot add duplicate collection entry of type 'add' with unique key attribute 'name' set to 'RewriteModule' - HTTP Error 500.19 - Internal Server Err

2010-07-15T23:53:00.000-07:00

When I uploaded the site to the server, I got an HTTP Error 500.19 - Internal Server Error which says "Cannot add duplicate collection entry of type 'add' with unique key attribute 'name' set to 'RewriteModule'". Error was in the following line in web.config



I got the solution to change the application config file from the following link:
http://support.microsoft.com/kb/942055

But, hosting providers won't allow that on server.

I added the following under  where the RewriteModule is added

Also, there were some virtual directory issues. Hosting provider
changed that. Now it is working.

Issue when using AsyncFileUpload control

2010-07-09T04:14:00.000-07:00

I tried to use AsyncFileUpload control in a page. The AsyncFileUpload control was placed inside the first view of a multiview control. The page required a querystring parameter, and if the parameter is not present, the second view of the multiviewcontrol will be shown. This check is made on the Page Load event. This causes issue on the fileupload process. It was giving error, since on the postback, it gets another view. So, I did like this.

on the event "OnClientUploadStarted", I gave a value to a hidden element, and on page load, a checking is made, to see, if the value is given for the hidden element. If the value is given, the view1 itself will be shown without checking the availability of querystring parameter.

Don't know if that is the correct method. Anyhow, it worked.

Germans also are gone :-(

2010-07-07T21:40:00.000-07:00

My two favorite teams are out from WorldCup 2010, Germany and Argentina. :-( Spain really deserve that victory over Germany.

I know, it is bit late. But, I just came to a contribution from Microsoft for World Cup. So, I thought, I should share with you.

Track world cup scores with excel.

Generate sql script with data from database

2010-07-06T23:39:00.000-07:00

How can we copy data as well the structure and schema as sql query? We need database publishing wizard for that.

Download the database publishing wizard.
It will be installed at following location : C:\Program Files\Microsoft SQL Server\90\Tools\Publishing\

run the exe and you can get the sql file with all the data, schema and structure of the database you select.

Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that configuration specifies the same

2010-07-01T20:02:00.000-07:00

When this error comes, put enableViewStateMac="false" in the tag either in the web.config or in the page where you get this error.

System.Net.Mail.SmtpFailedRecipientException: Mailbox unavailable. The server response was: 5.7.1 Unable to relay

2010-05-19T22:52:00.000-07:00

I have got this issue many times, when I try to send email using smtp. There can be several causes for this. You have to allow relay for mail to be sent to outside servers like gmail.com. For sending mail within your server you don't have to do this. You can find some helps from the following links:
Help1
Help2
Help3

The code I have used is given below:

using System.Net.Mail;

SmtpClient smtpClient = new SmtpClient();
MailMessage message = new MailMessage();
smtpClient.Port = 25;
smtpClient.Host = "smtp.domain.com";
smtpClient.UseDefaultCredentials = false;
smtpClient.Credentials = new System.Net.NetworkCredential("webmail username", "webmail password");
message.From = new MailAddress("webmail username");
message.To.Add("test@gmail.com");
string emailBody = "Hi,

Welcome

";
message.Body = emailBody;
message.Subject = "testing";
message.IsBodyHtml = true;
smtpClient.Send(message);

But, after making the changes on the server, as specified on the above links, I was still getting the same error. Then I added the following line in between the above code.
smtpClient.DeliveryMethod = SmtpDeliveryMethod.PickupDirectoryFromIis;

Then the error was gone.

Login failed for user ‘IIS APPPOOL\DefaultAppPool’

2010-04-23T01:20:00.000-07:00

I got this issue in my system using Windows 7 Ultimate when trying to run a site which is configured to run in IIS. You can get the solution for this from the following link

Read More

Grouping Gridview

2010-03-31T19:31:00.000-07:00

Some times we want to group gridview. ZNet is a good control for this use.
ZNet
We can use this for grouping and also for the comparison.

specifying ValidationGroup in Page_ClientValidate function

2010-03-13T01:41:00.000-08:00

Hi,

We know that, Page_ClientValidate function tests if all controls meet asp.net validation criteria. This function is provided by asp.net. But, if we use more than, one validation group in the page, we may have to specify the validation group, we want to validate. For that, give like given below:
Page_ClientValidate('ValGroupName')

Then, it will validate only for that validation group