Merhaba, siteme hoşgeldiniz.

Paylaşımları kaçırmamak için bültene kayıt olmayı unutmayın.

Salı, 07 Mart 2017 / Published in Uncategorized

Introduction

Most of the times when you are creating a .NET MVC Web Application working with AngularJS, you can find the routing is handled by both frameworks. Having said that, you also want to load the AngularJS controllers dynamically, by demand. This article shows you how to expose the AngularJS controllers in order that they can work harmoniously with MVC controllers, and they can be loaded dynamically only when they are requested.

The following image shows how angular routes the URL to be called (in this case, the MCV controller) and the Angular controller should be loaded once the client receives the response from the server for binding the view.

Following this map, we can say Angular will be routing as first step (routing administrator) and then will let MVC route to the right controller.

  • Template URL: basically determines the MVC controller and action to be called
  • JS Controller: JS file to be loaded for binding the view

Routing with Both MVC and AngularJS

Let’s see an example for solving the routing when implementing MVC and AngularJS 1.5.

When creating the new project, you decide to create either an empty or MVC template. In this case, we will create our project using an Empty Template. Having said that, we will need to add the ViewStart, the Layout View and a Home Controller.

Please make sure to install AngularJS.Route as well. This will allow you to use the Routing Modules for customizing your routes.

In the app.js, you should include the injection of ngRoute so we can use the router provider for customizing the target controller.

In the following example, when a user types the root / it will be redirected to Home Controller and Home Action and when the server response is received, the "mycontroller" (angular) will be loaded for binding the view.

app.js

var app = angular.module('myApp', ['ngRoute']);

app.config(['$routeProvider',
        function ($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: '/Home/Home',
                    controller: 'mycontroller'
                })
                .when('/contact', {
                    templateUrl: '/Contact/Contact'
                })
                .otherwise({ redirectTo: '/' });
        }]);

In the mycontroller.js file, we can observe we are using the module we declare in app.js for creating a new controller, which is defined in the same file.

mycontroller.js

var app = angular.module('myApp');

var mycontroller = function ($scope, $http, NgMap) {
    $scope.message = "Hello World!";
};

app.controller('mycontroller', ['$scope', '$http', mycontroller]);

Include the ng-app directive for using your Angular module. ng-view directive is also important as we are loading the controllers and templates dynamically.

References for angular, routing and custom JS files (app and controller) should be included as well.

Layout.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Layout</title>
</head>
<body ng-app="myApp">
    
@RenderBody()
http://~/Scripts/angularjs/angular.min.js http://~/Scripts/angularjs/angular-route.min.js http://~/Scripts/controllers/app.js http://~/Scripts/controllers/mycontroller.js </body> </html>

Points of Interest

Here’s where the trick comes. As MVC framework is routing the root "/" to HomeController (Index Action), which is returning the Index view, it is loaded and rendered by the @RenderBody, but we are requested to load and render the Home view instead as per defined in our app.js.

Views/Home/Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/Layout.cshtml";
}

<h2>Loading...</h2>

Views/Home/Home.cshtml

@{
    Layout = null;
}

<h2>Home</h2>

{{ message }}

Salı, 07 Mart 2017 / Published in Uncategorized

Introduction

The "eight queens problem" is a very old logical teaser. I think the original question is as old as chess game. The "modern" version of this problem is to solve this problem with help of computers.

This is a typical program writing competition task – like as towers of Hanoi. The challenge is to place eight queens on a chessboard, no to capture each other. And there are two questions:

  • How to resolve it?
  • How many solutions are there?

The siplest way to write a "bruteforce" program. Try each variaton and mark the good positions. But this is not a nice soultion. It would be very slow, because there are a very great number of positions.

The number of combinations is "8 under 64". That means (8! * (64-8)!) under 64! . (! sign means factorial) This is the formula of combinations without repetitions. If I calculated good – that means 4426165368 positions, what is too much to try each one. I found a shortest way to calculate, and demonstrate it in this solution.

Afterall this is a very good, and not too difficult example how to make a matematical model of a real (seems to be not matematical) problem. At last, I have to declare, this example is completely my work – I do not use any other sources (except queens picture in gif, what I found somewhere). Certainly everybody can find other solutions on Internet.

Background

From perspective of C# programing, there are only two "interesting" or not "general" thing in this solution. I show ho can we store pictures (png) in the Program Resource and how can we use it, and the second is how can we create Form controls in runtime (pictureboxes in this case). In the first (or zero-th) step I draw four pngs: black, white, black-with-queen and white-with-queen fields. I used MSpaint and downloaded queens transparent png from the Internet.

Using the code – the solution

The first observation was that every row, and every column of chessboard can contain one, and only one queen. The idea came from here. I gave numbers to each field, started with 0. Every fields have got an unique identifier. Every queen captures (prohibits) her row, her column, and two diagonals. Afterall the algoritm is not too difficult. In a loop program moves the first queen every fields of first row, and calculates the possible positions considering that EVERY rows, and columns can contain one and only one queen. First task was to calculate the fields, what the queen prohibits, then calculate tasks with second, with third etc.. queens, and make the summative array of prohibited fileds. Look at the picture below:

The queen on field 4 prohibits this fields: row: 0-7, column: 4,12,20, 28,36,44,52,60 left diagonal: 4,11,18,25,32, right diagonal :4,18,22,31. The program placed the first queen, than calculated the prohibited fields.

After then, the program calculated the POSSIBLE fields in second row: 8,9,10,14,15. In this picture I show an iteration, where program put the second queen on field 14, and calculated the summative prohibited fields (yellow and orange lines)

The summative means the sum of two prohibited field arrays. So the algorthm is that: Iterate on each field of FIRST row, place a queen into a field , calculate the prohibited fields, calculate the next row’s possible fields. Then iterate on second row POSSIBLE fields, calculate the summative prohibited fields…etc and do it to egihth row. When iteration progress calculates that no fields are available in next row, then skips this position – moves the queen the next possible field.

To calcualte the fields I used eight nested loop the means the rows of chessboard. When iteration reaches the egihth row, and can place the eighth queen on a field that means it is a SOLUTION. A solution is an array of integers that contains the numbers of fields of queens. And ALL solutions is a List of this arrays. So I made a composite data sturcture:

List (int[]) solutions = new List(int[])()

This calculation takes place in Form_load() method, so the calculation of possible positions is the first step in the program.

 

Calculating the prohibited fields…

The "getdenied(item, denied)" method makes this calculation. The item means the number of field which we are looking for, and denied is a list of numbers of prohibited fields. The result will be the sum of this list, and the recently calculated list. Lets see the code:

            //Local list of integer
            List<int> t = new List<int>();

            //Adds prohibited list to t
            if (denied != null)
            {
                t.AddRange(denied);
            }
  
            ....
			
			
            //actual row is the item divided by 8 (INTEGER!!!)
            row = item / 8;

            //actual column is the item MODULO 8
            column = item % 8;

            //The actual row min is row *8
            rowmin = row * 8;
            //..and the max is min+7...
            rowmax = rowmin + 7;


            columnmin = column;
            //Colunmax is the columnmin+56 (7*8) (check if not belive....)
            columnmax = column + 56;

            //Left diagonal min and max...
            leftdiagonalmin = item - Math.Min(row, column) * 9;
            leftdiagonalmax = item + Math.Min(7 - row, 7 - column) * 9;

            //Right diagonal min and max
            rightdiagonalmin = item - Math.Min(row, 7 - column) * 7;
            rightdiagonalmax = item + Math.Min(7 - row, column) * 7;

            //Calculate the prohibited row fields from min to max, and adds to t (list)

            for (int i = rowmin; i <= rowmax; i++)
            {
                t.Add(i);
            }

            //Calculate the prohibited columns from min to max step by 8 and adds to t

            for (int i = columnmin; i <= columnmax; i = i + 8)
            {
                t.Add(i);
            }

            //Calculate the left diagonal from min to max step by 9 (8+1 same column and 1 field to right) 

            for (int i = leftdiagonalmin; i <= leftdiagonalmax; i = i + 9)
            {
                t.Add(i);
            }

            //Calculate to right diagonal from min to max step by 7 (8-1 same column and 1 field to left)

            for (int i = rightdiagonalmin; i <= rightdiagonalmax; i = i + 7)
            {
                t.Add(i);
            }

            //Calculate distinct : each fieldnumber can take part only one time. One field can be prohibited by more queens not only for one, but enough to mark this field only one 
            List<int> tt = new List<int>();

            tt = t.Distinct().ToList();
			
			//Returns the new prohibited array, the original, and the new added.
            return tt;
...

…and after that to calculate the next row is very easy…

It makes the " getrowsitems(row, denied);" method. Row is the actual row, and denied is a list of prohibited fields. This is not more than to filter the possible fields of next row which are NOT in prohibited fields list.

            //Calculate the actual row min, and max values
            rowmin = row * 8;
            rowmax = rowmin + 7;
         
            //If prohibited list is not null...
            if (denied != null)
            {

                //Loop through the row from min to max to each field
                for (int i = rowmin; i <= rowmax; i++)
                {
                    //If the prohibited list NOT contains the field index, then add to list (will be returned)
                    if (!denied.Contains(i))
                    {
                        t.Add(i);
                    }

                }
            }
            //If prohibited list doesn't contain elements, then whole row is available (it can be happen only FIRST row)
            else
            {
                //Adds whole row from min to max to available fields list.
                for (int i = rowmin; i <= rowmax; i++)
                {
                    t.Add(i);
                }
            }

            //REturns the available lists
            return t;
...

After the calculations the program draws the chessboard with "InitializeBoard()" method This is an example how to create controls on a form, and gets pictures fro Program Resource. To change the black and white fields is a little bit tricky – see in my code. (not after ALL fileds have to change the color, after last field of a row the color will NOT change) And program initializes the numeric updown control with the number of solutions -nothing special.

            //Black or white fields? blackwhite true means BLACK!
            bool blackwhite = false;

            //Nested loops to draw the chessboards. Calculates the position of pictures. Each chessboard fields have 70*70 size
            for (int y = 0; y <= 7; y++)
            {
                for (int x = 0; x <= 7; x++)
                {

                    //Creates new Picturebox, sterched, with 70 pixel height and width
                    PictureBox pb = new PictureBox();
                    pb.SizeMode = PictureBoxSizeMode.StretchImage;
                    pb.Height = 70;
                    pb.Width = 70;


                    //Calculates the position 1, 71,141 etc. 
                    pb.Top = 1 + y * 70;
                    pb.Left = 1 + x * 70;


                    //If the field is black...then draw blac, else white
                    if (blackwhite)
                    {
                        //Gets the picture from Program Resource. Resource can contain OBJECT, so we have to explicitely convert to Image
                        pb.Image = (Image)Resources.ResourceManager.GetObject("black");
    
                    }
                    else
                    {
                        //Same if the field is white
                        pb.Image = (Image)Resources.ResourceManager.GetObject("white");
          
                    }

                    //Adds the new control (picturebox) to Panel1 component
                    panel1.Controls.Add(pb);

                    //Change the blaxk or white flag
                    blackwhite = !blackwhite;
                    
                }
                //.. and here too, because in the beginning of a new row will NOT change the color. The last field, and a next row first field have the same color!
                blackwhite = !blackwhite;
            }
...

At last, let’s see the updown control’s value-change event. This method will change the fields pictures (picturebox components image property) according to the number of updown control – that means the index of solution. The pictureboxes are created (created in Initializeboard method) so this method only changes the images. The images are in Program Resource as well.

             ...
			 //Occures when numeric we change the value of the updown controller

            //Black or white flag, true means BLACK!
            bool blackwhite = false;

            //Local array: the solutio is a list of array of integer. This is an item of solutions!
            int[] solution_item = new int[8];

            //numeric updown index. The value is DECIMAL so we convert it to int.
            int idx = Convert.ToInt32(numericUpDown1.Value);

            //The idx-th element of solutions list is the local solution item.
            solution_item = solutions[idx - 1];

            //Converts the list to array => because .Contains method is very comfortable. (see below)
            List<int> solution_item_list = solution_item.ToList();

            //List of form controls This will be a list of pictureboxes on Panel1
            List<Control> pbcontrollist = new List<Control>();

            //Captures four images from Program Resource. The resource can contain object, so we convert it to Image
            Image blackqueen = (Image)Resources.ResourceManager.GetObject("blackqueen");
            Image whitequeen = (Image)Resources.ResourceManager.GetObject("whitequeen");
            Image black = (Image)Resources.ResourceManager.GetObject("black");
            Image white = (Image)Resources.ResourceManager.GetObject("white");

            //Loop through the panel1 controls, and if it is picturebox, then adds to pbcontrollist
            for (int ix = panel1.Controls.Count - 1; ix >= 0; ix--)
            {
                if (panel1.Controls[ix] is PictureBox) { pbcontrollist.Add(panel1.Controls[ix]); }
            }

            //Loop through in all 64 fields of chessboard (0..63) and if local soution contains the number of field then draws a queen to chessboard. In other case it draws a simple field.
            //Of course it have to calculate to black or white color as well.
        
            for (int i = 0; i < 64; i++)
            {
                //If local solution contains the number then QUEEN!
                if (solution_item_list.Contains(i))
                {
                    //Black or White Queen?
                    if (blackwhite)
                    {
                        //pbcontrollist[i] is a Control type, not a Picturebox. So we have to convert to Picturebox with "AS" 
                        (pbcontrollist[i] as PictureBox).Image = blackqueen;
                    }
                    else
                    {
                        (pbcontrollist[i] as PictureBox).Image = whitequeen;
                    }
                }
                ////If local solution does not containsthe number then simple field!
                else
                {
                    if (blackwhite)
                    {
                        (pbcontrollist[i] as PictureBox).Image = black;
                    }
                    else
                    {
                        (pbcontrollist[i] as PictureBox).Image = white;
                    }
                }

                //Problem: after the last field of a row will NOT change the color (see a chessboard) It calculates the last field. If i is NOT index of a last-row field, then changes the color (black-white)
                
                int f = i / 8;

                //Not last field of a row? Then change...else NOT.
                if (i != (7 + 8 * f))
                {
                    blackwhite = !blackwhite;
                }


            }

            }
                //.. and here too, because in the beginning of a new row will NOT change the color. The last field, and a next row first field have the same color!
                blackwhite = !blackwhite;
            }
			...
...

Points of Interest

This task is an "old debt" for me… I wanted to solve this problem from many years. I dont think so this would be a "large scale" problem. It is only a fun – but interesting and instructive. Worth to see and understand.

History

This is the first (and maybe the last) version.

Salı, 07 Mart 2017 / Published in Uncategorized

Table of Contents

The Scenario

I was working recently in an intranet application that had a download page. The output HTML was similar to the following:

<li><a class="download" 
href="\\MYSERVER\reports 2011\report1.zip" title="Report 1">Report 1</a></li>
<li><a class="download" 
href="\\MYSERVER\reports 2011\report2.zip" title="Report 2">Report 2</a></li>
<li><a class="download" 
href="\\MYSERVER\reports 2011\report 3.zip" title="Report 3">Report 3</a></li>
<li><a class="download" 
href="\\MYSERVER\reports 2011\report 4.zip" title="Report 4">Report 4</a></li>
<li><a class="download" 
href="\\MYSERVER\reports 2011\report 5&6.zip" title="Report 5&6">Report 5&6</a></li>

This was working fine in IE9, but not in other browsers. There was no action using Google Chrome, and using Firefox there was an error (HTTP Error 400 – Bad Request).

I tried to convert the file path to a file URI but it didn’t fix it. It continued to work on Internet Explorer only.

<li><a class="download" 
href="file://MYSERVER/reports 2011/report1.zip" title="Report 1">Report 1</a></li>
<li><a class="download" 
href="file://MYSERVER/reports 2011/report2.zip" title="Report 2">Report 2</a></li>
<li><a class="download" 
href="file://MYSERVER/reports 2011/report 3.zip" title="Report 3">Report 3</a></li>
<li><a class="download" 
href="file://MYSERVER/reports 2011/report 4.zip" title="Report 4">Report 4</a></li>
<li><a class="download" 
href="file://MYSERVER/reports 2011/report 5&6.zip" title="Report 5&6">Report 5&6</a></li>

The solution was to create a custom ASP.NET download page. I also used jquery on the client side.

Step 1: Using jquery on the Client Side

The first step was to add an event handler to the download links. The request URI is encoded and is sent as a parameter to the download page. Creating an hidden iframe and setting the src attribute with the download link allows the file to be downloaded asynchronously.

$("a.download").bind("click", function (e) {
    e.preventDefault();
    var requestedFile = encodeURIComponent($(this).attr('href'));

    var iframe = document.createElement("iframe");
    iframe.src = 'Download.aspx?file=' + requestedFile;
    iframe.style.display = "none";
    document.body.appendChild(iframe); // triggers download page
});

Make sure you use encodeURIComponent function to encode special characters in the filename.

Step 2: Create an ASP.NET Download Page

This is the source code of the download page:

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        string requestFile = Request.QueryString["file"];

        if(string.IsNullOrEmpty(requestFile))
        {
            throw new FileNotFoundException("File to download cannot be null or empty");
        }

        // Get file name from URI string in C#
        // http://stackoverflow.com/a/1105614
        var uri = new Uri(requestFile);
        string filename = Path.GetFullPath(uri.LocalPath);
        var fileInfo = new FileInfo(filename);

        if(!fileInfo.Exists)
        {
            throw new FileNotFoundException("File to download was not found", filename);
        }

        // get content type based on file extension. Example:
        // http://stackoverflow.com/a/691599
        Response.ContentType = GetContentType(fileInfo.Extension);

        Response.AddHeader("Content-Disposition", 
                           "attachment; filename=\"" + fileInfo.Name + "\"");
        Response.WriteFile(fileInfo.FullName);
        Response.End();
    }
    catch(ThreadAbortException)
    {
        // ignore exception
    }
    catch(FileNotFoundException ex)
    {
        Response.StatusCode = (int) System.Net.HttpStatusCode.NotFound;
        Response.StatusDescription = ex.Message;
    }
    catch(Exception ex)
    {
        Response.StatusCode = (int) System.Net.HttpStatusCode.InternalServerError;
        Response.StatusDescription = 
        string.Format("Error downloading file: {0}", ex.Message);
    }
}

Some notes:

This is necessary in order to make the download work with a UNC share (\\MYSERVER\….) or a file URI (file://….)

var uri = new Uri(requestFile);
string filename = Path.GetFullPath(uri.LocalPath);

To avoid filename truncating, it’s necessary to wrap the filename with quotes:

Response.AddHeader("Content-Disposition", 
                       "attachment; filename=\"" + fileInfo.Name + "\"");

References

My name is Rui Jarimba and I was born in Madeira island, Portugal and I currently live in Rome, Italy.I have more than 10 years of experience developing software using the .NET Framework and other technologies (Web development, Databases, …). Some of my professional interests are: software development best practices, software architecture, cloud computing, Continuous Integration (CI), Continuous Delivery (CD) and agile methodologies such as Scrum, Kanban, Lean and any other methodology that can help me to become a better and more productive software engineer. I believe in good code – code that is readable, maintainable, reusable, testable and deployable. This means that I’m not the "quick and dirty" type, I write code for the medium/long term whenever possible. Something else about me – I love music, I am an amateur photographer, not a big fan of gyms (I prefer to do some outdoor activity such as walking/hiking), big foodie (I love Mediterranean cuisine and my glass of wine!).

Salı, 07 Mart 2017 / Published in Uncategorized

In this article I’ll show you how to setup Unity IoC container in an existing ASP.NET 3.5 Web Forms application and use it in your Web Services (.asmx files).

Table of Contents

Example – Adding Logging to Your Application

You have the following interface and its implementation:

public interface ILogger
{
    void Write(string message);
}

public class DebugLogger : ILogger
{
    public void Write(string message)
    {
        Debug.WriteLine(message);
    }
}

Step 1: Setting Up the Container in Global.asax

The first step is to setup Unity Container in Global.asax file. This is a good place to do it because it can be accessed either by web pages or by Web Services. The CreateContainer() method is the place where the dependencies are specified.

public class Global : HttpApplication, IContainerAccessor
{
    private static IUnityContainer _container;

    public static IUnityContainer Container
    {
        get
        {
            return _container;
        }
        private set
        {
            _container = value;
        }
    }

    IUnityContainer IContainerAccessor.Container
    {
        get
        {
            return Container;
        }
    }

    protected void Application_Start(object sender, EventArgs e)
    {
        CreateContainer();
    }

    protected virtual void CreateContainer()
    {
        IUnityContainer container = new UnityContainer();
        container.RegisterType<ILogger, DebugLogger>();
        
        Container = container;
    }
}

Step 2: Creating a Base Class for the Services

Create a generic BaseService that all your services will inherit from. The dependencies will be injected when you create an instance of the service (default constructor).

public abstract class BaseService<T> : System.Web.Services.WebService where T : class
{
    public BaseService()
    {
        InjectDependencies();
    }

    protected virtual void InjectDependencies()
    {
        HttpContext context = HttpContext.Current;

        if (context == null)
            return;

        IContainerAccessor accessor = context.ApplicationInstance as IContainerAccessor;

        if (accessor == null)
            return;

        IUnityContainer container = accessor.Container;

        if (container == null)
            throw new InvalidOperationException(
              "Container on Global Application Class " + 
              "is Null. Cannot perform BuildUp.");

        container.BuildUp(this as T);
    }
}

Step 3: Setting Up the Services

Now all you need to do is to inherit from the BaseService and invoke its base constructor. Don’t forget to add the [Dependency] attribute to your dependency, and it has to be public.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class DummyService : BaseService<DummyService>
{
    [Dependency]
    public ILogger Logger
    {
        get;
        set;
    }

    public DummyService() : base()
    {
    }

    [WebMethod]
    public string HelloWorld(string name)
    {
        string message = string.Format("Hello World, {0}!", name);

        this.Logger.Write(message);

        return message;
    }
}

That’s it! Now you just need to compile and run the application and see it in action. 

Feel free to download the demo application.

References

My name is Rui Jarimba and I was born in Madeira island, Portugal and I currently live in Rome, Italy.I have more than 10 years of experience developing software using the .NET Framework and other technologies (Web development, Databases, …). Some of my professional interests are: software development best practices, software architecture, cloud computing, Continuous Integration (CI), Continuous Delivery (CD) and agile methodologies such as Scrum, Kanban, Lean and any other methodology that can help me to become a better and more productive software engineer. I believe in good code – code that is readable, maintainable, reusable, testable and deployable. This means that I’m not the "quick and dirty" type, I write code for the medium/long term whenever possible. Something else about me – I love music, I am an amateur photographer, not a big fan of gyms (I prefer to do some outdoor activity such as walking/hiking), big foodie (I love Mediterranean cuisine and my glass of wine!).

TOP