Lab3 "Glue API Web Intro"

(This is a continuation from the previous post: Lab2 "Glue API Intro") 

So far, we have written a program that is a desktop client application. Next, we will write a simple ASP.NET web application. For now, we keep the basic functionality same as Lab2 (i.e., login, get a list of projects, get a list of models, and display a model). Later on in the Lab4, we will add JavaScript layer to have UI interaction with the viewer.

The good news is that you should be able to reuse most of Glue web services REST calls that you wrote in the previous labs. In the sample project accompany this labs exercises, we put the common Glue REST calls under Glue folder. You can simply copy the folder to your web application if you are using our sample app.  

Instead of Win Form, we use Web Form when we choose a project in Microsoft Visual Studio (MSVS). For this exercise, a simple single web page will be enough. MSVS ASP.NET development environment provides you a set of tools that is analogous to win forms tools. If you have been programming a windows application using Visual Studio, it will look familiar to you.

Difference is, of course, the UI is a web page. A web page in ASP.NET has an extension "aspx". ASP.NET tools starts with “asp:” in a web form. We can use <iframe/> to embed a display component in the aspx page, which looks like this:

<iframe id="iframeGlue" title="BIM 360 Glue Display Component" src="" runat="server"></iframe>

A code behind an aspx page has an extension "aspx.cs". In the corresponding code, we set src with the url that we constructed in Glue.View(). e.g., 

ButtonView_Click

      protected void ButtonView_Click(object sender, EventArgs e)
      {
         string authToken = HttpContext.Current.Session["authToken"] as string;
         string project_id = HttpContext.Current.Session["projectId"] as string;
         string model_id = HttpContext.Current.Session["modelId"] as string;

         string url = Glue.View(authToken, project_id, model_id);

         // embed a viewer in iframe
         iframeGlue.Src = url;
      }

Note: "iframeGlue" is the value of id in the iframe, which you can reference from your code. 

Notice also that we are using HttpContent.Current.Session to keep temporary, session specific data. Image below shows an example of how an application might look.

You can download the full code project for the Glue API Intro Labs from the earlier post or directly from here. 

Mikako