Posts By

mangowi

Razor syntax

Introduction

Important notice with Razor syntax makes it easy to switch between csharp code and html code.

In this short tutorial am going to show everything you need in your development using as  ASP .NET framework.

Using Inline Razor syntax

So I really am important?

<h2>@ViewBag.DanielCreatedThis</h2>
 

Code Block Expressions

@{
    var name = "Daniel Mangowi";
    var day = DateTime.Now.DayOfWeek.ToString();
 
    <p>Howdy, @name. To day is @day</p>
    <p>HOwdy, @name, we want to plurize @(day)s is the best?</p>
}

Mixed Expressions

@{
    var productId = 123;
    <p>Product ID: ACME@(productId)</p> //() signal razor that at symbol has been made to access productId
}

Helpers Methods in Views

@helper pluralizeChildren(int childcount)
{
    @(childcount == 1 ? "child" : "children");
}
 
 
 
@{
    var childCount = 1;
    var childCount2 = 8;
 
    <p>I have @childCount @pluralizeChildren(@childCount)</p>
    <p>I have @childCount2 @pluralizeChildren(@childCount2)</p>
 
}
 
 
@helper pluralize(int amount, string singular, string plural)
{
    @(amount == 1 ? singular : plural)
 
 
}
 
 
@{
    var crisesCount = 2;
    <p>Mr. President, there @pluralize(crisesCount, "is one cirsis", "are " + crisesCount + " crises") you must deal with it immediately</p>
}

 

Commenting in Razor

Single line comment

@* This is a comment in Razor syntax*@

Multiple line comment

@*
    @foreach (var car in Model)
        {
        <p>@car.Id - @car.Model - @car.Make</p>
    }
*@

Conditional Statements

@{
    var crisesCount = 2;
    <p>Mr. President, there @pluralize(crisesCount, "is one cirsis", "are " + crisesCount + " crises") you must deal with it immediately</p>
}
 
@* This is a comment in Razor syntax*@
 
<p>
    Mr. President, there
    @if (crisesCount == 1)
    {
        <span>is one crisis</span>
    }
    else
    {
        <span>are @crisesCount crises</span>
    }
    you must deal with it immediately
</p>

Printing Text Without HTML Tags

You can display text without HML tag in Razor by use of @: followed by your tex

<p>
    @{
        var test = false;
        if (!test)
        {
            @:Display This  @*Display This, will be display*@
 
            <span>
All we do is getting some idea
            </span>
        }
    }
 
</p>

Looping Expressions

@for (int i = 0; i < 10; i++)
{
      <p>i</p> @*also same as writng @:i but it will be display in single line*@
}

 

Escaping Symbols and Using Reversed Keywords

If you need to escape symbol in your view. Let say you want to have your twitter username be displayed with starting with an @ symbol, with Razor syntax, all  what need is adding an @ sign behind. i.e my twitter username is danielmangowi. I want it to be shown as @danielmangowi. I can accomplish that by

<p>@@danielmangowi</p>

Let take a scenario you want to either use Bootstrap classes in your view, or you want to make your own CSS class for a certain link so as you can style it. With Razor makes it easy to make use of all reserved keywords like class.

We can escape reversed keywords by use of @class and then fill the class name you want. For example

 @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

Till next time. You are welcome

 

 

 

Angular2 App – Bootstrap TypeScript Product Management

Happy coding. Today I am going to show on how to build a front end UI using Angular JS – mostly known as Angular2, and Typescript.

Introduction

Angular is a front end framework that helps you to work with DOM is the good manner by the use of the component. Angular is components. Read their docs for more information

Here we start
First, we will need to install Angular on your machine. Follow the guideline from Angular.io on how to install Angular on your computer.

Don’t forget read document dont just follow commands. This will help to understand what you are doing

You can also download a start up project from my git repo that has been already configured by Deborah. On this link

Filter

Made pipe that helps on filtering product that using.

filter.ts

@Pipe({
name: 'productFilter'
})

export class ProductFilterPipe implements PipeTransform {

transform(value: IProduct[], filterBy: string):  IProduct[] {
filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
return filterBy ? value.filter((product: IProduct) =>
product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
}
}

Filter variable

export class ProductListComponent implements OnInit {
pageTitle: string = "All Product List";
imageWidth: number = 40;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string;
products: IProduct[];
constructor(private _productService: ProductService) {
}

Making the use of the filter in the view


type="text" [(ngModel)] = 'listFilter'

Filter by: {{listFilter}}


This how it can be seen when you filter
Angular Event on the button, when button click it will show images.

This has been achieved by creating on click event on the component html and the registering the even on the component ts

When button click it shows and you can hide the image from here.

 

Installing Visual Studio – Windows 32/64

Good news, everyone!

Visual Studio is free for everyone who is interested in Microsoft technologies, though there is the premium version of Visual Studio which makes your life easy. In this today’s post, I am going to show you on how you can install Visual Studio Community edition on Windows machine.

Visual Studio is an IDE – Integrated Development Environment which lets you develop, web based application and also native application(after adding some extensions).

Download Executable file

First, you will need the exe file from Microsoft, head over visualstudio.com and select visual studio community edition and wait for some time for the file to be downloaded on your machine.

Run the exe file

Go to your download folder location, find the exe file and then run it. After that, you are ready to go for any kind of development.

I mostly use Visual Studio for developing Web application and Console application in C# and also TypeScript.

 

My journey and experience in the People’s Republic of China

Travel, work experience, engagement in social activities and hiking to mountains makes you feel you are born again. LOL

June of 2015, I traveled to China for work. I was offered a position as a Junior Developer at NetDragon WebSoft Inc, a massive online game manufacturer in China, that has about 1000 employees around the globe.

I think you wonder, how the hell, I found a position in China while I live in Denmark?…………….., right we have Google and Github. I found this position through Google, there was a trend about a workspace in China that has been built alike StarShip, searched on GitHub jobs and found there was some position offered in China at this company, prepared my resume, cover letter and portfolio then I sent my application.

Start Journey

My journey started at CPH airport, I had to take a plane to France. Spent two hours in France, then I had to board a direct flight to China.

Touch down in Guaghzou, China after 14 hours. Food in plane was amaizing.

Small Stuff

China custom, hmm was pretty long, waited in a line while standing for one hour and a half, just for checking my docs, as I hard to board another flight to Fuzhou, a state that is in Southern China. It was hot as-as lol.

BEING PART OF UI/UX DESIGN TEAM

As my education background was as a Multimedia Designer by then, having more interest in programming, I had to join UI/UX team as a developer. We work close to develop a software for the K-12 student (ND).

PROJECT INTRODUCTION

Our manager, to my left side, she introduces us to the project that we are going to work with until our contract ends.

Meet Lary, a friendly and fun guy, who had a culture shock LOL, sorry Lary.

Office Naps are welcome at any time of break but remember you have to submit your work as planned.

 

 

On top is the happier team that delivered a final product. I am happy to be a part of this team, my gratitude goes to Ms. Anester who saw my talent and invited me to be part of his team. She is the best manager so far I have worked with. My roles as a developer were to actually do the implementation of the system. I worked with HTML5, CSS3, JavaScript, and others technologies.

MUCH SMALLER STUFF

Traveled to Shanghai for a weekend, had a blast around there. We went to nightclubs, drinking being like locals was tough though.

Everyone was tired, as this was Friday evening after work. But couldn’t stop us travel to Shanghai.

LOST MY PASSPORT AND MY 4000 RMB

Upon returning back to Denmark, arrived safe, took a METRO(Self-driving train) until Norreport St. Then after I took S-Train to my place. I had a package with me that had my passport,  4, 000 RMB and other documents. I decided to take a nap on the train, as it was about 45 minutes from Norreport Station to where I live. When I was getting out of the train, I forget my package just beside seat I was sitting. That was the lost not found scenario.

Only my passport was found two years later by police.

But still, what was lost is not everything as  I enjoyed my time in China, gain working experience in different environment, meeting new people from different part of the world, who we became friends.  Thank yo, everyone

Scrap Surf

As an interesting side note, as a head without a body, I envy the dead. Son, as your lawyer, I declare y’all are in a 12-piece bucket o’ trouble. But I done struck you a deal: Five hours of community service cleanin’ up that ol’ mess you caused. Check it out, y’all. Everyone who was invited is here. A true inspiration for the children.