Skip to content

Breeze with Web Forms ASP.net

April 8, 2013

I came across a couple of questions regarding using Breeze with ASP.net Web Forms (e.g. here and the last comment here). Here’s a quick simple way example:

1. Open Visual Studio (in my case VS Express 2012 for Web).

2. Create a new “ASP.NET Empty Web Application”. For this example it is called “BreezeApiProject”.

Image

3. Install the “Breeze for ASP.NET Web API projects” NuGet package.

Image

There should be a few new files added to your project:

Two referenced assemblies

Breeze.WebApi
Irony
Entity Framework

Five scripts

Scripts/breeze.min.js
Scripts/breeze.debug.js
Scripts/breeze.intellisense.js
Scripts/q.js
Scripts/q.min.js

One configuration file

App_Start/BreezeWebApiConfig.cs

4. I will be linking to a database called “FootballTeams” containing on table called “Teams”. Here is what the table looks like:

Image

and here is the data in it:

Image

You can create this table with the following sql:

USE [FootballTeams]
GO

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Teams](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Name] [nchar](255) NULL,
	[Description] [nchar](255) NULL,
 CONSTRAINT [PK_Teams] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

5. We can connect to this database by creating a new Entity Framework edmx file called FootballTeams and name the model FootballTeamsModel.

Image

6. Now we can right click on “BreezeApiProject” in the solution explorer add a new “Web API Controller Class” called “TeamsController.cs”.

Image

7. We’ll add in the following using:

using Newtonsoft.Json;
using Breeze.WebApi;
using Newtonsoft.Json.Linq;

then we’ll add “[BreezeController]” right above the class declaration

and replace the code in the file so that it looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;
using Breeze.WebApi;
using Newtonsoft.Json.Linq;

namespace BreezeApiProject
{
    [BreezeController]
    public class TeamsController : ApiController
    {

        readonly EFContextProvider<FootballTeamsEntities> _contextProvider =
            new EFContextProvider<FootballTeamsEntities>();

        // ~/api/footballteams/Metadata 
        [HttpGet]
        public string Metadata()
        {
            return _contextProvider.Metadata();
        }

        //Expand for subitems
        [HttpGet]
        public IQueryable<Team> MyFootballTeams()
        {
            return _contextProvider.Context.Teams;
        }

        // ~/api/footballteams/SaveChanges
        [HttpPost]
        public SaveResult SaveChanges(JObject saveBundle)
        {
            return _contextProvider.SaveChanges(saveBundle);
        }
    }
}

8. That’s all we have to setup on the server side, Now let’s test it out on the client side. Create a new “Default.aspx” if you don’t already have one. Once it is created put the following into it:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BreezeApiProject.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="Scripts/q.js"></script>
    <script src="Scripts/breeze.debug.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>

    <script type="text/javascript">
        var manager = new breeze.EntityManager('api/teams');
        $(document).ready(function () {


            var query = new breeze.EntityQuery()
                .from("MyFootballTeams");

            manager.executeQuery(query).then(function (data) {
                ko.applyBindings(data);
            }).fail(function (e) {
                alert(e);
            });
        });
    </script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Teams</h2>
        <p data-bind="visible: !results">Fetching data ... </p>
        <ul data-bind="foreach: results, visible: results" style="display:none">
          <li>
            <input type="text" data-bind="value:Name" />
            <input type="text" data-bind="value:Description" />
          </li>
        </ul>
    </div>
    </form>
</body>
</html>

Now all you should have to do hit “Run” and you now have Breeze running in Web Forms.
Note: In this example I am using knockout to bind my results. If you have any questions or if this example isn’t working for you then let me know.

About these ads

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: