ASP - Inside a Gridview how get the DropDownList index

In the view:

• Define the method in the event OnSelectedIndexChanged
• Add the tag AutoPostBack="true"

<asp:TemplateField HeaderText="Competence Domain">
       <ItemTemplate>
              <asp:DropDownList ID="ddlCompDomain" runat="server" AppendDataBoundItems="true" AutoPostBack="true" OnSelectedIndexChanged="ddlCompDomain_SelectedIndexChanged">
              </asp:DropDownList>
       </ItemTemplate>
</asp:TemplateField>


In the code inside the method ddlCompDomain_SelectedIndexChanged:

1. Cast the sender object to the element you wanted to know the index, for our case a DropDownList
2. From the DropDownList get the GridViewRow through the parent property
3. Get the index with RowIndex

protected void ddlCompDomain_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList ddlCurrentDropDownList = (DropDownList)sender;
        GridViewRow grdrDropDownRow = ((GridViewRow)ddlCurrentDropDownList.Parent.Parent);

        TextBox2.Text = grdrDropDownRow.RowIndex.ToString();

        TextBox3.Text = ddlCurrentDropDownList.SelectedItem.Text;
    }

JQuery - Ajax

AJAX (Asynchronous JavaScript Xml)

This is the method to invoke ajax

$.ajax({   

     url: "my_data.xml" ,      // URL of you want to GET via AJAX
    cache: false,
    dataType: "xml",           // data - The data return from the Ajax call

    success: function(xml_reader){       // Run this function is the method ajax is successful

        $(xml).find("runner").each(function() {

  var info = '<li>Name: ' + $(this).find("fname").text() + ' ' + $(this).find("lname").text() + '</li>';

 if( $(this).find("gender").text() == "m" ){
$('#finishers_m').append( info );
}else if ( $(this).find("gender").text() == "f" ){
$('#finishers_f').append( info );
}
  $('#finishers_all').append( info );
});                

    }

});

Ajax methods in JQuery

$.get()
$.getJSON(url_to_load, function(json){} ) - This method is the shortcut from $.ajax();

$.getScript()

$.post()

$.load()

Send information using Ajax

There are two ways: serialize and serializeArray

$("#my_form").serialize(); -  Sent the data separeted by &

Ej.-  a=1&b=3&c=5

$("#my_form").serializeArray();  -  Sent the data as following

{

   {

       a: "1", 

       b: "3",

       c: "5"  

   },

  {

       a: "11" ,

       b: "31",

       c: "51"  

   },

}

This method sent the information to the defined URL

$.post(url_to_send , data , function(json){ 

});

JQuery - Part II

Declare Objects

You can create objects using JavaScript, also you can assign this object to a variable.

function object(param1, param2){

 this.param   = param1;

 this.param2= param2;

  my_function: function(){

  

  }

}

var my_object = object(1, 2);

Properties

To access the properties use object.property

Ej:  var name =  object.param2;

Using JSON the syntax is    object['param2']

Arrays

The arrays can be created with the following sintax

var array = new Array();

var array = new Array('obj1', 'obj2', 'obj3');

var array = ['obj1', 'obj2', 'obj3'];

Functions

$.inArray get the index where is the element.

var element_index = $.inArray('value', array);

Window object

Each time a tab is open a window object is created.

Methods

window.onFocus - tells when a tab is activated.

window.onBlur - detects when the tab lose the focus.

Functions

window.setTimeout( function(){}, 400) - Wait the defined time before call the function

window.setInterval( function(){}, 400) - interval between a function is run repeatedly

window.clearInterval( function(){} ) - wipes clear the schedule of repetead function calls

JQuery - Methods

Method Listener

There are two ways to bind events to elements

Case 1: 

$("my_element").click( function () {

} );

Case 2: 

$("my_element").bind('click',function () {

} );

Unbind method

The function .unbind remove the mehod pass as paramenter. 

Also the function .each iterate in all the elements from the element selector.

$("div.guess_box").each( function(){

$(this).unbind ('click');

});

Functions

There are two ways to declare a function

Function declaration

function nameFunction() {

   //Code

}

Function variable

var nameFunction = function () {

   //Code

}

Anonymous Function

Is when inside another function you declare your own function. In this case $(this).unbind('click'); is the anonymous function.

$("div.guess_box").each( function(){

$(this).unbind('click');

});

Contains Function

Compate inside this if have the element with Id "has_discount"

if ($.contains(this , document.getElementById("has_discount"))) {

$(this).addClass("discount");

}else{

$(this).addClass("no_discount");

}

Functions Catalogue

$("p").empty() - Delete all the content from an element

$("span").replaceWith("<div>Change DOM</div>") - Delete all the content from an element

$("span").before("<div>Change DOM</div>") - Insert a element before span

$("span").after("<div>Change DOM</div>") - Insert a div element after span

Animate Functions

This function only work in numerical properties. The first parameter is the property to be affected with the end value and the second parameter is the duration.

The default time is 400 milliseconds.

$("p").animate({left:"100 px"}, 500);

In the first parameter can include many properties.

$("p").animate({left:"100 px", width: "200"}, 500);

Climb the DOM

parent() - Get the father element

$(".element").parent().   

$(".element").parents(). - Get all the parents elements   

$(".element").prev() - Get the first sibling  to the left

$(".element").children() - Get all the children elements

$(".element").next() - Get from the sibling elements, the one at the right from the first element at the left.

$(".element").closet("#id_element") - Climb through all parents until find the #id_element parent.

Filter the DOM

$(".element").children().first(); - Get the first element from the collection.

$(".element").children().last(); - Get the last element from the collection.

$(".element").children().eq(2); - Get the element from the index.

$(".element").children().slice(2,3); - Get the elements between the indexes.

$(".element").children().filter(".organic"); - Get all the father elements from the selector element.

$(".element").children().not("#id_element"); - Get the elements that not mathc the #id_element.

Best Practice

$variable  - Use a dollar sign before the variable name to indicate you store values from JQuery.

Positions

• Relative
  
  
  
  
  
  
• Absolute

           

• Fixed

        

JQuery

Function

$( ) is the shortcut of jquery( )

Syntaxis :   

• $( "Selector Element" ).Method();
• $( "Selector Element" ).Method( Function( ){  } );

JQuery select elements as CSS

h1 -> Element selector

.h1 { color: red}   ->  Css Class select a grouping of elements

#my_h1 { color: #3300FF; } -> Id Selector, only affects one element

Example 1

$("span.Italian").toggle();

<span class="Italian">Nel Mezzo del cammin di 

nostra vita</span> 

<span class="English">In the middle of this road 

called "our life"</span> 

  

<span class="Italian">mi ritrovai per una selva 

oscura</span>

Example 2

$("p#mytext").show();

<p id="mytext">One morning, when Gregor Samsa 

woke from troubled dreams . . . 

</p> 

<p id="mytext">he found himself transformed in 

his bed into a horrible vermin.</p> 

<p>He lay on his armour-like back, and if he 

lifted his head a little . . . </p>

Set up JQuery

$(document).ready( function() {

});

This mean when the DOM is ready and loaded, then do the function.

Human-Computer Interaction - The Power of Prototyping

What do Prototypes Prototype?

Feel - What might it look like?

Implementation - What might it work like?

Role - What might the experience be like?

The best way to have a good idea is to have lots of ideas.

   - Linus Pauling

• Biggest changes at early stages.

Evaluating Designs

1. Labs
2. Surveys
3. Feedback from Experts
1. Comparatives Experiments
2. Participant Observation
4. Simulation

Users

• Estreme Users
• Users seldom use it

Web Services - Layers

Presentation

• Operation Contract
• Data Contract
• Implementation  -> svc.cs

RN

• Business Rules

Data

•  Data Access Layer (DAL)
• Entities Class
• Data Repository
• Data Methods