AngularJS, JavaScript

AngularJS : Using Promise-Part1

In Modern Web (Web 2.0) , We use so many Asynchronous call in our Web Applications . But sometimes , we need that , A Call is depended on another call .That means – After First Method’s Success CallBack another Method should be called . So if both the call occurs asynchronously , It does not fit my requirement .

So We can use AngularJS Promise to do this kind of things .

Lets see an example .

app.controller('PersonCtrl', ['$scope', '$rootScope', '$http', '$q', 'setting', function($scope, $rootScope, $http, $q, setting) {
    
    $scope.personsFromServer = [
        { Id: 1, Name: 'Shahjada' },
        { Id: 2, Name: 'Talukdar' },
        { Id: 3, Name: 'Masoom' }
    ];

    var getPersonPromise = function() {
        var deferred = $q.defer();
        deferred.resolve($scope.personsFromServer);
        return deferred.promise;
    };

    getPersonPromise().then(function(persons) {
        $scope.persons = persons;
        $scope.personId = persons[0].Id;
    }, function (reason) {
        alert('Failed: ' + reason);
    });
    
}]);

I am mocking PersonsFromServer Data in my example (Suppose this is gonna come from Server By an asynchronous call) .Now I am gonna populate a DropDown after successfully returning the data , and am selecting the first Person as selected Item in DropDown .

<div ng-controller="PersonCtrl">
        <select id="Person"
            ng-model="personId"
            ng-options="p.Id as p.Name for p in persons"
            required>
        </select>
    </div>

The Deferred API

A new instance of deferred is constructed by calling $q.defer().

The purpose of the deferred object is to expose the associated Promise instance as well as APIs that can be used for signaling the successful or unsuccessful completion of the task.

The Promise API

A new promise instance is created when a deferred instance is created and can be retrieved by calling deferred.promise.

The purpose of the promise object is to allow for interested parties to get access to the result of the deferred task when it completes.

Hope you got the idea .

Thanks .
In Part2 , I will show Calling API from Server with Resource and of course with Promise .

Cheers

Standard
ASP.Net MVC, EntityFramework, MVC WebAPI

Runtime error on REST WebAPI : failed to serialize the response body for content type ‘application/xml; charset=utf-8

In a Relational Database system , we may get this type of runtime error when calling WebAPI for a composite Object .

The exception looks like this :::

The ‘ObjectContent`1’ type failed to serialize the response body for content type ‘application/xml; charset=utf-8

We can solve this problem by adding the below lines in WebApiConfig.cs file under App_Start folder inside WebAPI project .

var json = config.Formatters.JsonFormatter;
            json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;

Will write few full step by step articles on EntityFramework and WebAPI on this blog , so Please Keep an eye on this Blog .

Thanks 🙂

Standard
Uncategorized

Bind C# List of object data with HTML without using ASP.Net control in ASP.Net

In ASP.Net we always use so may ASP.Net controls . But we also know ASP.Net controls have ViewState , so we should ignore using ASP.Net controls as much as possible to reduce the Load time of DOM .

In my example , I will show how we can bind and show the data to HTML without using ASP.Net Control in ASP.Net.

I have a List of a custom object like below :

protected List<voNote> notes = new List<voNote>();

This is a list of a ViewModel . and the ViewModel of my example is like below :::

public class voNote
    {
        public string Note { get; set; }

        public DateTime Date { get; set; }

        public string NoteCreatedBy { get; set; }

        public string TicketUrgency { get; set; }
    }

Let, We have populated the List from Database Server . Now we have to show/Bind the Data to the UI .

So my markup code will be just simple like below :

<%
        foreach (voNote note in notes)
        {
    %>
            <hr class="NoteBorder" />
            <div><%=note.Date %> | <%=note.NoteCreatedBy %> | <%= note.TicketUrgency %></div>
           
            <div class="NoteDiv"><%=note.Note %></div>
    <%
        }
    
    %>

So , its done 🙂

Standard
JavaScript

Show JavaScript Confirmation message while deleting ASP.Net Grid Row

Many a time , we need a confirmation Message on deleting ASP.Net Gird Row . Coz if any User mistakenly clicks the delete button , the data will be gone . So its always the Best to use Confirmation on Deleting .

We will see a demo now how to Show JavaScript/Client Side Confirmation Msg while deleting an ASP.Net Grid Row .

A long time ago ,I had to use more brain processing power to do this requirement 🙂 So I thought to share with all .

Lets see the below image for what I am gonna do :

Show JavaScript Confirmation message while deleting  ASP.Net Grid Row

Show JavaScript Confirmation message while deleting ASP.Net Grid Row

Add this markup inside your ASP.Net Grid .

<asp:TemplateField HeaderText="" ShowHeader="False" HeaderStyle-HorizontalAlign="Left">
                            <ItemTemplate>      
                                      <asp:LinkButton ID="lnkDelete" runat="server" CausesValidation="False" CommandName="Delete"
                                    Text="Delete" OnClientClick="ConfirmDelete(this.id)" ></asp:LinkButton>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Left" />
                      </asp:TemplateField>

And the JavaScript method implementation of the ConfirmDelete(this.id) is like below –

function ConfirmDelete(RowId)
     {
         var rowNoStr = RowId.split('_');
         rowNo = parseInt(rowNoStr[3]) + 1;              
    
         var confirm_value = document.createElement("INPUT");
         confirm_value.type = "hidden";
         confirm_value.name = "confirm_value";

         var grid = document.getElementById('<%=gvTicketDetails.ClientID%>');

         var delText = "Are you sure to delete - ";
         var ticketNo ="Tk " + grid.rows[rowNo].cells[0].innerText + " : ";
         var ticketTitle = grid.rows[rowNo].cells[1].innerText + " ?";
         var delMsg = delText.concat(ticketNo, ticketTitle);

         var answer = confirm(delMsg);
         if (answer)
         {
             confirm_value.value = "Yes";
         }
         else
         {
             confirm_value.value = "No";
         }
         document.forms[0].appendChild(confirm_value);       
     }

And now using the below code , you can easily get the confirmation value at server side .

protected void gvTicketDetails_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            string confirmValue = Request.Form["confirm_value"];
            if (confirmValue.ToUpper() == "YES")
            {
                
            }
        }

You are done 🙂 Cheers

Standard