Archive for August, 2017

[Solution]Dropdownlist not retaining selected item on Postback

Introduction

In this article we will look into an alternative solution to the problem with dropdownlist where selecteditems are not retained on postback.

Problem Description

When we select an item in dropdownlist and do a postback(button click) then the value selected on dropdownlist will reset to the first item in dropdownlist.

demo

Usually this issue happens when we reload the items in dropdownlist on every postback. To resolve the issue we will load the dropdownlist inside the If(!IsPostBack) block.

   protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownList2.Items.Insert(0, new ListItem("One", ""));
                DropDownList2.Items.Insert(1, new ListItem("Two", ""));
                DropDownList2.Items.Insert(2, new ListItem("Three", ""));
                DropDownList2.Items.Insert(3, new ListItem("Four", ""));
                DropDownList2.Items.Insert(4, new ListItem("Five", ""));
                DropDownList2.Items.Insert(5, new ListItem("Six", ""));
                DropDownList2.Items.Insert(6, new ListItem("Seven", ""));
                DropDownList2.Items.Insert(7, new ListItem("Eight", ""));
                DropDownList2.Items.Insert(8, new ListItem("Nine", ""));
                DropDownList2.Items.Insert(9, new ListItem("Ten", ""));
                DropDownList2.SelectedIndex = 4;
            }
        }

However if you see the code preceding, you will notice that the dropdownlist is populated inside if(!IsPostBack) block. Now what is causing the issue?

Solution:

On further analysis I noticed that while populating the dropdownlist, user is passing an empty string to “value” property of dropdownlist.  Dropdownlist will render on page at runtime without value being populated. This invalid code for dropdownlist caused the issue.

<select name="DropDownList2" id="DropDownList2">
<option value="">One</option>
<option value="">Two</option>
<option value="">Three</option>
<option value="">Four</option>
<option selected="selected" value=""> Five</option>
<option value="">Six</option>
<option value="">Seven</option>
<option value="">Eight</option>
<option value="">Nine</option>
<option value="">Ten</option>
</select>

To resolve the issue we need to provide an entry to “value” property in dropdownlist.

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownList2.Items.Insert(0, new ListItem("One", "1"));
                DropDownList2.Items.Insert(1, new ListItem("Two", "2"));
                DropDownList2.Items.Insert(2, new ListItem("Three", "3"));
                DropDownList2.Items.Insert(3, new ListItem("Four", "4"));
                DropDownList2.Items.Insert(4, new ListItem("Five", "5"));
                DropDownList2.Items.Insert(5, new ListItem("Six", "6"));
                DropDownList2.Items.Insert(6, new ListItem("Seven", "7"));
                DropDownList2.Items.Insert(7, new ListItem("Eight", "8"));
                DropDownList2.Items.Insert(8, new ListItem("Nine", "9"));
                DropDownList2.Items.Insert(9, new ListItem("Ten", "10"));
                DropDownList2.SelectedIndex = 4;
            }
        }

Demo

demo1

 

Advertisements

, , , ,

Leave a comment

Bundling and Minification in AspNetCore

Introduction:

In this article we will look into an easy option to do bundling and minification in Asp.Net Core. For those who are new to Bundling and Minification let’s try to understand these concepts.

Bundling

Bundling is the process of combining multiple javascript files to a single file. By this way we will reduce the number of requests needed for loading the files. i.e. if we had javascript code in multiple files then system will generate multiple requests to load all files however since we bundled all files there will be only one requests to load file. This will improve the load time.

Minification

Minification is the process of reducing the size of files (css , javascript). Usually size reduction happens by removing unwanted spaces in file.

For ex, below Javascript code

will change like below after minification.

Bundling and Minification using Gulp

We have variety of options available for Third party tools like Gulp and Grunt can be used to do bundling and minification process. However the problem with this approach is it involves additional steps which are slightly complex.

Using Bundler and Minification Extension

Mads Kristensen has created an extension namely “Bundler and Minifier”, using this we can easily do both bundling and minification in Asp.netCore. You can download the installer for extension from here.

Once you installed the extension, to do bundling and minification all you do is to Right click on the file and then select Bundler & Minifier option.

2017-08-22 14_38_43-Clipboard

If you have a single javascript file then you will see the only Minify File option.

MinfyOption

Once you select the option extension will generate the minified file for us. We can also follow the same process to minify css files as well.

, , , ,

Leave a comment