none
Web Development - C# in the Browser with Blazor

    General discussion

  • Blazor is the new Microsoft experimental framework that brings C# into any browser without a plug-in. But an application in a browser isn’t all that useful unless it can access external data and services, so you'll learn how a Blazor app can call freely available Web services on the Web.

    Read this article in the September 2018 issue of MSDN Magazine

    Tuesday, September 4, 2018 5:54 PM
    Owner

All replies

  • I am very excited for Blazor, and would love to get on the team to help them bring it to market.

    I you can, please forward me a contact.

    I know of a way we could implement C# to completely tie C# to the HTML/DOM, so that controls would go back and forth from HTML element values, to C# models, without having to build onchange handlers, to otherwise capture change HTML element values, to put them into C# data models, or vice versa, once a C# data model has changed, to run HTML/DOM code to update the related elements. I know this, as I've done it for JavaScript, in a better manner than Angular/Vue, as my approach does not require the HTML/DOM have weird attributes added.

    Literally, given <input type=text name="MyModel.Text">

    C# code would be

    class MyModel : MyModelToDomBase { public string Text { get; set; } }

    MyModel mmData = new MyModel();

    mmData.Text = "Hello"; // This would automatically update the HTML element with name="MyModel.Text"..

    If the use changed the text inside the <input> element, the mmData would have its "Text" data member updated.

    Wednesday, September 5, 2018 12:18 PM
  • I have saved this article for later, to read it in deep and do some experiments.
    However just giving quick look I am so excited for this sentence:

    If you come from a traditional Microsoft background and are familiar with ASP.NET Web Forms or Model-View-Controller (MVC), getting up to speed on Blazor is surprisingly easy, especially when compared to the mountain a Microsoft developer must climb to gain the equivalent knowledge in a JavaScript framework such as Angular or React.

    I hate JavaScript and related frameworks as much as I love C# and .NET

    Are we really ready to go with Blazor? I heard it's still an experiment...



    • Edited by Anton2M Wednesday, September 5, 2018 3:48 PM
    Wednesday, September 5, 2018 3:46 PM
  • While I really like this, the Ooui project on GitHub does this and so much more. Is Microsoft looking into something similar to Ooui for a genuine cross platform UI development?
    Thursday, September 6, 2018 2:16 AM
  • I want to discuss more about what Blazor can do vs JavaScript and all JavaScript derived development approaches like jQuery, Angular, VUE.

    With C# being able to overload getters/setters and [] index accessors, and being able to cleanly derive from a base class pre-run time, one will be able to make any kind of custom model, and by simply instantiating it, be able to tie it to HTML elements, without having to add/change any HTML text, or coding in any special initialization step, for the custom model to then be tied to HTML elements.

    The above said, in turn, if the HTML elements go through any GUI change/interaction with a user, they will automatically update instantiated objects to custom models, again with no extra coding, and likewise, if any instantiated object to a custom model is changed, it will be able to update the GUI of the HTML elements, again, with no extra coding steps.

    This is not possible with JavaScript pre-ECMA-2015, and ECMA-2015 is not supported by all browsers, with IE being one of the browsers not supporting it. And even with JavaScript ECMA-2015, one's ability to derrive an instantiated object from a base class, pre-run-time, will not exist, barring the JavaScript itself is turned into a WebAssembly, and even then, the actual derriving is still a run time event to JavaScript, and at run time, one can change the JavaScript prototyping drastically. Put another way, JavaScript even to ECMA-2015 uses run-time prototyping to accomplish derivations.

    To talk a moment about JavaScript pre-ECMA-2015, is its limitation that one can not derive classes, and overload getters/setters too include []. There is Object.prototype.get/set, but those do not work to accept an index/key that C#'s [] overloading would provide. The JavaScript "Class" and "Proxy aka handler.prototype" features, which would allow index [] overloading, did not come till ECMA-2015, as can be seen here:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get

    To talk a moment about how C# would tie to HTML elements without extra coding is that a base class would be made, that in its name, and/or the name of a derrived class, to any C# attributes, would be used to know how to tie to HTML elements, like by a HTML tag name <DIV>, <TABLE> <INPUT>, etc, and/or to an HTML element's attribute, like "name" <INPUT TYPE=TEXT NAME=MyClassName>. Then using standard DOM techniques, the base class would tie onchange events to the base class, with the ability for one to overload base-class functionality in the C# style, and then add C#/.NET get/set/[] accessors, to complete the tie-in betwen model to HTML.

    So, right off the bat, the ability to derrive from a base class, pre-run-time, and not require any further coded steps to tie to a HTML model becomes possible, but C# brings a lot more.

    Here are some more things I can immediately see as extra benefits:

     - Unit testing would become far simpler, more flexible, more powerful.

     - Faster JSON to/from Model parsing.

     - Far better control of HTML5 GUI, too include <CANVAS> GUI.

     - Easier ability to make web apps, with one simple file, that contains all things, CSS, HTML, and Blazor, instead of having to link CSS and Script inside the HTML, and require the server to ensure the proper CSS/Script to HTML are always linked. Main reason for this is simply binary conversion, if nothing else, to store full CSS/HTML as binary (think embedded resource), that the Blozer/C# code simply extracts, uses as need be. In turn, this will make re-use of code better. Ever try to re-use a CSS tied to your most beloved JavaScript/jQuery library to a different set of HTML? And then try that with multiple developers!

    Thursday, September 6, 2018 3:19 PM
  • HTTP 502.5 error with the provided sample code.

    C:\Users\w\Downloads\Code_MillerBlazor0918\ANewHope\bin>dotnet -info.dll
    A compatible SDK version for global.json version: [2.1.300] from [C:\Users\w\Downloads\Code_MillerBlazor0918\ANewHope\global.json] was not found
    Did you mean to run dotnet SDK commands? Please install dotnet SDK from:
      http://go.microsoft.com/fwlink/?LinkID=798306&clcid=0x409

    C:\Users\w\Downloads\Code_MillerBlazor0918\ANewHope\bin>dotnet -info
    A compatible SDK version for global.json version: [2.1.300] from [C:\Users\w\Downloads\Code_MillerBlazor0918\ANewHope\global.json] was not found
    Did you mean to run dotnet SDK commands? Please install dotnet SDK from:
      http://go.microsoft.com/fwlink/?LinkID=798306&clcid=0x409

    • Edited by wavemaster00 Thursday, September 6, 2018 7:54 PM
    Thursday, September 6, 2018 7:52 PM
  • Add me to the list of folks intrigued by Blazor.

    Though I wonder what it means for the end user? In other words is the user experience going to be the same as with Silverlight, where you constantly had the wrong plugin version installed when you started the app? Or oh wait, you don't have the correct dot net framework installed on your client pc first? 

    And if I get to continue to use raw html, but with unobtrusive binding (hopefully two-way) and routing then I'm all for it. My biggest concern is the way that microsoft insists on introducing new layers on top of html to "help" the developers do things. In other words, instead of custom attributes and "server-side" stuff:

    		<div class="form-label-group">
    			<input type="email" class="form-control" placeholder="User Name" asp-for="UserName" autofocus>
    			<label asp-for="UserName"></label>
    		</div>

    In the above code what is bound to the input and how? I.e. is it just implied the the binding is to the value attribute? I guess. And the label, where does the label text come from? Oh, yea its from an attribute on the model:

    	public class UserNameInputModel : ClientModel
    	{
    		[Display( Name = "Email Address" )]
    		[Required]
    		public string UserName { get; set; }
    	}

    How about leaving as little asp footprint as possible:

    		<div class="form-label-group">
    			<input type="email" class="form-control" placeholder="Email Address" id="UserName" value="@UserName" autofocus>
    			<label for="UserName">Email Address</label>
    		</div>

    ...where the "@UserName" is a two-way binding on the value attribute of the input control. That's much easier to read and learn.

    If you need a dynamic caption based on binding context then just make the label text an explicit binding: 

    <label for="UserName">@UserNameCaption</label>

    No need for magic here.

    I suppose then the binding context becomes an issue and it would be cool if it could be set on a parent container or just implied.

    EDIT: after looking at the sample code for this article it got me thinking "where's the controller"? I.e. this is not a criticism of the code but for example lets say I wanted to split the FetchData.cshtml into two components, GetWeather (@page "/getweather") which just displays the zip input and button. And a separate ShowWeather component with a parameterized route (@page "/showweather:zip") that shows the actual data for that zip. How can I get all the csharp out of those .cshtml pages with the exception of the "@" templating directives like @foreach and into a nice, readable .cs file?




    Friday, September 7, 2018 3:39 PM
  • I have the same error in Visual studio, down to it looking for version 2.1.300.

    Have you made any progress on this? Anyone else know what might be going on? I just installed all the latest and greatest and updated Visual Studio 2017, so everything should be ready to go...

    Thanks,

    sutekh137

    PS. Do you have Docker installed? I am seeing some threads about people getting this as related to docker images. I am running Docker but have not touched it in ages, and I did not select anything Docker-ish when I create the Blazor app project...
    • Edited by sutekh137 Friday, September 7, 2018 9:03 PM PS.
    Friday, September 7, 2018 8:58 PM
  • Figured it out, on my system, anyway:

    Project file "global.json" looked like this:

    {
      "sdk": {
        "version": "2.1.300"
      }
    }

    I had just checked my .NET Core versions, and knew I was at 2.1.4, so I simply changed it to this:

    {
      "sdk": {
        "version": "2.1.400"
      }
    }

    And now the web app works!

    Hope this helps!

    sutekh137

    Friday, September 7, 2018 9:43 PM
  • I am getting a http 405 error in the zip code look up.  Http.GetStringAsync

    Any ideas? 

    Thanks David

    Tuesday, September 11, 2018 4:16 PM
  • I suspect you are using Edge as your browser. You are encountering a CORS issue (Cross Origin Resource Sharing).  I encountered the same problem and when I switched to Chrome as the browser, the problem went away (Chrome must be handling CORS differently or the default settings are different).

    I do not know how to register and use ASP.Net CORS within the context of Blazer. Any help would be appreciated.

    bill

    Tuesday, September 11, 2018 5:22 PM
  • It is awesome! Finally we will have safe and fast alternative to that ugly JavaScript. I hope that in future proprietary frameworks will replace other lame standards designed by loungers from W3C and instead of HTML and CSS we will build our web apps with XAML and sell subscriptions in Microsoft Store.
    Wednesday, September 12, 2018 9:25 AM
  • Is Microsoft driving us again to the .NET-on-browser madness (ie. Silverlight) ?
    Tuesday, September 18, 2018 7:30 PM
  • It is awesome! Finally we will have safe and fast alternative to that ugly JavaScript. I hope that in future proprietary frameworks will replace other lame standards designed by loungers from W3C and instead of HTML and CSS we will build our web apps with XAML and sell subscriptions in Microsoft Store.
    LOL, you are a perfect candidate for TypeScript. It's awesome. 
    Tuesday, September 18, 2018 7:42 PM
  • I've had problems as well when updating to VS 2017 15.8 and newer .NET Core versions.  There is a global.json file included in the Blazor project, the build to fail if you don't have version 2.1.302 installed.  The current workaround is to remove the global.json file from the project or install the 2.1.302 version of .NET Code.  

    Download .NET Core 2.1.302

    https://github.com/dotnet/core/blob/master/release-notes/download-archive.md

    Let me know if this solves your problem.  Also, a new version of Blazor is imminent.  It looks like the 0.6 milestone is targeted for Sep 24, the same week the Ignite 2018 conference starts! 


    Jonathan Miller

    Thursday, September 20, 2018 2:01 PM
  • @wavemaster00 - I encountered the same problem and wrote up the resolution at the Blazor GitHub site:
    https://github.com/aspnet/Blazor/issues/916


    • Edited by raddevus Friday, September 21, 2018 2:14 PM
    Friday, September 21, 2018 2:08 PM
  • Love Silverlight. Made many Silverlight apps for web and WP.  

    What are the advantages of Blazor over the Wasm head of Uno Platform which I have been regarding as Silverlight on steroids?


    Hong

    Monday, September 24, 2018 12:44 AM
  • Interesting thoughts. I am going to work on porting an app I am currently working on in Angular to Blazer.  I have been working on a dynamic reactive form generator application for a few months now.  It is based on the following from Angular: https://angular.io/guide/dynamic-form

    Mine is much expanded from this and has a UI for users to create dynamic forms and store them in a database.

    I already have in production for a few years now a version in AngularJS (1.x). It utilizes forms with databinding, so it is not reactive forms, but template driven.

    That said I am trying to plan a port of my new reactive forms generator to Blazer.  I will need to figure out a way to imitate reactive forms in Blazer.

    Any thoughts?


    • Edited by Jerry Lanp Saturday, November 3, 2018 5:16 PM clarity
    Saturday, November 3, 2018 5:14 PM
  • To quote Trump.....this is Yuuuuge! I'm very excited to see this development, as someone with a long history as a .NET developer.

    On a serious note, I've spent countless hours learning the inner workings of Angular, Node, NPM tooling etc as I was convinced (correctly) it would be a game changer.  I don't want to dismiss Angular and it may be a bit early yet, but I suspect this might halt my future decisions when choosing a front-end library and architecture.   There are still countless other .NET developers out there that while might be comfortable with javscript and/or jquery to varying degrees, but Angular is is still not something that the majority of these will get productive with.

    Looking forward to the 1st release.

    Tuesday, December 4, 2018 5:29 PM
  • When will we know if this is going to be something to be released or not?
    Tuesday, December 4, 2018 6:21 PM