DotNetify - for building .NET-based modern web applications


#1

I’d like to share a new open source project to help .NET developers build highly interactive, real-time web applications on ASP.NET that take less effort to learn, code, and maintain compared to using Javascript client-side frameworks, and provide opportunity to leverage .NET capabilities even on the front-end.

This project was based on other open-source libraries such as Knockout and SignalR. I have live examples and documentation put up on the website at http://dotnetify.net. The host is IIS 8.0 on Windows Server 2012, so SignalR is actually using Web Socket, which I think is pretty cool.

The Visual Studio solution is available at GitHub: https://github.com/dsuryd/dotNetify.

I hope anyone here can provide constructive feedback; the idea is pretty unconventional and against the current web trend that wants to put more and more heavy logic on the client browser, while I believe it’s best to only have platform-specific UI logic there to enhance/optimize user browsing experience and leave the heavy-duty presentation logic on the server which can take advantage of .NET framework language features and patterns that make it so much easier and efficient to do many things, yet keeping the app just as responsive, interactive, and bandwidth-efficient.

Anyway, thank you Microsoft for giving us such a great framework in .NET and hopefully it will play a more significant role in the front-end web/mobile space!


#2

Looks interesting. Does it support packaging the single page application as a (mobile) app that also runs disconnected/offline?

That is make a hybrid web app, instead of a hosted web app.

If it does, can one push new versions to the client via the web? (probably not, since appstore rules wouldn’t allow loading binary code at the client pushed via the web - guess for webassembly they’ll have to make an exception in the future). Btw, could compile to javascript/typescript maybe with one of those c# metacompilers for such cases


#3

I’m afraid not, I will probably look into it at some point in the future. Thanks for the idea!


#4

*** Project Update ***

DotNetify has been ported to .NET Core. Use this to build real-time HTML5 / C# web and hybrid mobile apps that runs on any .NET web platform: ASP.NET Core, ASP.NET 4.5, Mono, and also NancyFX.

  • It’s simple and lightweight: no complicated Javascript client-side framework, no REST API Controllers.
  • Support modern tooling: Typescript, NPM, WebPack.

Visit https://github.com/dsuryd/dotNetify-app-template for sample SPA on Apache Cordova project, deployable on Android and iOS, and with offline support.


#5

Hi dsuryd,

I’ve found the prospect of DotNetify very interesting and have enjoyed some of the examples but could you please tell me whether it is compatible with MVC?

I want to be able to pass URL parameters to a React chart.


#6

Hi,

dotNetify is an abstraction over SignalR and therefore can definitely be
used with MVC. It will be two different pipelines on the same middleware,
therefore they will share authentication context, but not web session.

I am not clear on passing URL to React chart; could you elaborate?


#7

Thank dsuryd,

Sure, lets imagine you have a database of users, containing personal information like age, weight, BMI…As a developer I dont want to create a static page for every user. Instead, I want to pass the userID in the URL and have the one page display the information for that user.
I can’t imagine it wouldn’t be possible but I’m struggling to work out how with the examples.


#8

The connect API has the ability to set the view model’s property value; This can be used to initialize the back-end view model to the desired user ID in your case.

So for example, assuming you are using the Razor view to build your entry page, the Controller parses the query string and passes the user ID as Model to the View template. Inside the template, set the ID as property argument to the React component:

<script type="text/javascript">
   var chart = React.createElement(MyChart, { UserID: '@Model.UserID' });
   ReactDOM.render(chart, document.getElementById('Content'));
</script>

Then inside the MyChart's constructor (or getInitialState):

class MyChart extends React.Component {
   constructor(props) {
      super(props);
      dotnetify.react.connect("MyChartVM", this, () => this.state, state => this.setState(state), { UserID: this.props.UserID });
      this.state = {};

When the component is rendered, the initial request to get the state from MyChartVM will carry the UserID argument, which will be set to the view model’s property if it has matching name.

   public class MyChartVM: BaseVM
   {
      public string UserID {
          get { return Get<string>(); }
          set
          { 
              Set(value);  
              LoadUserData(value);
          }
}

#9

New version of dotNetify for ReactJS released:

  • Client can receive server-side exceptions.
  • Improved API to send JSON Web Tokens on SignalR connection.
  • Server-side library targetting .NET Standard 1.6 and .NET 4.6.2.
  • Full integration with ASP.NET Core DI, and default basic DI for library targetting .NET 4.6.2.
  • Full support for custom middleware and view model filter pipelines.
  • Basic JWT authentication middleware.
  • Authorize filter and attribute for view model authentication and claims-based authorization.

http://dotnetify.net/react


.NET Foundation Website | Blog | Projects | Code of Conduct