DEV Community: Chikere

What Is The Difference Between A MVC Controller And An API Controller?

Chikere — Sun, 13 Apr 2025 13:42:07 +0000

The .NET environment is a robust development platform and gives you a consistent structure for developing software and web applications. So, it is important that you understand MVC and API controllers and all of their interactions and functions. In this article, we will go over both controllers, their roles, and their uses in software development.

Alright, here we go!🚀

What Is The Difference Between A MVC Controller And An API Controller

The main difference between a MVC controller and an API controller is in what they can be used for: a MVC controller is primarily used to return a view or web page to the user while an API controller provides data that can be used by another application.

Now that you have a basic understanding of the difference between both types of controllers, you might be wondering further how they work. Let us dive deeper into both their roles and implementation.

Role Overview

MVC Controllers

These controllers are implemented in the Model-View-Controller (MVC) architecture, (you can read more about this design pattern here). They handle CRUD (Create, Read, Update, Delete) actions between the user and data, generating the result as a web page or view. You use them to build dynamic web applications with user interfaces.

API Controllers

You can use these controllers to provide data from endpoints within an Application Programming Interface or an API for short. They use HTTP services to manage client requests, returning the data in JSON or XML format. You will see them in RESTful service development and can be also known as a Web API.

Controller Implementation

Knowing when to use which type of controller depends on the purpose and the goal of your application. If you need to display dynamic user interfaces, then choose the MVC controller. If you do not wish for the user to interact directly with internal code, then you will choose the API controller.

In my blog application, I used both types of controllers. Down below, you will see the code for PostsController.

public class PostsController : Controller  
{  
    // Omitted for brevity  
}

PostsController is a MVC controller that inherits from the Controller class. It handles user requests and displays blog posts in an article format directly to the screen.

In the next example, you will see PostsAPIController, an API controller that I developed to handle requests and returns article data in JSON format. My portfolio website used this endpoint to access data about the latest blog posts.

[ApiController]  
public class PostsAPIController : ControllerBase  
{  
    // Omitted for brevity  
}

PostsAPIController inherits from the ControllerBase class and uses the ApiController attribute. Another good option to implement could be to have the PostsAPIController inherit from the APIController class.

Wrapping up - The Difference Between A MVC Controller And An API Controller

Ok, you should have gained a better understanding of both MVC and API controllers and the difference between them. And it’s important that you understand these controllers and how you can interact with them. Sometimes projects will dictate which type of controller to implement, depending on how the user will interact with the software or web application.

Thanks and keep coding! ✌️😎

If you enjoyed this article, please don’t hesitate to leave a comment. Also, subscribe to this blog to get email updates on when I publish new articles.

How Are Values Passed From A Form Element in .NET?

Chikere — Sun, 06 Apr 2025 20:24:41 +0000

Working with forms and the HTML elements is a common task you can expect to perform as a developer in .NET MVC. In this post, I will show you how you can use forms to successfully pass information from the frontend to the backend for processing. So without further adieu, let’s jump in!

What are Tag Helpers

In .NET MVC, tag helpers enable values to pass from the HTML form element to the controller. Basically, they help you to create and render HTML elements by the use of server-side code. This makes code more easier to understand and quicker to develop. For a robust explanation of tag helpers and how they work, you can read an article by Microsoft here.

How Are Values Passed From a Form Element

To pass a value from a form element to the backend, you’ll use a form tag helper. It generates a HTML

element with action attribute values for interaction with a MVC controller action.

For example, in my blog application you can create a comment using a form in the Create.cshtml file for the Comments view, which you can see below:

<form asp-controller=”Comments” asp-action="Create" method=”post”>  
   <!-- Input and Submit elements -->  
</form>

The form tag helper above generates the following HTML:

<form method="post" action="/Comments/Create">  
    <!-- Input and Submit elements -->  
</form>

As you can see, MVC generates the action attribute value from the form tag helper attributes asp-controller and asp-action.

When the submit button is pressed, the form is submitted to the Create action of the Comments controller, where values are passed using the Comment model as shown in the example below.

[HttpPost]   
public Create([Bind("PostId,Body")] Comment comment)  
{  
 // Omitted for brevity  
}

In the code you see that the Create action has a HttpPost attribute which signals the MVC runtime environment that we are going to write data. You can also see a Comment parameter with a Bind attribute is passed to the Create action from the form.

The Bind attribute ensures that the PostId and Body properties on the Comment parameter are always passed to the Create action. If they are missing, then an error will occur and the Create action will not execute in creating a comment.

Wrapping Up

You are now more knowledgeable of how values are passed from HTML forms in .NET. Microsoft developed a unique way to pass values in MVC, resulting in a more efficient and simple process.

If you found this article helpful, don’t hesitate to leave a comment down below in the comment section. Also, subscribe to the blog to receive updates for new content uploaded to the blog.

What is Razor Syntax?

Chikere — Sun, 06 Apr 2025 20:20:16 +0000

At first, the name razor syntax can sound off-putting, but it is not a hard concept to understand. You will find that using razor syntax in web development is another effective and efficient way to document your code.

What Is Razor Syntax

Razor syntax is a method that you use in Visual Studio to integrate backend code such as the C# programming language directly within the HTML code used to display web pages in the web browser.

We prefix an @ symbol in the front of a line of backend code to indicate it as razor syntax. And for multiple lines of code, you will use '@{ }' where the code is inserted between the curly braces.

How Does Razor Syntax Work

You’ll write razor syntax in a CSHTML file or razor file, which corresponds to a view file where both C# and HTML code are alongside each other.

When you run a program in Visual Studio and inspect the web page, you will see the result of razor syntax as backend code manipulating the front end. You should see just HTML and no C# code because it has been transformed into corresponding HTML.

For example, I used razor syntax alongside HTML code to embed C# within my blog application. Below is an example from the start of an abbreviated Create.cshtml file which handles the view for creating a new blog category.

@using CEBlog.Services  
@inject IImageService imageService  
@model IEnumerable<'CEBlog.Models.Blog'>  
@{  
    ViewData["Title"] = "Index";  
    Layout = "~/Views/Shared/_LayoutForAdmin.cshtml";  
}

<h1>Index</h1>  
<p>  
    <a asp-action="Create">Create New</a>  
</p>  
…

The first couple of lines show an @ symbol in from of C# code which introduces a namespace, a service, a model, and display variable.

In the following example, you will also see a @foreach statement which will render to HTML code, thereby reducing duplication of code and saving time in the application for you the developer.

<table class="table">  
    <thead>  
        ...  
    </thead>  
    <tbody>  
        @foreach (var blog in Model)  
        {  
            <tr>  
                <td>  
                    @Html.DisplayFor(modelItem => blog.Name)  
                </td>  
                <td>  
                    @Html.DisplayFor(modelItem => blog.Description)  
                </td>  
                <td>  
                    @Html.DisplayFor(modelItem => blog.Created)  
                </td>  
                <td>  
                    @Html.DisplayFor(modelItem => blog.Updated)  
                </td>  
                <td>  
                    <img class="img-fluid" width="200px" src="@imageService.DecodeImage(blog.ImageData, blog.ContentType)" />  
                </td>   
                <td>  
                    <a asp-action="Edit" asp-route-id="@blog.Id">Edit</a> |  
                    <a asp-action="Details" asp-route-id="@blog.Id">Details</a> |  
                    <a asp-action="Delete" asp-route-id="@blog.Id">Delete</a>  
                </td>  
            </tr>  
        }  
    </tbody>  
</table>

Benefits of Razor Syntax

Simplified HTML generation: you can embed C# code directly into HTML, making it easier to generate dynamic content.
Easy integration of C# code: the @ symbol enables the transition between HTML and C# code, allowing you to write server-side logic within a view file.
Streamlined and efficient coding experience: No need to explicitly denote server blocks within the HTML code

Tip: To comment code using razor syntax, use @* *@. The comment is inserted between the asterisks. Comments in this format will not be visible in the rendered output.

Conclusion - Razor Syntax

There you go! We went over razor syntax, how it works, and its benefits. You should now be able to confidently implement razor syntax in the views of your projects to speed up your workflow and be more efficient.

If you like this content, please don’t hesitate to leave a comment in the comment section below. Also, feel free to subscribe to this blog so that you can get updates to this blog whenever new content is added.

What is MVC Routing in .NET?

Chikere — Sun, 06 Apr 2025 20:14:08 +0000

It might seem like magic, but there is a method in .NET to how you are able to view web pages in the web browser. In this blog post, I will go over MVC routing, how it works, and why it is important. Now, let’s dive right in!

What Is MVC Routing

MVC stands for Model-View-Controller and is a programming design pattern implemented in .NET MVC. If you’re unfamiliar with this pattern, then go ahead and read an explanation about it in my earlier post here.

MVC routing is the method to how we navigate to pages in .NET MVC web applications. When the user submits a URL into the address bar of the web browser, the URL is mapped to the controller action, which returns the correct web page into the browser.

The default MVC routing pattern is Controller/Action/Id and is included as part of the source URL. The pattern maps the first segment to the controller, the second segment into the controller action, and then the third segment to the id parameter, which identifies the specific data or model.

How Does MVC Routing Work

Suppose you entered the following URL into the address bar of the web browser:

MVC routing would then map this URL into the pattern, https://localhost:1234/{controller}/{action}/{id} where the parameters are:

Controller = Home. The Home controller would handle the request.
Action = Details. The Details action or method of the the Home controller
Id = 3. This parameter is optional and is used to query the data for the specific model.

For example, in my blog application, the Blogs Details page displays the information for a blog. In order to display the blog information onto the web page, you will enter the request URL into the address bar of the web browser:

The routing of Blogs/Details/5 would work by having the Details action of the Blogs controller query the database for the blog with Id of 5. If found, the blog is returned as a Model to the View where the information is displayed in the browser as a web page.

Common Questions - MVC Routing

What happens if we don’t enter one or some of the parameters?

If you don’t enter a controller name, it defaults to the value of Home. If you don’t enter an action, it defaults to the value of Index. If you don’t enter an id, it defaults to an empty string.

How do we make changes to the MVC routing in .NET?

To make changes, you must edit the endpoint routing in the Program.cs file that comes with every MVC project file. In the following example you see the code of the default MVC routing for a sample .NET MVC project:

app.UseEndpoints(endpoints =>  
{    
    endpoints.MapControllerRoute(  
        name: "default",  
        pattern: "{controller=Home}/{action=Index}/{id?}");  
});

Conclusion - MVC Routing

So, that’s MVC routing explained in a nutshell. Basically, to request a web page in .NET, you must use parameters along with the source URL to map to the correct view.

I hope you enjoyed learning about MVC routing. If you found this article to be helpful, don’t forget to leave a comment below and subscribe to receive future updates on any new articles.

How To Solve Fizz Buzz With JavaScript

Chikere — Sun, 06 Apr 2025 20:07:25 +0000

Are you learning to code or preparing for an upcoming coding interview? In this post, we’ll explain the Fizz Buzz problem and then take you through the process of solving this exercise. At the end, you should be confident enough in solving this exercise and other similar coding problems. If that sounds good to you, then let’s go!

What is Fizz Buzz?

Fizz Buzz is a coding exercise where you’ll output the numbers from 1 to 100 with multiples of three displayed as "Fizz", multiples of five as "Buzz", and then multiples of both three and five as "FizzBuzz".

This coding problem has been given during coding interviews to candidates who want to be selected for a software developer role. Knowing how to solve this type of challenge can bring you one step closer to gaining that position.

How to Solve Fizz Buzz

To solve this challenge in the simplest way possible, use HTML and CSS to create the user interface on a static web page. And then you’ll code in JavaScript to handle the user interaction and to display the final results.

Now, break the execution down into three JavaScript functions: a controller function, a helper function, and a view function. This will keep your program organized, manageable, and easily understood.

Step 1 - Implement Controller Function

Use the controller function as the main function, which is responsible for the overall flow of execution of the program. The controller function will call the other functions to process the numbers and complete the results.

The following code shows the controller function named getValues. It receives the user input, parses the fizz and the buzz values as numbers, and then calls both the helper and view functions for processing.

function getValues() {
    //get values from the page
    let fizzValue = document.getElementById("fizzValue").value;
    let buzzValue = document.getElementById("buzzValue").value;

    //Need to validate input
    //parse into integers
    fizzValue = parseInt(fizzValue);
    buzzValue = parseInt(buzzValue);

    if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
        //call generateNumbers
        let numbers = generateNumbers();

        //call displayNumbers
        displayNumbers(fizzValue, buzzValue, numbers);
    } else {
        alert("You must enter integers");
    }
}

Step 2 - Create a Helper Function

Now, use the helper function to handle one task. This function assists the controller function in breaking down code into smaller, manageable code.

The following code illustrates the helper function named generateNumbers. It generates and transfers numbers 1 to 100 into an array using a for loop, and then returns the number array back to the controller function.

function generateNumbers() {
    let numbers = [];

    //get all numbers from start to end

    for (let index = 1; index <= 100; index++) {
        //execute in a loop until index = endValue
        numbers.push(index);
    }

    return numbers;
}

Step 3 - Code the View Function

Finally, use a view function to display the results to the user. The following code shows the view function named displayNumbers.

function displayNumbers(fValue, bValue, numbers) {
    let templateRows = "";

    for (let index = 0; index < numbers.length; index++) {
        let className = "";
        let number = numbers[index];

        if (index % 5 == 0) {
            templateRows += ``;
        }

        if (number % fValue == 0 && number % bValue == 0) {
            className = "fizzBuzz";
            templateRows += `${className}`;
        }
        else if (number % fValue == 0) {
            className = "fizz";
            templateRows += `${className}`;
        }
        else if (number % bValue == 0){
            className = "buzz";
            templateRows += `${className}`;
        }
        else {
            templateRows += `${number}`;
        }

        if ((index + 1) % 5 == 0) {
            templateRows += ``;
        }
    }
    document.getElementById("results").innerHTML = templateRows;
}

First, the controller function passes the fizz value, the buzz value, and the numbers array into the function. The values are processed using a for loop and if-then-else conditional statements. They are then templated onto the page using different colors to maximize user readability.

Tips for Solving Fizz Buzz

Use a language that you are comfortable in programming. The examples shown were coded in JavaScript, however you could’ve used another language such as C# or Python.
Learn about arrays, the uses for an array, and all of the functions for arrays.
Be comfortable with creating for-loops, including while and do-while loops.
Know about conditional statements, such as if and if-else, and when to use them.

Wrapping Up - How To Solve Fizz Buzz

There you go! You’ve learned about the Fizz Buzz exercise and the process for solving it, using a controller function, a helper function, and a view function. Although I’ve only shown you one way, there are other ways in solving this problem. You should be ready now to practice by coding some more on your own.

I’ve also coded my own solution for Fizz Buzz and deployed it using Netlify. You are welcome to demo it here.

If you found this post helpful, don’t forget to leave a comment below. Also, subscribe to sign-up for future email updates when new articles are published to this blog.

What is MVC?

Chikere — Sun, 06 Apr 2025 20:03:24 +0000

MVC is a software programming design pattern and stands for model, view, controller. It is used to achieve a separation of concerns, which makes it easier to organize and program complex applications.

Controller: It listens for requests from the user and then takes those requests to interact with both the models and the views.
Model: It is the data or information from the database that is being requested in order to display to the user.
View: This is the graphic user interface (gui) or web pages that display information on the screen to the user.

For example, in my contact book application, the Contact Edit page displays to the user the information for a single contact on a page in the web browser. The Edit action will have the Contacts Controller query the database for the contact using the contact id number. If the id number is found, the contact is returned as a Model to the View where information is displayed on the web page.

public class ContactsController : Controller
{
    // GET: Contacts/Edit/5
    [Authorize]
    public async Task<IActionResult> Edit(int? id)
    {
        if (id == null || _context.Contacts == null)
        {
            return NotFound();
        }

        string appUserId = _userManager.GetUserId(User);

        var contact = await _context.Contacts.Where(c => c.Id == id && c.AppUserID == appUserId)
                             .FirstOrDefaultAsync();

        if (contact == null)
        {
            return NotFound();
        }

        return View(contact);
    }
}

So, learning about MVC is simple to understand and easy to implement. Don’t forget to leave a comment below to add to the conversation.