Asp - Send a popup message

 To send a message follow the next steps:

1. Add the reference:  using AjaxControlToolkit; 
2. Build the message through an alert using JQuery
3. Use the method RegisterClientScriptBlock 

 The function should look like this:

        StringBuilder sb = new StringBuilder();
        sb.Append("<script type=\"text/javascript\">alert('");
        sb.Append(mensaje.Replace("'", ""));
        sb.Append("'); ");
        sb.Append("window.location.href='");
        sb.Append(url);
        sb.Append("';</script>");
       ToolkitScriptManager.RegisterClientScriptBlock(this, typeof(Button), "Mensaje", sb.ToString(), false);

SQL - User-Defined Type (DataTable)

How to create a User-Defined in your database and use it in C# like DataTable

Create the data type and refresh the DB

[type_name] - The name for the new data type
[parameter] - The name of your paramenter
int - The data type
NULL - Declare if the parameter has to be null or not

 CREATE TYPE [relProjectDS] AS TABLE(
 
    [idProject] int NOT NULL ,
    [idCatDomain] int NULL,
    [catSubdomain] [nvarchar]  (50) NULL
)

Create the Store procedure

CREATE PROCEDURE  [dbo].[insertProject]
    @myDataType relProjectDS readonly
AS
BEGIN
      insert into [dbo].[Table] select * from @myDataType
END

Create and fill the DataTable in C#

idProject- Name of the parameter according with data type from the DB
typeof(int) - The type definition according with the DB
Rows.Add(param1, param2) - The method to add each row to the DataTable

DataTable projectsTable = new DataTable();
projectsTable.Columns.Add("idProject", typeof(int));
projectsTable.Columns.Add("idCatDomain", typeof(int));
projectsTable.Columns.Add("idCatSubdomain", typeof(int));

projectsTable.Rows.Add(1,2,3,4,5);

Pass dataTable as parameter

using (var command = new SqlCommand("InsertTable") {CommandType = CommandType.StoredProcedure})
{
    var dt = new DataTable(); //create your own data table
    command.Parameters.Add(new SqlParameter("@myDataType", dt));
    SqlHelper.Exec(command);
}

Update dataTable in Store Procedure

In the store procedure our dataType is readonly so to modify it we can pass to a temporally table and then update the data.

In the following steps after insert in another table we get the ID and the update the ID in the temporally table.

Finally we insert the teporally table in the DB. 

1.  SET @idProject = (SELECT SCOPE_IDENTITY()) 
2.  INSERT INTO #temp_table SELECT * FROM @relProjectDS
3. UPDATE #temp_table SET idProject = @idProject 
4. INSERT INTO [dbo].[relProjectDomainSubdomain] (idProject, idCatDomain, idCatSubdomain) SELECT idProject, idCatDomain, idCatSubdomain FROM  #temp_table

 

Tips:

How to create a temporal table

create table #temp_table
    (
        [idProjectDomainSubdomain] [int] IDENTITY(1,1) NOT NULL,
        [idProject] [int] NULL,
        [idCatDomain] [int] NOT NULL,
        [idCatSubdomain] [int] NULL,
    )

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.