Browsing:

Categorie: Web

Getting started with ASP.NET Web API part 1

Well, I am back. I have been working on a very large project the last couple of months that gently removed the spare time to blog about the things I care about. But I’m jumping in again.

What has happened since then?
Well, it is like the whole ecosystem has changed since last year. It’s all about mobile and BYOD. No one develops for the desktop anymore. Computer sales are dropping. Even Intel is now focussing on tablets and laptops because of declining revenues.

Of course we .NET developers still have a lots of work in enterprises so no worries there. But, if you start building an app, you’d better consider building it for mobile as well.

That means we need to write applications in a platform independent manner. So it means we have to decouple our apps. We need to provide an API that any client application (phone, tablet or desktop) can consume.

So, this is the moment to dive into the ASP.NET Web API which is very lightweight if you want it to.

What are we going to build?
We are going to create an addressbook. It’s a simple CRUD application.
This is What we need:
Visual Studio 2012.3
SQL 2012 Server Express

Next create a new database called AddressBook and execute this sql. Thanks to Brian Dunning.

Getting started with the Web API
Fire up Visual Studio and create a new empty Visual Studio Solution called AddressBook.
Add a new project to this solution -> Visual C# -> Web -> ASP.NET Empty Web Application called AddressBook.Api

In the Package Manager Console, type:

[code lang=”bash”]
Install-Package Microsoft.AspNet.WebApi
[/code]

Next add a new class and name it PersonController:
2013-07-19 10_37_56-AddressBook - Microsoft Visual Studio

Then make it look as follows:

[code lang=”csharp”]
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace AddressBook.Api
{
//class must inherit from the apiController
public class PersonController : ApiController
{
public IEnumerable Get()
{
return new string[] { "Marie", "Tina" };
}
}
}
[/code]

Now we must add a default route for the application. The routes are global to the application. So the place to configure the routes is in Global.asax. So go ahead and add a new Global Application Class file, and add the following:

[code lang=”csharp”]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Security;
using System.Web.SessionState;

namespace AddressBook.Api
{
public class Global : System.Web.HttpApplication
{

protected void Application_Start(object sender, EventArgs e)
{
GlobalConfiguration.Configuration.Routes.MapHttpRoute(
name: "default",
routeTemplate: "{controller}/{id}",
defaults: new
{
id = RouteParameter.Optional
});
}

[/code]

F5 and the result is like this:

2013-07-19 10_45_20-IIS 8.0 Detailed Error - 403.14 - Forbidden

Well that can’t be good.

According to our route, however, we must explicitly enter the name of our controller in the URL. And then it works:

2013-07-19 10_47_49-localhost_54555_Person

Next time I show how to display the data from the AddressBook database.


PHP MVC for an ASP.NET MVC developer part 1. Setting the stage.

Jacqie has a little LAMP!

What if the customer is hosting their sites on a LAMP server? Let’s write some PHP! This has a few advantages over IIS hosting. It is super affordable and available. However. Can I use the MVC pattern in PHP? Can I do OO in PHP? Can I have a layered architecture?

Searching DuckDuckGo for PHP MVC frameworks returns lots of results and it seems there are many PHP MVC Frameworks. See this list, for example.  Now which one to choose? I want to be up speed as soon as possible. And that said, how to get that the PHP/MySQL stuff onto my Windows laptop?

Which PHP MVC Framework?

The PHP MVC framework I will use, should have a. enough documentation, b. support the latest and the greatest PHP version and c, be awesome. My winners are: CakePHP, Kohana (which is not that well documented and also pretty hard to use re the web but their website looks awesome) and YII.

Install the LAMP on Windows

To get a WAMP running, I picked the Uniform Server because it’s a small download and supports the latest PHP (5.4) and MySQL. It is also highly configurable and supports vHosts and stuff like that.

Download, extract and save it somewhere directly under the root of a drive. (D:)

image

Next, click Start_as_program.exe and start Apache and MySQL:

image

If that doesn’t work, just make sure you stop other webservers you might be running (run services.msc). The Uniform Server defaults to port 80.

When the services are started you see the default server displayed. The website live in the /www folder. Here you can put your php files.

PHP IDE

So, what is the best PHP editor/IDE then? I installed Netbeans, because it is easier than Eclipse, according to this article and I want to get up and running asap.

And what’s so funny. Netbeans supports Git. Look at this:

image

Next time, you make coffee and I’ll be sure we have some CakePHP.


ASP.NET MVC 2 and MongoDb Part 4 – First steps with jQuery, AJAX and JSON

In the past articles we created a simple application to submit bugs to a project. If you run the BugBase app, it looks like this:



It’s ugly!
Let’s add some style quickly. And since I am not a webdesigner, I Google for ‘minimalist templates’ and grab a free one, like this one, courtesy to Cardeo.

Masterpages are around for eons, so I won’t go into the technical details of this phenonemon much. After creating a masterpage from Cardeo’s design, BugBase looks like this:

And the bug submitform:

It’s slightly better, no?

JavaScript, Ajax and JSON

Ajax is a technique that provide a snappier user experience through the use lightweight calls to the web server, in stead of full roundtrips to the server every time you submit a form. These asynchronous calls are initiated on the client using JavaScript and involve formatting data, sending it to a web server, and parsing and working with the returned data. While most browsers can construct, send, and parse XML, JavaScript Object Notation (or JSON) provides a standardized data exchange format that is better-suited for Ajax-style web applications. (Okay, I didn’t write the last paragraph myself, Microsoft did. But I never found a more clever desription of the JQuery. AJAX and JSON triade.)

So, let’s Ajaxify the Bug submit form. Let’s make use of the jQuery Form Plugin, which actually does everything for you. Just copy jquery.form.js to the Scripts folder and make references in the head sections of Create.aspx (or in the BugBase.Master).

Next, I’m going to go ahead and add my own .js file (Add, New Item) to the scripts folder for my jQuery code. Also add a reference to this script:

[csharp htmlscript=”true” highlight=”4,5,6″]
<head>
<title>BugBase the Bug submitting app</title>
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.form.js"></script>
<script type="text/javascript" src="../../Scripts/BugBase.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
[/csharp]

Next thing we need to do, is add an ID to the /Bug/Create form. As you can see, the HTML is rendered with the help of HTML Helpers (hm, so that’s where those helpers get their names from) but I am not sure if HTML is better with or without these helpers. So, I just click on View Source in my browser and copy the generated HTML to Create.aspx. Next, I can add an ID to the form, which is important because this is how the jquery.form.js references the submit form.

[csharp language=”true” highlight=”1″]
<form action="/Bug/Create" method="post" id="BugSubmitform">
<div class="editor-label">
<label for="Name">Name</label>
</div>
<div class="editor-field">
<input id="Name" name="Name" type="text" value="" />
</div>
<div class="editor-label">
<label for="Description">Description</label>
</div>
<div class="editor-field">
<textarea cols="20" id="Description" name="Description" rows="2">
</textarea>
</div>
<p>
<input type="submit" value="Create" />
</p>
</form>
<h6><h6>
[/csharp]

Next step is edit the (still empty) BugBase.js and add the following code:

[javascript highlight=”5″]
$(document).ready(function () {
$(‘#BugSubmitform’).ajaxForm({
dataType: ‘json’,
success: function (response) {
$(‘h6’).text("Bugname: " + response.Name + ".
And the description is: " + response.Description);
alert(response.Description);
}
});
});
[/javascript]

Hmm, this is pretty self-explanatory I think? The first line you should know by heart if you plan to write more jQuery.
The next thing you see how we reference the id of the form, i.c. #BugSubmitform. So the form plugin knows at which point it should wake up. Then we are specifying the dataType, which is json. On success, we’re going to display an alert, with the Description of our bug. Also, we will display the bug name and bug description between H6 tags, which I added on the Create.aspx page.

You see, ‘response’ in line 5 is actually the submitted bug serialized in json format. So, we can use all the properties of the Bug class here!

We’re not completely finished though. We’ll have to make sure the Create function of our controller actually returns JSON. Which is in fact very easy:

[csharp]
[RequiresAuthentication]
[HttpPost]
public ActionResult Create(Bug bug)
{
BugSession.Save(bug);

if (Request.IsAjaxRequest())
{
return Json(bug);
}

return new RedirectResult("Create");
}
}
[/csharp]

That’s it. Let’s try it.

To see that we really really Ajaxified things, we should fire Firebug form Firefox. If you check out the console, you’ll notice the XMLHttpRequest, which proves that this was an AJAX request and the returnformat is JSON:

So now we know how we can speed up our app by using AJAX and jQuery and how we can provide the user feedback with the JSON result. As soon as I completed the BugBase app, I will post it here for you to download.