Hi I’m trying to create an Auth0 Express JS application and are looking to change my ASP.NET MVC 6 Views with DataTables (jquery) to Vash so they can work with ExpressJS. The code I have for this project is based on the Auth0 repo here and their quickstart.
But I don’t know how to get a good user interface working as it was originally written in EJS.
So I want to reuse the front end I made in an ASP.NET and convert to Vash. I am having a lot of trouble as the sample code to do that looks completely different to my project. Here’s one of those samples.
All I got working was the error pages and live reloading. Really it’s just this one view file I need to render. I’ll give you the code in case it helps.
@html.extend('layout', function(model){
@html.block('content', function(model){
<div class="row">
<div class="col-md-12">
<h2>Welcome to the Auth0 ASP.NET Core MVC Starter Project</h2>
<p>To follow along in building this sample please <a href="https://auth0.com/docs/quickstart/webapp/aspnet-core">refer to the Quickstart</a>.
</div>
</div>
<h1>Auth0 Users</h1>
<p>Please select Auth0 user from table and enter any additional information into database.</p>
<table id ="auth0UsersTable" style="width: 200px;">
<thead>
<tr>
<th>
First name
</th>
<th>
Last name
</th>
<th>
Email
</th>
<th>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h4>Create New User</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Index">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserFirstName" class="control-label"></label>
<input id="UFirstNameInput" readonly="true" asp-for="UserFirstName" class="form-control"/>
<span asp-validation-for="UserFirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserLastName" class="control-label"></label>
<input id="ULastNameInput" readonly="true" asp-for="UserLastName" class="form-control"/>
<span asp-validation-for="UserLastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserContactEmail" class="control-label"></label>
<input id="UEmailInput" readonly="true" asp-for="UserContactEmail" class="form-control"/>
<span asp-validation-for="UserContactEmail" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserPhoneNumber" class="control-label"></label>
<input asp-for="UserPhoneNumber" class="form-control" />
<span asp-validation-for="UserPhoneNumber" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserAddress" class="control-label"></label>
<input asp-for="UserAddress" class="form-control" />
<span asp-validation-for="UserAddress" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserPostCode" class="control-label"></label>
<input asp-for="UserPostCode" class="form-control" />
<span asp-validation-for="UserPostCode" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserCountry" class="control-label"></label>
<input asp-for="UserCountry" class="form-control" />
<span asp-validation-for="UserCountry" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserMobileNumber" class="control-label"></label>
<input asp-for="UserMobileNumber" class="form-control" />
<span asp-validation-for="UserMobileNumber" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserState" class="control-label"></label>
<input asp-for="UserState" class="form-control" />
<span asp-validation-for="UserState" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Index" class="btn btn-primary" />
</div>
</form>
</div>
</div>
}
}
@section Scripts {
<script>
$.fn.dataTable.ext.errMode = 'throw';
var Auth0Table = $('#auth0UsersTable').DataTable({
"ajax": {
'type': 'get',
'dataType': "json",
"url": "@Url.Action("GetAllAuth0Users")",
"dataSrc": function (result) {
return result;
}
},
"columns": [
{ "data": "userFirstName"},
{ "data": "userLastName"},
{ "data": "userContactEmail"}
]
});
$('#auth0UsersTable').on( 'click', 'tbody tr', function DisplaySelectedRowItems() {
//IF table row you click on is already selected.
if ( $(this).hasClass('selected') ) {
//deselect the row you already selected.
$(this).removeClass('selected');
}
else {
//Search all visible rows and deselect them.
Auth0Table.$('tr.selected').removeClass('selected');
//Select new row you clicked.
$(this).addClass('selected');
//Get ID of table and some property.
var table = document.querySelector('#auth0UsersTable');
var firstName = document.querySelector('#UFirstNameInput');
var lastName = document.querySelector('#ULastNameInput');
var email = document.querySelector('#UEmailInput');
//Add listener for table click event.
table.addEventListener('click', onTableClick);
//Get click of Table.
function onTableClick (e)
{
var tr = e.target.parentElement;
var data = [];
for (var td of tr.children)
{
data.push(td.innerHTML);
}
firstName.value = data[0];
lastName.value = data[1];
email.value = data[2];
}
}
});
</script>
}
The end output would look like this.
Don’t worry about the data for now. It’s not important to know this but FYI the data is not hardcoded. It’s all coming from the Auth0 user data store.
Not sure how to proceed further with displaying the textboxes and table. It does not have to use DataTables. Just looking to work out the best way how to display the table and textboxes. Please advise if possible, thank you.