Page 15 - MSDN Magazine, September 2018

The default Blazor application that’s created is far from an empty canvas. It includes a basic Web site that utilizes Bootstrap. There are a few sample pages that make it easy to get up and running and start experimenting with Blazor right away. The Fetch data tab displays some dummy weather data from a JSON file embedded into the default application.
How Is This Even Possible?
The concept of C# running in a browser has been a dream since the inception of .NET Silverlight. It worked very well for line-of- business applications, but the fact that it required a plug-in and the emerging iOS model didn’t allow browser plug-ins severely limited the future of Silverlight.
Figure 2 Deserializing the Raw JSON Data
The magic that makes this all possible is a new standard called WebAssembly(WASM).WASMisabinaryformatthatcanbeloaded and run directly in the browser and is currently supported by all the major browsers. The Mono team is working hard on a version of the .NET runtime that runs in WASM. Blazor itself is a framework that builds on top of that Mono runtime for WASM. When the project is compiled, it’s compiled to a .NET assembly that gets loaded and exe- cuted by the Common Language Runtime (CLR) running inside the browser. It’s important to understand that the .NET code running in the browser is running in the same JavaScript security sandbox. See Dino Esposito’s Cutting Edge column in this issue for more on this topic.
Getting a Real Weather Forecast
The forecast is fake data loaded from a file embedded in the proj- ect. I’m going to replace the entire Fetch data page with real data from real Web services. First, I need to replace the HTML with something simple that prompts the user for a ZIP code. Inside the FetchData.cshtml, I replace the HTML code with the following:
<h1>Weather Forecast</h1>
<div class="input-group col-md-3">
<input type="text" class="form-control" placeholder="Zip code" bind="@zip" maxlength="5" />
<div class="input-group-append">
<button class="btn btn-secondary" type="button"
onclick="@GetWeather">Get Weather</button> </div>
</div>
<br /><span style="color:red">@errorMessage</span>
Notice the Razor syntax embedded in the script. The @ sign sig- nals code and variables. The input tag captures the ZIP code and binds it to a variable called zip. The button tag has its onclick method bound to @GetWeather, which calls the GetWeather method in C# (not JavaScript). There’s also a little @errorMessage that can be used if the user enters an invalid ZIP. These variables and methods are defined in the same FetchData.cshtml inside the @functions block:
@functions {
String zip = String.Empty;
String errorMessage = String.Empty;
private async Task GetWeather() {
}
}
Running the application now gives the user the ability to enter the ZIP code and click the Get Weather button. The GetWeather
Figure 5 Displaying Weather Alerts
public class CurrentConditions {
public CurrentConditions() { }
public List<Weather> weather { get; set; } public Main main { get; set; }
public String name { get; set; }
}
public class Weather {
public String main { get; set; } public String description { get; set; } public String icon { get; set; }
}
public class Main {
public decimal temp { get; set; } public decimal temp_min { get; set; } public decimal temp_max { get; set; }
}
Figure 3 Updating the Razor Script
<h1>
@ziplookup.places[0].city, @ziplookup.places[0].stateabbr<br /> @ConvertKtoF(currentcondition.main.temp, 1) °F
</h1> <h2>
@currentcondition.weather[0].main <img src="@imgurl" style="display:inline" /> </h2>
<h3>
<span style="display:inline;color:red">HI
@ConvertKtoF(currentcondition.main.temp_max, 0) °F</span> / <span style="color:blue">LO @ConvertKtoF(
currentcondition.main.temp_min, 0) °F
</span><br /> </h3>
<table class="table"> <thead>
<tr> <th>Date</th> <th>Alert</th>
</tr> </thead> <tbody>
@foreach (var alert in alerts.features) {
<tr>
<td>@alert.properties.effective.ToString("MM/dd/yyyy hh:mmt")</td> <td>
<span style="font-weight:600">@alert.properties.headline</span><br />
<span>@alert.properties.description</span> </td>
</tr> }
</tbody> </table>
Figure 4 Deserializing the JSON Data
public class Alert {
public String type { get; set; } public String title { get; set; } public Feature[] features { get; set; }
}
public class Feature {
public String type { get; set; }
public PropertyInfo properties { get; set; } }
public class PropertyInfo {
public String headline { get; set; } public String description { get; set; } public DateTime effective { get; set; } public DateTime expires { get; set; }
}
msdnmagazine.com
September 2018 11