C# Important Topics: 2016

Wednesday 23 March 2016

Checkbox Toggling in Angularjs

Requirement :

We need to make a checkbox for every option available in our $scope object and preserve the option selected for further use.

Step 1:

Store your required option list in a $scope.

Example :

$scope.options : SalesOrderNos

In our example the SalesOrderNos have a list of sales order, on which we require the checkbox.

Step2: Declare another scope variable to store the selected options values

$scope.selection = [ ];

Step 3 : use ng-repeat to repeat our sales order list

<td><input type="checkbox" value="{{s.SalesOrderNo}}" ng-checked="selection.indexOf(s.SalesOrderNo) > -1" ng-click="toggleSelection(s.SalesOrderNo)"/></td>

<td>{{s.SalesOrderNo}}</td>

</tr>

Step 4 : On our js page to capture the toggle of checkbox

//toggle selection for a given sales order by salesOrderNo

    $scope.toggleSelection = function toggleSelection(SalesOrderNo) {

        var idx = $scope.selection.indexOf(SalesOrderNo);

        //is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        }
            //is newly selected
        else {
            $scope.selection.push(SalesOrderNo);
        }
    };

Step 5: Now, try console.log($scope.selection)

The selected options must be in the selection array.

Angular Material Auto - Complete

Angular Material is the reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.

To use Angular- Material, required Angular files are :

angular-material.min.css
angular-material.min.js
angular.min.js
angular-animate.min.js
angular-aria.min.js
angular-messages.min.js

CDN :-

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js

https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc1/angular-material.js

Angular material provide us with its own tags that help us to perform DOM Operation in an easy fashion. One of such tag is md-autocomplete.

md-complete tag

md-complete tag has its child tag

<md-item-template> : In this the search items results are shown.

<md-not-found> : Here text is provided when search does not match.

Our HTML Page :

<div ng-controller="AutoCompleteController as ctrl" layout="column" ng-cloak="" ng-app="MyApp">

<md-content class="md-padding">

<form ng-submit="$event.preventDefault()">

<p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>

<md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText"

md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?">

<md-item-template>

<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>

</md-item-template>

<md-not-found>

No states matching "{{ctrl.searchText}}" were found.

<a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>

</md-not-found>

</md-autocomplete>

<br/>

<p>By default, <code>md-autocomplete</code> will cache results when performing a query. After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>

</form>

</md-content>

</div>

Our JS Page:

'use strict';

angular

.module('MyApp', ['ngMaterial', 'ngMessages'])

.controller('AutoCompleteController', AutoCompleteController);

function AutoCompleteController() {

var self = this;

self.states = loadAll();

self.querySearch = querySearch;

function querySearch(query) {

var results = query ? self.states.filter(createFilterFor(query)) : self.states;

return results;

}

function loadAll() {

var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\

Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\

Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\

Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\

North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\

South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\

Wisconsin, Wyoming';

return allStates.split(/, +/g).map(function (state) {

return {

value: state.toLowerCase(),

display: state

};

});

}

function createFilterFor(query) {

var lowercaseQuery = angular.lowercase(query);

return function filterFn(state) {

return (state.value.indexOf(lowercaseQuery) === 0);

};

}

Code Explanation:

angular

.module('MyApp', ['ngMaterial', 'ngMessages'])

.controller('AutoCompleteController', AutoCompleteController);

Angular module named MyApp is made with ngMaterial and ngMessages dependency.

Our Controller name is AutoCompleteController

function AutoCompleteController() {

var self = this;

self.states = loadAll();

self.querySearch = querySearch;

On controller load we are calling loadAll function, and querySearch and stored them to states and querySearch.

function createFilterFor(query) {

var lowercaseQuery = angular.lowercase(query);

return function filterFn(state) {

return (state.value.indexOf(lowercaseQuery) === 0);

};

}

This filter is used so that our search works for lower and upper case both and in our return function we are finding those states which has that search term at index 0. Means the first character.

Our End Result Will be Like :

Starting with SignalR Part 1 (Overview)

SignalR, a framework that facilitate asynchronous data transfer between the server and the clients in real time.

Basically, SignalR isolates us from low-level details, giving us the impression of working on a permanently open persistent connection. To achieve this, SignalR includes components specific to both ends of communication, which will facilitate message delivery and reception in real time between the two.

In a way that is transparent to the developer, SignalR is in charge of determining which is the best technique available both at the client and at the server( Long Polling, Forever Frame, Websockets...) and uses it to create a underlying connection and keep it continuously managing disconnections and reconnections when necessary. We will only see and use permanently open connection, and SignalR will make sure that everything works correctly in the backstage. Thus, with this framework, we say that we work on a virtual persistent connection.

SignalR also includes a messaging bus capable of managing data transmission and reception between the server and the clients connected to the service. That is, server is able to keep track of its clients and detect their connections and disconnections, and it will also have mechanisms to easily send messages to all clients connected or part of them, automatically managing all issues concerning communications (different speeds, latency, errors … ) and ensuring the delivery of messages.

ng-change

ng-change can be used to capture any action performed by the user with input type tag, select tag.

Using ng-change with input type :

Here ng-change modal will go to calculate() in the controller of this page at the time of change text in the textbox. This is same as writing a onTextChange() action on the textbox.

On Controller:

$scope.calculate = function () {

//Do the required operation here.

}

Using ng-change with select tag :

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

Here the ng-change will be called when user will select an option.

Beginning-with-database-approach-Part 3

In Part 2 of beginning with entity framework we did CRUD operation using entity framework. Now, there are few tips for using entity:

How to update your Entity Data Model (.edmx)?

Open your .edmx file >Right click >Select update from database

You will get this window:

If you have added new table, views, stored procedure in database.. Select those and select Finish.

Same to update and delete from model.

Providing Default values?

In SQL we can provide default value, to a column, this default value is not automatically updated to our entity model. So we have to manual add the default value in our entity model also.

Select the table column from entity designer for which default value is to be provided.

Right click on the column>Properties >Default value :- Provide your value

#Stored procedure of SQL behave as function in Entity framework.

Beginning-with-database-approach-Part 2

In our first part we have created our .edmx file with the help of ADO.net Entity Data Model using database approach.

Now, it’s time to start using our entity Framework to do SQL operation.

Before that, if you are using visual studio 2012 or later, go to solution explorer, find your .edmx file and delete .tt extension files from there.

After that go to .edmx.diagram file.

Right click > Properties > Code Generation Strategy= None . Change it to Default.

Now we are ready with our entity.

In entity framework, our tables behave as C# class and column as class properties.

Performing Insert operation using entity Framework

On some button click if we need to add that data to our database object, then we follows as :

First Make an object of your entity, by default it should be as “your database name”Entitites.

Example :

db_OrderMangEntities db = new db_OrderMangEntities();

Now make object of table in which data is to be store,

Syntax :

TableName tbl = new TableName();

After that use this tbl instance to add data to the properties,

Example:

tbl_Vender tbl = new tbl_Vender();

tbl.VenderName = "Kumar";

tbl.VenderContact = 656789

When we have provided values to the properties to the table object, its time to save this into database for this,

Do,

db.tbl_Vender.AddObject(tbl);

Here, db is our entity object in which we have tbl_vendor (our table). The “AddObject”(or Add, depending upon your version) is the method provided by the entity to insert data into database.

After adding the data it’s time to tell our database to save our changes, for this write,

db.SaveChanges();

This will add a row to our table with the provided data.

Complete code will look like :

protected void btnRegister_Click(object sender, EventArgs e)

{

db_OrderMangEntities db = new db_OrderMangEntities();

tbl_Vender tbl = new tbl_Vender();

tbl.VenderName = "Kumar";

tbl.VenderContact = 656789;

db.tbl_Vender.AddObject(tbl);

db.SaveChanges();

}

Update Object in Entity:

To update any row, we need to first find that row.

For that we have to use LINQ with enitites.

The Syntax will be :

tbl_Vender tbl1 = db.tbl_Vender.Where(i => i.VenderName == "Kumar").First();

Here I am searching with vendorName you can use any property.

After this we will have tbl1 as the object of that row which is to be updated.

Now assign the new values to the tbl1 object.

For Example :

tbl1.VenderName = "Gaurav";

After this just tell the database to save our changes.

db.SaveChanges();

Note , here we are not adding another object to the table as it will add another row, but we just need to update it.

Deleting object:

Same first we need to find the row to be deleted .

Now write,

db.tbl_Vender.DeleteObject(tbl1);

and then the same save changes to database.

Beginning-with-database-approach-part-3

Beginning with database approach Part-1

This approach could be used with any previously build database, that why known as database model approach. It will help us to communicate with our database, with its predefined functions, and giving our C# code more power in terms of SQL too.

Step 1: Right- Click on the project main file.

Project Name > Add > New Item > ADO.NET Entity Data Model

Provide a relevant Name.

Step 2: Choose Modal Contents :

Select Generate from database > then Next >

Step 3: : Make a new Connection to connect to database : (connection string)

Provide your database server name and select the database name, that you want to connect.

Click Next.

Step 4: Select the table, views, stored procedure that are required from database, or select all.

Click > Finish.

Your entity Model is created:

You should have got your database tables in GUI format as below :

Beginning-with-database-approach-part-2

Beginning-with-database-approach-part-3

Using ng-switch in Angularjs

ng-switch :

ng-switch basically provide us with a functionality to switch views on some client action. This action could be through a drop-down option change, button click or any other such client action.

For Example :

<select ng-model="stockShow">

<option value="complete">Complete</option>

<option value="Receipt">Receipt</option>

<option value="Issue">Issue</option>

<option value="Balance">Balance</option>

</select>

Here we have just made a model named stockShow.

<p>This is complete stock div</div>

</div>

<p>This is receipt div </p>

</div>

<p>This will give issue div</p>

</div>

Here, when the user will select certain option , the option value div will become active.

Caution :

ng-switch has its own scope inside the div in which it is declared, so if you required to have others model in the ng-swtich div. Then we must have to first declare them implicitly at the controller of the page. That will help us to work with nested scopes in angularjs.

Sending Dynamic Table Data to Server Side

Step 1: Add the jquery main file.

Step 2: Add the following Code.

function saveValues( ) {
var tableMatRequire = [];
$('#matReqTable tr').each(function (row, tr) {
tableMatRequire.push({
IndentNo: $('.indentClass').val(),
MatReqName: $(tr).find('td:eq(1)').find('#matReqPart').val(),
MatQuantity: $(tr).find('td:eq(2)').find('#matReqQuant').val()
});
});
tableMatRequire.shift();
sendData(tableMatRequire);
}

Note: Here 'matReqTable' is the table ID,

matReqPart is the table column id, here it is textbox, if you have label then just do,

MatReqName: $(tr).find('td:eq(1)').val(),

Step 3: In the above step we have save the dynamic table values in an array..

Now, pass this array by ajax to the server control function :

Add the following code :

function sendData(tableMatRequire)
{
$.ajax({
type: "POST",
url: "/Indent/Index", // Here pass the required url
dataType: "json",
contentType: "application/json",
data: JSON.stringify({

MatReq: tableMatRequire,

}),
success: function (data) {
alert("Data send !");
}

});
}

Making Add Row functionality in Html table using jquery

Step 1:

Add Jquery download file or use the CDN provided :

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

Step 2:

Make your html table ..

<h3>Add/ Delete Row </h3>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-9">
<table class="table table-responsive" id="maintable">
<thead>
<tr>
<th class="sno">S.No</th>
<th class="Particular">Particulars</th>
<th class="Qty">Qty</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person">
<td>

<input type="text" id="Pro_Sno" value="1" class="form-control " /></td>
<td>
<input type="text" id="Pro_Part" class="form-control" /></td>
<td>
<input type="number" id="Pro_Quant" class="form-control" /></td>
<td>
<button type="button" id="btnAdd1" class="btn btn-xs btn-primary classAdd" ">Add More</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2"></div>
</div>

Step 3:
//This is the javascript code file :

<script type="text/javascript">

$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //on is used for getting click event for dynamically created buttons

var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="text" value=' + rowCount + ' id="Pro_Sno" class="form-control" /></td>' +
'<td><input type="text" id="Pro_Part" class="form-control" /></td>' +
'<td><input type="number" id="Pro_Quant" class="form-control" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});

$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls

});

});

Note : I have used bootstrap files here just to provide some css, its optional, if required add bootstrap file too.

Step 4:

Run the Application

You will get the output like this :

C# Important Topics

Wednesday 23 March 2016

Checkbox Toggling in Angularjs

Requirement :

Monday 14 March 2016

Angular Material Auto - Complete

CDN :-

Our HTML Page :

Our JS Page:

Code Explanation:

Tuesday 8 March 2016

Starting with SignalR Part 1 (Overview)

ng-change

Using ng-change with input type :

Using ng-change with select tag :

Beginning-with-database-approach-Part 3

How to update your Entity Data Model (.edmx)?

Providing Default values?

#Stored procedure of SQL behave as function in Entity framework.

Wednesday 2 March 2016

Beginning-with-database-approach-Part 2

In entity framework, our tables behave as C# class and column as class properties.

Performing Insert operation using entity Framework

Update Object in Entity:

Tuesday 1 March 2016

Beginning with database approach Part-1

Sunday 28 February 2016

Using ng-switch in Angularjs

ng-switch :

Tuesday 26 January 2016

Sending Dynamic Table Data to Server Side

Sunday 17 January 2016

Making Add Row functionality in Html table using jquery