What is View State and How It Works in ASP.NET

View State

View State is the method to preserve the Value of the Page and Controls between round trips. It is a Page-Level State Management technique. View State is turned on by default and normally serializes the data in every control on the page regardless of whether it is actually used during a post-back.

Data Objects That Can be Stored in View state

  1. String
  2. Boolean Value
  3. Array Object
  4. Array List Object
  5. Hash Table
  6. Custom type Converters

Advantages of View State

  1. Easy to Implement.
  2. No server resources are required: The View State is contained in a structure within the page load.
  3. Enhanced security features: It can be encoded and compressed or Unicode implementation.

Disadvantages of View State

  1. Security Risk: The Information of View State can be seen in the page output source directly. You can manually encrypt and decrypt the contents of a Hidden Field, but It requires extra coding. If security is a concern then consider using a Server-Based state Mechanism so that no sensitive information is sent to the client.
  2. Performance: Performance is not good if we use a large amount of data because View State is stored in the page itself and storing a large value can cause the page to be slow.
  3. Device limitation: Mobile Devices might not have the memory capacity to store a large amount of View State data.
  4. It can store values for the same page only.

When We Should Use View State

  1. When the data to be stored is small.
  2. Try to avoid secure data.

ArrayList

Selain menggunakan Functions dalam programming, antara yang menarik juga bagi saya adalah menggunakan ArrayList. Masa belajar Diploma Komputer Sains dulu sempat juga saya belajar subjek ArrayList ni, tapi memang saya tak faham sangat. Bila dah buat dan gunapakai masa kerja skrg ni rasa seronok pula.

Masa mula2 kerja dlm bidang programming dulu saya rasa susah juga nak buat dan saya akui mmg saya amik masa yang lama juga saya nak fahamkan code ArrayList yang dibuat oleh senior dan dijadikan contoh. Kadang-kadang memang elakkan diri dari kena buat coding Arraylist ni, tapi lama kelamaan ia mcm dah jadi perkara wajib ada dalam kebanyakan modul yang saya kene buat.Dalam terpaksa saya gigihkan juga fahamkan dan buat perlahan-lahan dengan bantuan rakan sekerja yang lain juga. Now, saya rasa ia mudah pula.. =)

Saya share  tentang ArrayList ni:

Creation of ArrayList

To create the ArrayList the following code is used:

ArrayList arr = new ArrayList();

The datatype of an ArrayList is object type, so we can add the elements having the datatype string, integer and any other.

Add the elements in ArrayList

To add values, the Add() method is used.

The following code describes how we add the elements to the ArrayList.

namespace ArrayList1

{

    class Program

    {

        static void Main(string[] args)

        {

            ArrayList arr = new ArrayList();

            arr.Add(“Sunday”);

            arr.Add(“Monday”);

            arr.Add(“Tuesday”);

            arr.Add(“Wednesday”);

            arr.Add(“Thursday”);

            arr.Add(“Friday”);

            arr.Add(“Saturday”);

            Console.WriteLine(“The elements of the ArrayList are:”);

            foreach (object obj in arr)

            {

                Console.WriteLine(obj);

            }           

        }

    }

}

When the above code is compiled and executed, it produces the following result

The elements of the ArrayList are:

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Functions

Masa mula-mula kerja dalam bidang pengaturcaraan sistem saya suka sangat buat code panjang dan berulang kali dalam satu method. Apabila rakan-rakan lain ingin membuat penambahbaikan atau penyelenggaraan agak sukar bagi mereka kerana memerlukan masa yang lama.

Syukur Alhamdulillah, rezeki saya pada waktu itu ada kawan-kawan sekerja yang prihatin dengan cara penulisan code saya dan memberi teguran serta mengajarkan cara-cara menulis code yang pendek dan boleh dipanggil banyak kali sesuatu function yang sama dalam banyak method.

Untuk pengetahuan semua, sehingga ke hari ini saya masih menggunapakai cara tersebut dan kongsikan dengan rakan-rakan yang lain. Suatu ilmu yang amat2 berharga.

Ini antara yang saya dapat kongsikan dan untuk rujukan saya. Saya rujuk di link https://csharp.net-tutorials.com/basics/functions/ .

A function allows you to encapsulate a piece of code and call it from other parts of your code. You may very soon run into a situation where you need to repeat a piece of code, from multiple places, and this is where functions come in. In C#, they are basically declared like this:

<visibility> <return type> <name>(<parameters>)
{
        <function code>
}

To call a function, you simply write its name, an open parenthesis, then parameters, if any, and then a closing parenthesis, like this:

DoStuff();

Here is an example of our DoStuff() function:

public void DoStuff()
{
    Console.WriteLine("I'm doing something...");
}

The first part, public, is the visibility, and is optional. If you don’t define any, then the function will be private. More about that later on. Next is the type to return. It could be any valid type in C#, or as we have done it here, void. A void means that this function returns absolutely nothing. Also, this function takes no parameters, as you can see from the empty set of parentheses, so it’s actually just a tad bit boring. Let’s change that:

public int AddNumbers(int number1, int number2)
{
    int result = number1 + number2;
    return result;
}

We’ve changed almost everything. The function now returns an integer, it takes two parameters (both integers), and instead of outputting something, it makes a calculation and then returns the result. This means that we can add two numbers from various places in our code, simply by calling this function, instead of having to write the calculation code each time. While we don’t save that much time and effort in this small example, you better believe that you will learn to love functions, the more you use C#. This function is called like this:

int result = AddNumbers(10, 5);
Console.WriteLine(result);

As mentioned, this function actually returns something, and it has to, because we told C# that it’s supposed to do so. When declaring anything else than void as a return type, we are forcing our self to return something. You can try removing the return line from the example above, and see the compiler complain:

‘AddNumbers(int, int)’: not all code paths return a value

The compiler is reminding us that we have a function which doesn’t return something, although we promised. And the compiler is pretty clever! Instead of removing the line, try something like this:

public int AddNumbers(int number1, int number2)
{
    int result = number1 + number2;
    if(result > 10)
    {
        return result;
    }
}

You will see the exact same error – but why? Because there is no guarantee that our if statement will evaluate to true and the return line being executed. You can solve this by having a second, default like return statement in the end:

public int AddNumbers(int number1, int number2)
{
    int result = number1 + number2;
    if(result > 10)
    {
        return result;
    }
    return 0;
}

This will fix the problem we created for ourselves, and it will also show you that we can have more than one return statement in our function. As soon as a return statement is reached, the function is left and no more code in it is executed. In this case, it means that as long as the result is higher than 10, the “return 0” is never reached.

Ia memang sangat2 memudahkan cara pengaturcaraan code dan memudahkan saya membuat penyelenggaraan atau penambahbaikan serta menjimatkan masa saya juga.

 

CSS BOOTSTRAP

Cascading Style Sheets

-Cascading Style Sheets,fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
w3schools

The Advantage
– Save you time
– Page Loads Faster
– Multiple Device Compatibility
– Its a Global Web Standard
– Easy to Maintain
– Superior style over HTML

Implementation
– Inline
– External
– Internal

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the “mystyle.css” looks:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;

</style>
</head>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

<h1 style=”color:blue;margin-left:30px;”>This is a heading</h1>

Update Panel Control in ASP.Net

Using UpdatePanel control we can refresh only required part of the page instead of whole page.

UpdatePanel Control

You can refresh the selected part of the web page by using UpdatePanel control, Ajax updatepanel control contains a two child tags that is ContentTemplate and Triggers. In a ContentTemplate tag we used to place the user controls and the Trigger tag allows you to define certain triggers which will make the panel update its content.

Add this code in file .aspx :

<asp:UpdatePanel ID=“updatepnl” runat=“server”>

<ContentTemplate>

</ContentTemplate>

</asp:UpdatePanel>

All the contents that must be updated asynchronously (only contenttemplate parts are updated and rest of the web page part is untouched) are placed here. It allows us to send request Or post data to server without submitting the whole page so that is called asynchronous.

Bootstrap – Form controls

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them.

Classes Used for Supported variations
.form-group Any group of form controls Use with any block-level element like <fieldset> or <div>
.form-control Textual inputs textpassworddatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor
Select menus multiplesize
Textareas N/A
.form-control-file File inputs file
.form-check Checkboxes and radios N/A

 

Coding html

Since Bootstrap utilizes the HTML5 doctype, all inputs must have a type attribute.

<form>
<div class=”form-group”>
<label for=”exampleFormControlInput1″>Email address</label>
<input type=”email” class=”form-control” id=”exampleFormControlInput1″ placeholder=”name@example.com”>
</div>
<div class=”form-group”>
<label for=”exampleFormControlSelect1″>Example select</label>
<select class=”form-control” id=”exampleFormControlSelect1″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class=”form-group”>
<label for=”exampleFormControlSelect2″>Example multiple select</label>
<select multiple class=”form-control” id=”exampleFormControlSelect2″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class=”form-group”>
<label for=”exampleFormControlTextarea1″>Example textarea</label>
<textarea class=”form-control” id=”exampleFormControlTextarea1″ rows=”3″></textarea>
</div>
</form>