Category: .NET

Foursquare–part 1 of 4

I have decided to log my daily routine from FourSquare .  I decided to make a Web application and a desktop application ( console, to be easiear) .

As a good application, 4Sq have an API at https://developer.foursquare.com/ . I suggest you to start with conecting to 4Sq, https://developer.foursquare.com/overview/auth .

For WebServers , you will redirect the user to  an URL from 4Sq.

https://foursquare.com/oauth2/authenticate
    ?client_id=YOUR_CLIENT_ID
    &response_type=code
    &redirect_uri=YOUR_REGISTERED_REDIRECT_URI

The user gives his accept to use your application and 4Sq redirects the browser back to YOUR_REGISTERED_REDIRECT_URI

Then , with the code, you can ask for an access token and then you can search 4Sq API.

I have searched also a 4Sq application in .NET   – and I found this one : https://github.com/ignatandrei/SharpSquare

Ok, so for implementing with ASP.NET MVC it is relatively simple – I must make an action that can answer to YOUR_REGISTERED_REDIRECT_URI and then ask for user checklist for the previous day – rather simple:

 public ActionResult oldWay(string id)
        {
            var c = new conect4Sq();
            c.SetAccessCode(id);
            var data = c.CheckinsYesterday();
            return View("~/Views/Home/ShowCheckins.cshtml",data);//TODO: use T4MVC

        }

You can see the application in work at http://fsq.apphb.com/  – just press the first “learn more” from the left.

You will find  the source code at https://github.com/ignatandrei/4SqDayHistory

Problem solved !

Now the real problem is to do the same thing from a DESKTOP application ( or Console, to be easier) – but this will be in the second part next week!

Javascript MVVM and ASP.NET MVC

TL;DR;

The purpose of this article is to show is how to transmit data to edit( create, update, delete) from a MVVM array to an ASP.NET MVC action in order for the action to bind to an IEnumerable/Array/List of objects. We will make also a javascript function that can be re-use across multiple MVVM frameworks to transmit data for multiple objects at once.

As always, you can find source code at https://github.com/ignatandrei/JavaScriptAndMVVMandMVC/ and you can view online at http://mvvmjavascriptmvc.apphb.com/

 

If you know already that, the last item on this rather long post is a homework. Download code and do it Winking smile

 

 

Prerequisites:

  1. If you want to know about ajax, please see the same example of how to save employee one by one http://msprogrammer.serviciipeweb.ro/2011/12/05/jquery-ajax-request-and-mvcdetailed/.
  2. The reference of sending an array of objects to MVC is http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/ . Please read it first since we will compose the Http request in ASP.NET MVC manner.
  3. If you do not know about MVVM and data binding in javascript, please follow most comprehensive tutorial that I know, http://learn.knockoutjs.com/

Objects

We start with the Employee ( Id, Name and IdDepartment) and Department(Id, Name). We will make an interface to display and edit multiple employees. The user can choose to change the Name and pick a Department from a list of Departments (presented as a select / dropdown / combox) .Also, he can create new Employee or delete an existing Employee. Then the user can submit all changes at once. We will use for this MVVM from Knockout, but you can use any other MVVM framework.

We will have 2 modes: edit and display. For edit, we have as actions add, delete ,modify and send all modifications(along with validation) . I would list what it is mandatory for every mode and action.

For fast learners:
Display
Edit Mode –Modify existing data
Edit Mode –add new employee
Edit Mode –delete existing employee
Edit Mode –send modifications and client validation
Summary
Homework


Display:

clip_image002

As you see we need to display the Employee list with name and the Department name.

If I do not want to create a NameDepartment property on Employee, but just use DepartmentId then the Model of the View should return the list of names of Departments.

public class ListEmployeesViewModel

{

public employeeList AllEmployees { get; set; }

public departmentList DepartmentList{ get; private set; }

This will be serialized as javascript array in the Home view:

@{

var jss = new JavaScriptSerializer();

var arrDepartments = jss.Serialize(Model.DepartmentList);

var arrEmployees = jss.Serialize(Model.AllEmployees);

}
//This is in the script tag in javascript:
//existing departments

var arrDeps = @Html.Raw(arrDepartments) ;

//existing employees

var arrEmps = @Html.Raw(arrEmployees) ;


So we have in arrDeps the departments and in arrEmps the existing employees.

To display the list of employees we create a MVVM javascript model( we have here knockout style, but is similar with other javascript MVVM framework)

First we create an employee in javascript ( explanations will follow) :

//this is in javascript
var emp = function(empId,name,deptId,active){

var self = this;

self.nr = i++; 

self.IdEmployee = ko.observable(empId);

self.NameEmployee = ko.observable(name);

self.Active = ko.observable(active);

self.iddepartament = ko.observable(deptId);

self.editMode = ko.observable(false);

self.displayMode= ko.observable(true);

self.deptName= function(){

var id=self.iddepartament();

var name ="";

$.each(arrDeps,function(index,value){

if(value.IdDepartment == id){

name=value.NameDepartment;

return false;

}

});

return name;

}

}

Explanation 1: the nr is the number of the employee . The user does not like ID, but wants to know how much employees are displayed.

Explanation 2: I have add an editMode and displayMode to the employee – to know the mode in which the employee is. I can have one property instead of 2(because of complementarity) , but was easier for me.

Explanation 3: In order to display DepartmentName it is enough to create a function on the employee to return the department name , iterating through the arrDeps – the code is

self.deptName= function(){

var id=self.iddepartament();

var name ="";

$.each(arrDeps,function(index,value){

if(value.IdDepartment == id){

name=value.NameDepartment;

return false;

}

});

return name;

}

Now we create the javascript model that holds all employees on the view:

var jsModel = function() {

var self = this;

self.employees = ko.observableArray([]);

And we make a function to add the existing employees to the array of employees:

self.addEmp = function(empId,name,deptId,active) { 

self.employees.push(new emp(empId,name,deptId,active)) 

};

And we add to the javascript MVVM model the existing employees

var model= new jsModel();

$.each(arrEmps,function(index,value){

model.addEmp(value.IdEmployee ,value.NameEmployee, value.iddepartament,value.Active);

});

And display it on the template by just binding :

ko.applyBindings(model);

that will repeat in

<tbody data-bind=’foreach: employees’>

<tr>

<td>

<span data-bind=’text: nr’ > </span>

</td>

<td>

<span data-bind=’text: NameEmployee,visible:displayMode’> </span>

<!—code removed for clarity–>

</td>

<td>

<span data-bind=’text: deptName(),visible:displayMode’> </span>

<!—code removed for clarity–>

</td>

<td>

<span data-bind=’text: Active,visible:displayMode’> </span>

<!—code removed for clarity–>

</td>

<td><!—code removed for clarity–>

</td>

</tr>

So this was the display mode. Pretty simple, huh ?

Edit Mode –Modify existing data

The Edit button calls the javascript model edit(true):

self.edit = function(val){

var arr =self.employees();

$.each(arr ,function(index,value){

value.editMode(val);

value.displayMode(!val);

});

So I put editMode to true and displayMode to false

Now, back to the template:

<td>

<span data-bind=’text: NameEmployee,visible:displayMode’> </span>

<input data-bind=’value: NameEmployee,visible:editMode’ />

</td>

You can see here visible attribute binded on displayModel and editMode –and how the span or the input are visible either way.

clip_image004

Same for the checkbox and the select. Because of the MVVM (in this case, knockout) any changes on the data ( name, active, changing department) will be binded back to the array of employees in the javascript MVVM model

Edit Mode –add new employee

When you press add a new employee is generated – the number 3:

clip_image006

It is easy – the Add button calls the same function addEmp that we use to push existing employees:

function BeginAdd(){

model.addEmp(0,'',0,true);

model.edit(true);

}

So a new employee is added to the array of employees – and the employees table is displaying the added employee . Do you like MVVM now ? 😉

Edit Mode –delete existing employee

The delete button have this code:

<td><button data-bind="click: $root.removeEmp,visible:editMode">Delete</button></td>

It is clear visible just when editMode is true. And the removeEmp removes the current employee from array, but having the id ( if not 0 – means new) put into a string that contains the ids of deletedEmployeesa:

 self.removeEmp = function(emp) { 

var id=emp.IdEmployee(); 

if(id != 0)

self.deletedItemsId += id;

self.employees.remove(emp); 

};

And the employees table is removing the row for the employee . Do you like MVVM now ? 😉

Edit Mode –send modifications and client validation

On the server side, the parameters of the action that receives the data is simple:

[HttpPost]

[HttpPost]

public JsonResult SaveEmployees(ListEmployeesViewModel e,string deletedItems)

I will explain the 2 arguments. For the first, remember ListEmployeesViewModel from the beginning ? It contains the list of employees and we will post that:

public class ListEmployeesViewModel

{

public employeeList AllEmployees { get; set; }

The second argument is the string that contains the id’s of deletedEmployees.

Now to transmit those from javascript array of employees.

Being a programmer, I like code-reuse. So why not create a function that iterates through an array( of employees), get all properties ( eliminating non-relevant, such as nr, editMode, displayModel and others) and compose the data in the MVC style(http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/ )

First, we need reflection in javascript:


//this is generic and can be put in a different .js file

var refProps= function (obj, exclude , recognizeFunction) {

var properties = [];

for (var prop in obj) {

//you can define an exclude function to exclude added properties

if(exclude){

if(exclude(prop))

continue;

}

var excludeProp = true;

var t = (typeof obj[prop]).toLowerCase();

if (t == 'number' || t == 'string' || t == 'boolean') {

excludeProp=false;

}

if(excludeProp){

//special case :maybe it is a observable function 

if(recognizeFunction){

if(t == 'function' ){

if(recognizeFunction(t))

excludeProp=false;

}

};

}

if(!excludeProp)

properties.push(prop);

};

return properties;

}

Fast explanation of parameters:

  1. obj is the object in javascript that I need all properties that are number, string, or boolean.
  2. I need to remove some properties(nr,editMode, displayMode) that are relevant in javascript – but not on the server side – so I have put an exclude function( you can put null)
    function exclude(prop){
    
    switch(prop){
    
    case "nr":
    
    return true;
    
    case "deptName":
    
    return true;
    
    case "editMode":
    
    return true;
    
    case "displayMode":
    
    return true;
    
    default:
    
    return false;
    
    }
    
    
  3. Also, knockout make a special ko.observable function
    self.NameEmployee = ko.observable(name);
    

    – so I need to recognize those functions – and the function is(surprise!) ko.observable

Now saving the array is again re-usable:

function saveArray(itemsArray,/*you can not pass those*/prefix, excludeProp,recognizeFunction,validateProp){

var l = itemsArray.length ;

if(l == 0){

return "";

}

var propNames = refProps(itemsArray[0],excludeProp,recognizeFunction); // you can pass null on exclude to add all properties

var nr = 0 ;

var strData="";

for (var i = 0; i < l; i++) {

var objToSave= itemsArray[i]; 

//you can pass here another function to recognize which object can be saved

//if(!canBeSaved(objSave) continue;

for (var j = 0; j < propNames.length; j++) {

var nameProp = propNames[j];

var val =objToSave[nameProp] ;

var t = (typeof val).toLowerCase();

if(t == 'function'){

val = objToSave[nameProp]();

}

if (validateProp) {

if (!validateProp(nameProp,val, objToSave, i)) {

return "";

}

}

strData += "&"+ prefix+"[" + nr + "]." + nameProp;

strData += "=" + val;

}

nr++;

}

return strData;

}


The itemsArray parameter is the items array that you want to save ( in my case, the employees).

The new function is validateProp – you can pass null – but this is an implementation that take into consideration that the employee should not have the name empty and the user must select something from the department list:


function validateProperty(propName, value, item, number){

switch(propName){

case "NameEmployee":

if(value == ""){

window.alert("please enter employee name for row number " + (number+1) );

return false;

}

return true;

case "iddepartament":

if(value === undefined || value == 0){

window.alert("please select a department for row number " + (number+1) );

return false;

}

return true;

default:

return true;

}

}



After those 2 re-usable functions( saveArray and refProps ) the code for save is pretty simple:

We obtain the values for employees using saveArray

self.save = function() { 

var itemsArray = self.employees();

var strData = saveArray(itemsArray,"AllEmployees",exclude, ko.observable,validateProperty);

if(strData == "")

{

//window.alert("no save");

return;

}

strData="deletedItems=" +self.deletedItemsId + strData;

window.alert("saving:" + strData);

and post to the server.


$.ajax({

type:"POST",

url:'@Url.Content("~/Home/SaveEmployees")' ,

data: strData ,

datatype:"JSON",

//Just we must be attentive: if success , then the id of the new employees( those with id’s 0) must be replaced by the id’s of the id’s generated on server.
//How I identify if multiple new employees? Well, it is easier to delete all employees with id’s 0 and add the id’s that are not already in the array:

var dels=[];

//delete the new items and add the new ones

var idExisting=';';

$.each(self.employees(), function(index,emp) {

if(emp.IdEmployee() == 0 )

dels.push(emp);

else

idExisting += emp.IdEmployee()+";";

});

$.each(dels,function(index,emp) {

self.removeEmp(emp);

});

//add new one

window.alert('add new ones');

$.each(returndata.emps,function(index,emp) {

var id=emp.IdEmployee;

if(idExisting.indexOf(";" + id+";") == -1){// not found - means it is a new one

self.addEmp(emp.IdEmployee ,emp.NameEmployee, emp.iddepartament,emp.Active);

}

});


Also, for Antiforgery token I have used this code

 //added antiforgery token
                var aft= $('input[name="__RequestVerificationToken"]');
                if(aft.length){
                    strData +="&__RequestVerificationToken=" + aft.val();
                }

Well, that was it !

Summary:


We have had an javascript array of employees to edit and send data at once . We have make the POST as for ASP.NET MVC rules. You can re-use the refProps javascript function( that gives you the name of the properties of an object – in our case, employee) and saveArray javascript function – that serialize an javascript array to a recognizable ASP.NET MVC idiom

As always, you can find source code at https://github.com/ignatandrei/JavaScriptAndMVVMandMVC/ and you can view online at http://mvvmjavascriptmvc.apphb.com/

 

Homework for you:

( fork on github  and send me the solution via github)


1. Modify the nr ( the employee order number) such as , when deleting or adding a new employee, the numbers are in good order – not 1 and 3 like in the picture

clip_image008

2. Add a hiredate to the employee . Ensure you transmit the date(Hint: Modify the refProps )

LaterEdit:
Hintea Dan Alexandru made a simple application to show me that a simple json.stringify it is enough for MVC to do this magic.
More , it shows directly in the MVVM model a toDTO that is simplier to use( however, the validation part remains to do)
Source code at https://github.com/hinteadan/MvcAjaxSample/#!

Dependency injection choice

For a personal pet project I have needed a DI framework . It relates to WebApi – I need to switch the provider for web api between a console and web – mostly authentication / logging different.

Some years ago was only StructureMap – but now there are a lot.

So I started to investigate to choose between the DI frameworks.

What I have wanted:

 

1. open license to use in a project – and source code too – to can upgrade.

2. Updated to the last .NET framework ( so , for .NET 10.0 , I will not be left to upgrade myself the source code – I am lazy too)

3. Speed

4. Last but not least:  easy to use – have some simple example to start me with

 

The first link found was:

http://fukyo-it.blogspot.ro/2012/10/comparing-net-di-ioc-frameworks.html  – it helps about license . Recomends Autofac. I was not very sure about.

Let’s see who have updated the source code to .NET 4.5 . I started looking at github and google code – and , yes, all are updating the source to the latest framework.

For speed I consider relevant http://www.palmmedia.de/Blog/2011/8/30/ioc-container-benchmark-performance-comparison  – if you look down , latest update was(quoting):

“17.11.2013: Added Grace. Updated several containers.”

Recommends  Simple Injector . And from his page seems simple to use.

So my choice is Simple Injector . If you use a DI, please say in the comments what DI and  why.

SameId – skip

In the previous post I have show how two users can see each other if they are editing the same product ( in my example , product id 5)

But not in all cases the users should be notified about each other – like in , let’s say, view product Id 5.

In this case we have an attribute to apply to the action [SameIdSkip]

A video will show you :

Same object edited by 2 users–proactively notifying users

This is a practical example about how two users that comes on the same page will be notified one about other( after an idea of Adrian Petcu) . See the picture :

image

With the NuGet package you can install in your application in this steps:

To run :
1. install package from Nuget
2. in Filter.Config add following line:  filters.Add(new SameIdAlert.SameIdFilter());
3. In Route.Config, after
routes.MapHubs();
GlobalHost.DependencyResolver.Register(typeof(IAssemblyLocator) ,() => new SameIdAlert.SameIdAssemblyLocator());
4. In the View that you want the user to be notified add the following lines in the @section scripts{
<!–Script references. –>
<!–The jQuery library is required and is referenced by default in _Layout.cshtml. –>
<!–Reference the SignalR library. –>
<script src=”~/Scripts/jquery.signalR-1.1.3.js”></script>  <!–or whatever signalr library version you have –>
<!–Reference the autogenerated SignalR hub script. –>
<script src=”~/signalr/hubs”></script>
<!–SignalR script to update the chat page and send messages.–>

and somewhere:

@{Html.RenderPartial(“SameId”);}

5. In _Layout  move jquery declaration
@Scripts.Render(“~/bundles/jquery”)

before RenderBody

6. If you decide to put into _Layout and you want to skip an action, please put  [SameIdSkipAttribute] to the action

7. If you want more action parameters than the default id , just put
[SameIdAttribute(“parameter name 1″,”parameter name2”)
to the action
8. If you decide that you want just several actions then modify
filters.Add(new SameIdAlert.SameIdFilter(false));
and put
[SameIdAttribute]
View online at http://SameId.apphb.com

Source code at https://github.com/ignatandrei/SameId

NuGet package at https://www.nuget.org/packages/sameid

Video demo at http://youtu.be/wjkoMs98Z8U

If you want to help me, see the issues that can be solved here:https://github.com/ignatandrei/SameId/issues

.tt files to maintain assembly version in sync

Let’s suppose you have a medium-big application and you have several dll-assemblies-component that the main application references( DAL, BLL). You have several deployments of the application at clients and , when a client , you must find each version of each assembly deployed.

I have developed a simple .tt file to  ensure that every component that you compile have the same version – you can run on the server on the automatic build(http://www.olegsych.com/2010/04/understanding-t4-msbuild-integration/) or by hand.

More, with this .tt file you can

    1. Have the date /time ( with minute) of the compile of the dll embedded into version information
    2. Read a text file and add same copyright to all projects( left as an exercise to the user) .

 

You can see the demo at http://youtu.be/PudBWl16308 .

You can download the project at https://github.com/ignatandrei/AssemblyInfoTT

Attach to IIS and Stop Build– packages for better VS2012

 

If you work in VS2012 and want to debug your site in  IIS with just CTRL+SHIFT+F1, then please see http://visualstudiogallery.msdn.microsoft.com/928617dc-d747-4577-bd19-8514d7efa8a7 

If you work in VS2012 and want to stop build for other projects right after an error for a project ,then please see http://visualstudiogallery.msdn.microsoft.com/a20bb171-0cab-453e-a64b-15197250f81f

The source are found under https://github.com/ignatandrei

( For VS2010 I have 2 macros – you can see them on my Romanian programming blog ).

MVC , JsonResult , DateTime and TimeZone

The jsonresult of date time is serializing to the string /Date and some integer value starting with 1970 . The problem is that the browser interprets this value accordingly to the LOCAL TimeZone – and thus the same date is going to be interpreted with a difference.

I was thinking that I can adjust from UTC time offset of the server( obtained with .NET from TimeZoneInfo.Local.BaseUtcOffset.TotalMinutes) and the UTC time offset of the client( obtained with (new Date()).getTimezoneOffset() + UTCServerMinutes; ). Unfortunately, the code does not work for SAMOA ( 13 hours difference).

Pay attention that the server is sending SAME data – just the browser is interpreting from the local user time zone.

So the solution is to convert the  date to a string ( I have chosed yyyy-MM-ddTHH:mm:ss) and interpret in javascript( see date2 below).

The server code – I have put my birthdate 16 april 1970

DateTime res = new DateTime(1970, 04, 16, 22, 0, 0);
[HttpPost]
        public JsonResult GetDateBirth()
        {

            var str = res.ToString("s");
            return Json(new { date =res, datestring=str, ok = true });

        }

The Javascript code:

function GetJsonDate() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetDateBirth")',
            datatype: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (returndata) {
                if (returndata.ok) {
                    window.alert('The server is sending:' + returndata.date + " -- " + returndata.datestring);
                    var d = parseInt(returndata.date.substr(6));
                    var date1 = new Date(d);
                    var date2 = dateFromSortable(returndata.datestring);
                    var date3= getDateString(returndata.date);
                    window.alert('original: ' + date1  + '\r\n'  + ' iso correct:'+ date2 + '\r\n'+ ' utc difference not good:' + date3);

                }
                else {
                    //this is an error from the server
                    window.alert(' error : ' + returndata.message);
                }

            }
        }
        );
    }
    function dateFromSortable(dateStr) {
        var parts = dateStr.match(/\d+/g);
        return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);
    }
    
    function getDateString(jsonDate) {
        //does not work correctly for SAMOA - it have some hours difference
        var UTCServerMinutes = @serverMinutes;
        if (jsonDate == undefined) {
            return "";
        }
        var utcTime = parseInt(jsonDate.substr(6));

        var dateUtc = new Date(utcTime);

        var minutesOffset = (new Date()).getTimezoneOffset() + UTCServerMinutes;

        var milliseconds = minutesOffset * 60000;
        var d = new Date(dateUtc.getTime() + milliseconds)
        return d;
    }

How to test it:

Run the project. Click “Get Json Date” – and you will see the three dates equal.

image

Now change the time zone to Samoa ( or other, if you live in Samoa Winking smile)

image

Click again on “Get Json Date”  – the date will  same 16 april 1970 just for the date2  – obtained from dateFromSortable javascript function.

image

Please note that the local time zone is NOT affecting the values transmitted via ViewBag/ViewData/Model, but just the ones transmitted via Json.

The project can be downloaded from here

How to become a more skilled developer in .NET

I am a good developer in .NET . However, I will not be so good, if there will be not my tools – that allows me to save time and make projects faster.

I have published the tools that I work with in 2012 .

If you are interested in fast training to those tools , I am ready to have 2 days ( 4 sessions – each of 3 hours) with those tools

 

  1. Logging: Nlog
  2. Mocking tools: Moq
  3. Sending emails: smtp4dev
  4. Generating documents: stringtemplate
  5. Testing: xunit
  6. CSV reader: FileHelpers
  7. Database profiling: EF Profiler
  8. Web Scrapping: HtmlAgilityPack
  9. Exporting PDF: ItextSharp
  10. Jquery addons: numeric, datepicker, watermark, select2, tinymce
  11. Zip files : zipsharp
  12. Template generating: .tt files

( and you can ask for every item from http://msprogrammer.serviciipeweb.ro/programmer-tools/ )

 

For each item I will do a description , an example and a homework to be done..

After the training you will be more knowledgeable about those tools and you will have more items under your belt when solving programming problems.

For more than 11 trainees , the fixed price is 80 EUR / trainee ( VAT and travel expenses not included).

Please contact me on the comments and/or use my email address at upper right corner of this blog.