C# ASP.NET Core – AccountController / SPA

I have a project that’s ASP.NET Core (using .NET Framework rather than .NET Core as I have some legacy .NET Framework code I want to use that’s Win32 specific and won’t work in .NET Core), set up as Web Application with Individual Accounts.

Here’s what I want to do. I’m making an Exercise Tracker, so I want to extend the Registration to include a few more fields: Gender, Display Name, Current Weight, Target Weight, Birthday, Height, City, State, Zip, and Personal Bio.

On my registration form I want Birthday to use a Bootstrap Date Picker, Weight/Height to use sliders (or whatever is a good numerical input), and the City/State/Zip to maybe use some kind of Type Ahead. Height is stored in inches but want to display imperial units (e.g. 5’9″). Preferably all Bootstrap themed.

So I’m deciding on a JavaScript library for my SPA between Angular 4, ReactJS, and Aurelia. I’ve looked at some various comparisons, and have played around a little with them. Here’s one problem though, is my Registration.cshtml has fields already defined, and I think as far as I’ve looked into this ReactJS and Angular 4 have a hard time being able to work within an existing DOM where I could just add in components like a “<DatePicker>” control without overriding the whole template DOM with some kind of app container div and then I lose the functionality to be able to easily use the cshtml template functionality (but since this is my first ASP.NET Core project coming from MVC5 it looks like the Razor helper functions may be gone? Is that right?).

Do any of these let me use the existing DOM that looks like this:

<form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
    <h4>Create a new account.</h4>
    <hr />
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Email" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Email" class="form-control" />
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="Password" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Password" class="form-control" />
            <span asp-validation-for="Password" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="ConfirmPassword" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="ConfirmPassword" class="form-control" />
            <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="submit" class="btn btn-default">Register</button>
        </div>
    </div>
</form>

without putting all of that inside of some component class, leaving only a div on my form for a root container?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/26/c-asp-net-core-accountcontroller-spa/
via @lzomedia #developer #freelance #web