DEV Community: Seth A Burleson

Recipes, conversions, and fractions; or how I wrote part of my C# app.

Seth A Burleson — Tue, 20 Jul 2021 18:47:44 +0000

Read this post on my blog!

To read on my personal blog platform, click here!

Why is this post here?

I wanted to journal about what I'd done to solve an annoying problem that I couldn't quite find a solution for online, partially to

App Premise

The idea of the app is that a user can select recipes from a database, and plan to eat them later in the week. The app can then provide a master shopping list that converts 2 lbs Chicken and 8oz chicken, into a consolidated "2 1/2 lbs chicken(40oz)" so that shopping is simpler.

The Problem

After setting up my database models (which I may post about at a later date) I realized that there was a major issue converting cooking measurements into code: fractions. One half was easy to represent as a float or double, its a finite number. The problem arose when we added in thirds (which you hopefully know, repeat infinitely). I didn't want to add 3 recipies each calling for a third of a cup of sugar, and then have the list say "You need to buy .9999999..... cups of sugar." Rounding could be a solution, but it seemed like an awkward way of doing things.

The initial Idea

What would be best is if there was a library to use to convert things to and from measurements. This was what I first attempted, using The UnitsNet library. This library is excellent, and I recommend it to many people. The issue I have with it, is that it was far more in depth than what I need it to do.

The other problem was saving its measurements in my database, it was becoming painful to implement, and I knew there needed to be a better avenue.

The solution

After MUCH deliberation, I had a comment on a stackoverflow post suggest turning the measurements into an integer, which got me thinking. I eventually settled on this idea, and while I came up with the volume solution first, the solution for weight measurement is much easier to explain.

When using meat, usually you're going to measure it in pounds or ounces, with the smallest unit generally being a half ounce. So I'm translating 1 Oz to 2 "units", and a pound to 32 "units." With a simple integer, it is possible to easily store it in the database, and also add different measurements together. Once we decode the measurement "32", knowing it is measuring mass (which is done with a property on the ingredient object), we get one pound.

I've done a similar thing with volume, where the base "unit" is 1/24th of a teaspoon. therefore a teaspoon is 24 units, a tablespoon is 72 units, a cup is a lot more (24*3*2*8) units.

You can look at the methods in the service on my GitHub which as of today (7/20/21) is mostly complete, but still has some issues that I've got to figure out.

The remaining issues.

Right now, the "units" are converted to the largest possible measure. This seems like a fine solution, until you call for "1/4 Tablespoon" (18 units) and you get back "3/4 Teaspoons". This isn't wrong, in fact its the exact correct measurement, but when baking/cooking its more practical to have it in a smaller unit. Another similar case is "2 Teaspoons" (48 units), which can turn into "2/3 Tablespoons" (also 48 units). It isn't wrong, but it isn't the best response.

I'm considering fixing this a couple ways:

Allow the user to specify the kind of measurement that should be used.

This is rather unfeasible, because if there are two recipes by different users, and one measures milk in a tablespoon, but the other measures it in a cup, the program has to decide what takes precedence.

Hard code certain measurements

I'm considering hard coding 1/4 tbsp, 1 tsp, 1/2 tbsp, 2tsp, 3/4 tbsp, and 1 tbsp. This would ensure I always get the right kind of measurements. My concern is that it could be confusing to the user if they initially put in 3/4 Teaspoon, but it shows up as 1/4 tablespoon. They could figure out that its equivalent with some math, but it could be a confusing occurance to a first time user.

Any suggestions on which implementation should be used?

Has anyone else solved this problem a different way?

TransFORMing your Forms

Seth A Burleson — Mon, 21 Jun 2021 15:18:09 +0000

Read it on my blog!

On my new Bugtracker project (Try it out here!) I was putting together a button that the user can use to change the state of the project, but I needed this button, and other page elements, to change based on that state.

The big frustration was that when I clicked the button, it was refreshing the page, meaning if a user had a new ticket, finished development and testing, they had reloaded the page a few times without seriously changing the data. I wanted to change the data without refreshing the page, which was where I learned about AJAX, and my life changed completely....

A few things to realize before we start, I'm using the AdminLTE template for most of my formatting on this project. The project is written on the C# stack, but it will work fine for other tech such as Node, flask, or any framework that uses MVC. Most of what we're discussing here is frontend.

Keeping it fresh, without refresh

Before I implemented ajax, I had a controller action which updated the status when the form (which only contains a button and hidden input) submitted, it then returned the new Ticket Details page. At first, I used this action with ajax to perform the same action without refreshing.

First, lets look at my form, which submits to the MVC action, "/Tickets/UpdateStatus":

<form asp-action="UpdateStatus" id="toTesting" class="updateStatus">

                    <input hidden name="ticketId" value="@Model.Id" />
                    <input hidden name="statusName" class="statusName" value="Testing" />
                    <button class="updateBtn btn btn-block btn-warning" type="submit">Update to Testing</button>
                </form>

Here's the basic code used for the ajax request:

$(".updateStatus").on("submit", function (e) {

    //SETUP
    var dataString = $(this).serialize();
    var newStatus = $(this).children(".statusName")[0].value
   //AJAX Function
    $.ajax({
        type: "POST",
        url: "/Tickets/UpdateStatus",
        data: dataString,
//Result Area
        success: function (result) {
            toastr.success(`Ticket Status was updated`)
        },
        error: function (result) {
            toastr.danger("Something went wrong, status wasn't updated")

    });
//While We wait
    e.preventDefault();
    toastr.info('Updating Ticket Status. Please Wait')
});

Pay attention to the comments I left, I'll be referring to them as we enhance the call to interact with our page.

First off, I strongly recommend using toastr for easy toasts, The three lines you see (plus a script import tag) are all I had to write for a simple toasting service that showed the user temporary alerts.

You'll notice that this function seems a bit out of order, Lets walk through it real quick. At the top, we get any of the elements with the updateStatus class, and tell them to perform this function on submit. For the moment, Lets skip over the block beginning with $.ajax( and look at the "while we wait" section. This is what happens on the page when our request is made, but before a response comes back from the server. The important thing is e.preventDefault(); which stops the form from being submitted as normal, which would refresh the page. Then we use Toastr to tell the user to hold on a moment.

When the result comes back from our ajax call, if its successful, we show the user a success toast, if there was an error, we inform them.

We now have a button that updates our ticket to testing, and it works, but we can make it work better and look better as well.

One at a time please

Some users (I've certainly been guilty) are impatient, and will click the button over and over if they don't think its working, despite what your please wait message says. Why not prevent that by disabling the button while the request is processed?

My button has the class updateBtn so jQuery can find it. In the setup part of the function, lets add $(".updateBtn").attr("disabled", true) so that the button will be disabled after the form is submitted. Once we get a success or error, we want to re-enable that button, so in both properties, I'm adding the following line to our function: $(".updateBtn").attr("disabled", false)

Now your form can't be submitted again until one request has either succeeded or returned an error, despite users who have an itchy trigger finger.

Changing the button

I'm going to come clean here, there is more than one button on this page, but theres no need to see them all at once.

The four buttons that are on my page are

<form asp-action="UpdateStatus" id="toTesting" class="updateStatus">

                    <input hidden name="ticketId" value="@Model.Id" />
                    <input hidden name="statusName" class="statusName" value="Testing" />
                    <button class="updateBtn btn btn-block btn-warning" type="submit">Update to Testing</button>
                </form>

                <form asp-action="UpdateStatus" id="returnTesting" class="updateStatus">

                    <input hidden name="ticketId" value="@Model.Id" />
                    <input hidden name="statusName" class="statusName" value="Development" />
                    <button class="updateBtn btn btn-block btn-danger" type="submit">Testing Failed: Return to Development</button>
                </form>
                <form asp-action="UpdateStatus" id="closeTicket" class="updateStatus">

                    <input hidden name="ticketId" value="@Model.Id" />
                    <input hidden name="statusName" class="statusName" value="Resolved" />
                    <button class="updateBtn btn btn-block btn-success mt-2" type="submit">Close Ticket</button>
                </form>
                <form asp-action="UpdateStatus" id="reopenTicket" class="updateStatus">


                    <input hidden name="ticketId" value="@Model.Id" />
                    <input hidden name="statusName" class="statusName" value="Development" />
                    <button class="updateBtn btn btn-block btn-success" type="submit">Reopen Ticket to Development status</button>
                </form>

But we only need to see some of these at a time.

I wrote a small js function to handle this using Jquery's fadeIn and fadeOut methods (originally I used .show and .hide, but this produced a strange transition where things grew from the top left corner.) You just pass in the new status name and the time in ms for the fade to happen.

(ticketstatus is defined with my C# model: var ticketStatus = "@Model.TicketStatus.Name")

var toTesting = $("#toTesting")
var returnTesting = $("#returnTesting")
var closeTicket = $("#closeTicket")
var reopenTicket = $("#reopenTicket")
function statusButtons(status, num) {
    if (status == "Development") {
        toTesting.fadeIn(num)
        returnTesting.fadeOut(num)
        reopenTicket.fadeOut(num)
        closeTicket.fadeOut(num)
    }
    else if (status == "Testing") {
        toTesting.fadeOut(num)
        returnTesting.fadeIn(num)
        reopenTicket.fadeOut(num)
        closeTicket.fadeIn(num)
    }
    else if (status == "Resolved") {
        toTesting.fadeOut(num)
        returnTesting.fadeOut(num)
        reopenTicket.fadeIn(num)
        closeTicket.fadeOut(num)
    }
    else{
        toTesting.fadeOut(num)
        returnTesting.fadeOut(num)
        reopenTicket.fadeOut(num)
        closeTicket.fadeOut(num)
    }
}
statusButtons(ticketStatus,0)

I use Ids to reference each button, and then based on the status, we fade certain ones in or out.

We then call this right after definition, with a fade time of 0, to ensure that only the correct buttons are shown.

I then call this function when the successful result happens. If there was an error, we never changed our data, so theres no need to call the function.

success: function (result) {
            toastr.success(`Ticket Status was updated`)
            ticketStatus = newStatus
            $("#ticketStatusText").text(ticketStatus)
            statusButtons(ticketStatus, 600)
            $(".updateBtn").attr("disabled", false)

        },

newStatus comes from the hidden input within the form.

That should get you started making ajax calls without reloading the page, and give you the oppourtunity to expand. Take a look at the finished result on a ticket details page at the Jameson Bug Tracker (Log in as a demo project manager and then click on any ticket's details)

Let me know what you think in the comments!

Creating a toggleable dark mode theme

Seth A Burleson — Thu, 03 Jun 2021 20:47:37 +0000

Read it on My Blog, The Coder's Codex

It can be surprisingly simple to add a dark mode toggle to your site, but the challenging part can be making that choice persist for the user throughout your app.

Step 1: Allowing the toggle

I'm using AdminLTE as a template(its free to download and its great), which luckily has a wonderful little class ("dark-mode") that can be applied to the body to quickly apply a dark theme to the whole site. Adding a button with the onclick function "toggleDark()" allowed me to access the function I wrote in my site.js file.

function toggleDark() {
    var element = document.getElementById("layoutBody")
    element.classList.toggle("dark-mode")
}

That was really all it took to be able to toggle, once I added the #layoutBody Id to my body element. Then came the tougher part, making that persist across multiple pages

Step 2: Saving user preference to Localstorage

Using localstorage, we can save the user's preference to the browser.

I wrote a function called loadDark() that takes care of this, and called it using jquery.

function loadDark() {
    //default is light mode
    console.log("dark mode is ", JSON.parse(localStorage.getItem("jamesonDarkMode")))
    let dark = JSON.parse(localStorage.getItem("jamesonDarkMode"))
    if (dark === null) {
        localStorage.setItem("jamesonDarkMode", JSON.stringify(false))
    }
    else if (dark === true) {
        document.getElementById("layoutBody").classList.add("dark-mode")
    }
}

And the Jquery:

    <script>
        $(window).on("load",loadDark());
    </script>

This will create a default user preference, but theres no way to change it yet.

Step 3: Changing the user preference

Now back in our other function, we need to add some stuff to our toggleDark functionchange that localStorage variable. Otherwise we will only ever have the default setting of false.

function toggleDark() {
    var element = document.getElementById("layoutBody")
    element.classList.toggle("dark-mode")
    let dark = JSON.parse(localStorage.getItem("jamesonDarkMode")) 
    if (dark) {
        localStorage.setItem("jamesonDarkMode", JSON.stringify(false))
        console.log("Dark mode off")
    }
    else {
        localStorage.setItem("jamesonDarkMode", JSON.stringify(true))
        console.log("Dark mode on")
    }
    //optional to change fontawesome icon on button
    var buttonElement = document.getElementById("darkIcon")
    buttonElement.classList.toggle("fa-moon")
    buttonElement.classList.toggle("fas")
    buttonElement.classList.toggle("far")
    buttonElement.classList.toggle("fa-sun")
}

Now whenever the user clicks the button the localstorage variable will be updated, and saved across your site.

Writing my first C# MVC Unit Test

Seth A Burleson — Tue, 18 May 2021 14:29:12 +0000

After much research and thought, I'm diving in today with a very basic C# unit test, just to get my feet wet with Test Driven Development. The purpose of this test, is to see if the home index will return 2 blogs. It should be very simple, and I honestly rarely expect this test to break, but you've got to start somewhere!

The setup.

I've Installed the xUnit extension into VS2019, and I'm adding a new xUnit Test Project to my solution. Since this is for my blog project, I'll name it BlogTests, and put it in my project folder. This creates a sample test with nothing in it at the moment, but we will fix that shortly.

Auto-generated "Tests"

One of the great things about VS2019 is that it can generate a "test" for you. This test doesn't do anything, but it gives us a starting point. Over in the main project's home controller, if we right click inside the index action (you can right click inside the overall class to make more than one test at once if needed) and go to "Create Unit tests" we get a lovely pop-up that gives us some options. If its not already selected, make sure the Test Framework is xUnit.net 2.0, then select your test project, and <New Test File> before you hit OK. I'm having it assert failure for all tests right now, since there isn't anything going on just yet.

Mocking the database

With EFCore, we actually don't have to make a Mock database, we will instead use the local database for testing. It was rather difficult to get the Mock database working with EFCore, and in my research it turned out to be unnecessary.

Writing the test itself

Once we have our Mock Database, we are ready to write the test. Lets use a more descriptive name than "Index Test". There are 3 parts considered standard to a test name:

The behavior being tested
The constraints
The expected behavior

I'm going to use "Index_ReturnsAViewResult_WithAPagedListOfFiveBlogs" as the name. Its a mouthful, but if my test fails I will immediately know what failed.

There are now 3 parts to our test: Arrange, Act, and Assert.

Arrange

This step involves putting the data in the correct spot, and performing any setup.

var optionsBuilder = new DbContextOptionsBuilder<ApplicationDbContext>();
            optionsBuilder.UseNpgsql(Connection.GetConnectionString(_configuration));
            var _dbContext = new ApplicationDbContext(optionsBuilder.Options);

            var controller = new HomeController(null,_dbContext);

The optionsBuilder is used to configure options for the ApplicationDbContext, which then is passed to the controller. I did not pass the controller a logger at this point, since I am not using the logger to test. Your options builder should take the same arguments that are used in startup.cs to set up your database.

Act.

This part is very simple, just get a result from the controller
var result = await controller.Index(1); //passing page 1
I'm passing a variable because my site is using X.PagedList to paginate (see this post)

Assert

And here's the meat and potatoes, We're going to check that the type is ViewResult, and the model is based on an IPagedList. Then finally, we ensure that the model only includes 5 items for this page.

var viewResult = Assert.IsType<ViewResult>(result);
            var model = Assert.IsAssignableFrom<IPagedList<Blog>>(viewResult.Model);
            Assert.Equal(5, actual: model.Count());

To run a test, we use a series of "assert" statements. If any of these fail, we will recieve a failure on a test. This is where we're going to stop for now, but as a first experiment in testing, I'd call this a success.

My main struggle at the moment is coming up with the right kind of tests. Unlike working with a very math based console app, I don't feel like I have much to test within the controllers.

What kinds of tests do you do with MVC apps?

Whats an Interface?

Seth A Burleson — Fri, 14 May 2021 21:59:43 +0000

Interfaces can be confusing for beginner programmers, but I think I have the right analogy to explain them in simple terms.

Imagine with me for a moment, that you were born into a wealthy family, so wealthy that you need not do very much for yourself, and especially not be bothered with transportation. You even hired the best chauffeur that can handle any vehicle.

The only thing required of you is selecting a vehicle, everything else will be taken care of. If you're to be transported somewhere, you'll need that vehicle to have at least 3 functionalities:

A place for the driver or operator.
A place for you to sit.
some way to move.

There are obviously other things, but they don't concern you. You just need the basics. Does a car fit this description? Yes of course, you have both seats, and it can travel along a road or path. Does a commercial airplane fit the description? Yes again, even though there might be extra seats, it can take you somewhere. even though it does it differently than a car would. A bench would not satisfy the requirements, even though it has 2 seats, it goes nowhere.

This is what an interface calls for, an object that can do certain things. It doesn't care how they get done, as long as the user (or the controller in an MVC app) says "GO" it knows it can go.

Just a quick analogy today. Have a great weekend everybody!

3 steps to Paging in ASP .NET | Blog part 3

Seth A Burleson — Wed, 12 May 2021 17:14:41 +0000

Adding paging to your asp .NET site can be simple. All we need to do is add a few simple nuget packages, and edit the controller and View. Lets get started!

The Nuget packages

We're going to need a few packages to implement paging easily. The easy one is X.PagedList (find it here) but you'll also need X.PagedList.Mvc.Core for the MVC functionality, and X.PagedList.Web.Common for styling.

Adding logic to our controller.

In the controller for the view that requires paging (mine is my home index, but it could be elsewhere depending on the project) we need some variables to determine pages. First off, lets add a nullable int to the parameters called page. To handle the case where it is null, we use the null coalescing operator to default to page 1. Our page size will determine how many elements (in my case: blogs) go on each page, 5 is probably a good number for me, but choose what fits your site the best.

Once we retrieve posts from the database, we'll order the posts by when they were created (you can take this part of Linq out if it doesn't make sense for your project) and then make a paged list using our new function. I'm then passing the blogs into my view.

public async Task<IActionResult> Index(int? page)
        {
            //handles case of no page given, in that case give it the first page.
            var pageNumber = page ?? 1;
            var pageSize = 5;

            var pagedBlogs= await _context.Blog.OrderByDescending(b=>b.Created).ToPagedListAsync(pageNumber,pageSize);
            return View(pagedBlogs);
        }

Once you add any missing directives, that takes care of the controller.

Handling our view

Over in the view (mine is index) at the bottom of your page, lets add a line that shows the user which page they are on, and how many total pages there are. Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount will work, assuming you followed the same naming conventions. Feel free to customize the Text to match the nature of your project, but leave the Model attributes the same.

After that, we'd like have a navigation element that lets users go to the previous or next page. You'll need the directive @using X.PagedList.Mvc.Core as well as the related nuget package (which you should have installed in part 1). The line to do this is @Html.PagedListPager(Model, page => Url.Action("Index", new { page = page })) and you're done!

Its functional, but it looks hideous. This is why we need the X.PagedList.Web.Common, Adding a parameter to our @Html element allows us to change a few options and make it pretty with some bootstrap classes.

@Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }),
                    new PagedListRenderOptions
                    {
                        LiElementClasses = new string[] { "page-item"},
                        PageClasses = new string[] {"page-link"}
                    } 
               )

Mine ended up looking like this:

Now you have a beautiful paged layout. Comment below with your ideas for styling the Elements and page classes. I'm using some of the most basic bootstrap elements.

Thanks for reading

With your new paged layout, users don't have to load all of your content at once, and can navigate back and forth. My next step is to add this kind of functionality to my posts for each blog. What kind of project are you using this on?

Simple MVC Security in ASP.NET | Blog Security pt. 2: Permission and Display

Seth A Burleson — Fri, 07 May 2021 16:51:04 +0000

Part 2 in a series on security for an MVC blog site. See Part 1 here

Step 3: Let yourself back in.

So your application is now so secure that even you can't get in.
Lets make a dataservice with a method that will call 2 other functions:

public class DataService
    {
        /* Any injected services go here!!
           Don't forget the constructor!! */

        public async Task ManageDataAsync()
        {
            //Task 1: Seed roles (create and enter into Authorization system
            await SeedRolesAsync();
            // Task 2 seed a few users into AspNetUsers
            await SeedUsersAsync();
        }

I used a dataservice to seed roles when there are none. (this is the first method in that service)

public async Task SeedRolesAsync()
        {
            //Are there roles in the system? 
            if (_context.Roles.Any())
            {
                return;
            }
            //Spin through enum and do stuff
            foreach (var role in Enum.GetNames(typeof(BlogRole)))
            {
                //create Role in system for each role
                await _roleManager.CreateAsync(new IdentityRole(role));
            }
        }

BlogRole is an enum with Administrator and Moderator are the options, so now we have 2 roles that exist in our database.

Lets then seed an adminUser

private async Task SeedUsersAsync()
        {
            if (_context.Users.Any())
            {
                return;
            }
            var adminUser = new BlogUser()
            {
                Email = "AdminEmail@AdminMailAddress.com",
                UserName = "AdminEmail@AdminMailAddress.com",
                FirstName = "Admin",
                LastName = "Istrator"
                //OTHER DATA FOR USER CLASS
            };
            await _userManager.CreateAsync(adminUser, _configuration["AdminPassword"]);
            await _userManager.AddToRoleAsync(adminUser, BlogRole.Administrator.ToString());


        }

Where my Admin Password is in my appSettings.json, to keep it private from github. You may also use IdentityUser where I used BlogUser to initialize a user.

The ManageDataAsync is called in your program.cs file
Where the contents of main look like:

        public static async Task Main(string[] args)
        {
            //CreateHostBuilder(args).Build().Run();
            var host = CreateHostBuilder(args).Build();
            var dataService = host.Services.CreateScope().ServiceProvider.GetRequiredService<DataService>();
            await dataService.ManageDataAsync();

            host.Run();
        }

Step 4: Hiding things from the unregistered masses

If a new unregistered user comes to my site, I don't want them to click on something that takes them to a page where access is denied. In my view, I'll add a simple if statement

@if (User.IsInRole("Administrator"))
                    {

                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Blogs" asp-action="Index">Blogs</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Posts" asp-action="Index">Posts</a>
                        </li>
                    }

The inner content will be whatever you want to display to users in the administrator role. Adding an || to your if can allow for multiple roles, and else statements can be used to display different data for different roles.

An interesting idea is to give the user a gray button that redirects to a purchase page if they aren't a premium user, showing them what they're missing and giving them an option to upgrade.

Simple MVC Security in ASP.NET | Blog Security pt. 1: Locking it down

Seth A Burleson — Fri, 07 May 2021 16:40:36 +0000

I'm working on a full fledged blog site ( I currently plan to post on dev.to as well, but its a project to show potential employers) and I've just learned how simple it is to implement security. Its almost completely built in to the template, I'll show you how to leverage it to make your site more professional and secure.

What you need to get started

I'm using my Blog project I've spent about a week on, but you don't need anything in depth to try this out. What I'd recommend is a simple scaffolded MVC with ASP.NET Core, Setup your database however you like so it handles user accounts, and we can get started.

As a quick overview, I have a few models, the ones we'll be working with are blogs (collections of posts) and posts.

Step 1: Denying access

In my blog application currently anyone can edit the database, which is bad. I don't want Anyone who stumbles on the site to be able to create a blog without registering and having permission from myself, and I definitely don't want them deleting my hard work. So lets lock it down!

In the controller for my blogs, right in front of my create get action, I'm going to add one simple line of code [Authorize] and then ensure that the using Microsoft.AspNetCore.Authorization; directive is at the top of my controller. (use ctrl+. to fix this error when the red error ramen comes up).

This Locks out any unregistered user from the page, and redirects them to the login page to put them on track.

Step 2: Allowing a little access

Since anyone can register, this is a bit like closing the door but leaving it completely unlocked. If the user is smart enough to register (Most are) they're going to get through the rigorous security. If we beef things up a little we can only allow administrators into the create blog posts. [Authorize(Role = "Administrator")] solves the problem. They will be asked to log in, and then met with an access denied message instead of the ability to create a blog.

I'd rather them not access most of the blog controller, just the index of blogs. Taking a more drastic measure is to instead add [Authorize(Role = "Administrator)] to the entire class. Now access denied will show up for all actions within the Blog controller. On the Index and details actions, we can add [AllowAnonymous] to ensure. This will let Anonymous users back in, so they can browse the blogs and see their details.

This works, but there is a pretty big oversight.

The temporary fix is to remove the security so you can work on it.

We'll fix that in my next blog, which will cover Assigning roles and changing whats displayed to the user.

Customizing .NET's MVC template Part 2- Cards, Images, and transitions

Seth A Burleson — Fri, 30 Apr 2021 19:51:09 +0000

This is part two in a series on improving the MVC template, see part 1 here.

Here's our starting point:

Cards

So I know we just got done making that table look nice, but we can do much better by switching it to display cards. On the index page, let's use the foreach loop to show cards instead of rows on our table. In my opinion, this makes the movies in the database look more appealing than just lines of data, and therefore improves user experience. To get the look right, make sure each card renders with a bg-dark class.

Wrapping these in a div with class card-deck will make your card the same height, and allow footers to be aligned across multiple cards.

The thing I don't really care for is the way the cards blend into the background too easily.

To fix this issue, lets add shadow to the cards with class shadow-lg, and alter the background class to bg-secondary.

This will make the site look a lot better!

The code for this looks like:

Thumbnails

I've built a custom image service to access images in my database, but if you have images stored with your model, an easy thing you can do is to add them to the top of the card.

The problem arrives when you add large images, since the cards take the width of the container. The simplest way to fix this is to use the bootstrap grid. Wrapping each card in a div with a col size class (I personally used col-sm-4 to get 3 per row.) and also adding in a little margin to that column with mb-3. Using h-100 in the card itself will scale the cards, and therefore the images, down to fit your specifications.

This made it look like a card-deck div without actually using the card-deck class. I tried that out but it was putting all my cards on one row unless I was on a small screen.

Transitions

Adding in a touch of animation on page load can really make your page pop. I'm using the CDN from animate.css to add an animation when the card enters the view for the first time by adding the classes animate__animated animate__bounceIn to the card element

This may be a little intense, so look through their library and pick something more subtle

Another option (I do not recommend doing both, as it will trigger the entrance animation when the mouse leaves the area) is to have the card pulse on hover.

To do this, I had to extract a bit of code from the animate.css source specifically here I then renamed their pulse class to .hover-pulse:hover and applied the animate__animated hover-pulse classes to my card.

I stuck with just the entrance animation, the hover was a bit much.

In conclusion

WHEW, that was a lot of tinkering, but now I've got some nifty tricks to customize the rest of the app. While I work on the other pages, what are some visual additions that could add some pop to this project?

Customizing .NET's MVC template Part 1- The Dark Side

Seth A Burleson — Fri, 30 Apr 2021 17:04:09 +0000

So you're beginning to build .NET MVC apps, but the problem is, every time you open your webpage, its the boring black on white text that looks unprofessional and bland. I've chronicled a couple tweaks to make the site look better using bootstrap classes and a little bit of css.

The starting point

As an example, We'll use my MoviePro app, specifically the index of movies. Its basically a movie database with standard CRUD functionality. It is currently only hosted locally, but in a few weeks I should have a more complete version online.

Right now, it looks very plain, like this:

As you can see, there's not much pleasant about the current design, but we're about to fix that.

The light, It burns me.....

Lets try out some simple dark mode fixes for Bootstrap.

First, lets apply a bg-dark class to the body tag. Seems very simple, except that my scaffolded index page doesn't have a body tag. It may seem that way, but really, the scaffolded index takes in the shared layout. Check Views/Shared/_Layout.cshtml, and note that your specific view will be rendered within the main tag.

All the code for your index view, and every other view for that matter, goes within this. If you scroll to the top of the document, you'll see a body tag. Add class="bg-dark" to that.

Oops, our navbar element stubbornly stayed dark, what we have to do here is make sure that the class is changed to navbar-dark instead of light. Probably a good idea to fix the bg-white class at the same time, I'm going to use bg-secondary to try and provide a little separation between my navbar and the body of the page. (you can do the same for the footer element with the bg-secondary class, but you'll need to change the text color next step!)

Now its nice and dark but there's a major issue now.

How can I read that?

Dark text on dark background is a MAJOR no no. You can get away with dark text on the secondary background, but I think we should switch to a lighter text. Let's do a simple find and replace on the shared layout changing text-dark to text-light. That fixes the navbar, but not the body or footer. The footer is at least in the same file so let's change the text-muted class to fix that.

For the body, just add text-light to your classes after bg-dark Which should make things much more readable, except on your table. for that, lets add a table-dark class to each index.

The other thing I've done is changed my link color to a purple, specifically #6206EE for links which are also muted text (see part 2 for why) or links in a footer element, and #8D34FA for other links, which gave my links a bit of life compared to the default blue. I put this in my site.css:

This should leave you with a pleasing dark theme:

Bonus: Dark Inputs

I made my input boxes dark by adding bg-secondary text-light to my input and select elements on the create and edit pages.

In the next installment we'll make a few UI changes, getting us away from the standard table to make things more modern.

Cover image from unsplash.com

Using LocalStorage to improve your webpage

Seth A Burleson — Mon, 26 Apr 2021 01:55:44 +0000

Localstorage is a simple way to save user data on your website, by letting them save it to their browser. All it takes is a little JSON and you'll be on your way to a friendlier user experience.

Getting input

Once you've got some input from a user via Form or browsing data, You'll need to save that to the browser. Localstorage manages its storage based on a key value pair. So take the array or object your data is stored in, assign it to a variable, and stringify it with JSON. The save operation will look something like this

localStorage.setItem("keyAsAString", JSON.stringify(myDataObjOrArray));

You can decide when the localStorage should be updated, but generally, anytime the user resubmits a form or some kind of data, its a good idea to call this method again.

Retrieving values

When the user comes back to the page, check local storage for the data. Make sure to parse it using JSON or you will just get a string.

data = JSON.parse(localStorage.getItem("keyAsAString)) || []

It's very helpful to add a default if this fails, as I did in the above example.

That's all there is to localstorage. Where have you used this in a personal project?

What is MVC?

Seth A Burleson — Sun, 25 Apr 2021 18:28:05 +0000

You've heard it all around the internet talking about programs, MVC is a common topic. Understanding this topic is key to progressing into more advanced web development and moving away from simple single page apps.

What is MVC?

MVC stands for Model View Controller and describes the 3 components of your server-side web app. It is different from a single page app not only because it runs on the server instead of the user's machine, but the code is generally a bit more organized as well.

Model

The model holds that data used by the application. Its usually defined by a class in object oriented languages like C# or Java, but it can be a database like MongoDB or SQLite. Only one model is supplied per page, but it may have other models nested within, depending on what the page needs.

View

The view is rendered on the server and returned to the user. This is generally an HTML template filled with data (data which comes from the model) by the controller.

Controller

The controller handles receiving requests from the user, performing logical operations, combining those with the model of the data, and returning the proper view to the user.

What are the advantages?

The biggest advantage of MVC framework is the ability to separate logic between display logic and business/application logic. This results in cleaner, more organized code that is not only easier to manage and navigate, but also easier to debug and improve. Another advantage is security. Separating your scripts from the visual part of the data can prevent malicious entities from interfering with your code.

How do you think about MVC frameworks? What do you use to organize your code?