C#•10mo ago

✅ MVC to Blazor

Hello! so awhile ago, I made an mvc. I am now attempting to port the code over into a new blazor project but am unsure on how to do this, as with the mvc I had 1 view called Events, which would get opened via clicking a button in a drop down menu that would open the view with different data based on which drop down button you clicked. but with Blazor, through all my research I don't think it is possible to return a page as such. here is some of my code from the mvc, any help would be greatly apricated! The event controller:

public async Task<IActionResult> Index(int id)
{
  List<Event> events = _context.Event.AsNoTracking()
  .Where(c => c.EventTribe == id && c.EventStatus == 1 ||  c.EventTribe == 11 && c.EventStatus == 1)
  .OrderBy(c => c.EventYear)
  .ToList();

  if (events == null)
  {
    return RedirectToAction("Index", "Home");
  }

  return View(events);
}

public async Task<IActionResult> Index(int id)
{
  List<Event> events = _context.Event.AsNoTracking()
  .Where(c => c.EventTribe == id && c.EventStatus == 1 ||  c.EventTribe == 11 && c.EventStatus == 1)
  .OrderBy(c => c.EventYear)
  .ToList();

  if (events == null)
  {
    return RedirectToAction("Index", "Home");
  }

  return View(events);
}

10 Replies

EnderWolfOP•10mo ago

The view

@{
ViewData["Title"] = "Index";
int tribe = int.Parse(@Context.Request.RouteValues["id"].ToString());
string tribeName = "";
string tribeColor = "";
switch(tribe)
{
case 0:
tribeName = "Nightwings";
tribeColor = "#8c54d1";
break;
case 1:
tribeName = "Icewings";
tribeColor = "#a5c9d6";
break;
//more of the above
}
}

<body style="background-color:@tribeColor">
<div class="container">
<h1 class="d-inline">Lore of the @tribeName</h1>
<table class="table">
<thead>
<tr>
<th class="col-2">Name</th>
<th class="col-4">Description</th>
<th class="col-2">Year</th>
<th class="col-1">Type</th>
<th class="col-2">Submited By</th>
<th class="col-2"></th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) 
{
<tr>
<td>
<div class="Event-Rows">
@Html.DisplayFor(modelItem => item.EventName)
</div>
</td>
<td>
<div class="Event-Rows">
@Html.DisplayFor(modelItem => item.EventDescription)
</div>
</td>
<td>
<div class="Event-Rows">
@Html.DisplayFor(modelItem => item.EventYear)
</div>
</td>
<td>
<div class="Event-Rows">
@switch (item.EventType)
{
case 0:
<text>None</text>
break;
//More of the above
}
</div>
</td>
<td>
<div class="Event-Rows">
@Html.DisplayFor(modelItem => item.EventSubmitedBy)
</div>
</td>
<td>
<div class="btn-group d-flex">
<a class="btn btn-danger m-1" asp-action="Delete" asp-route-id="@item.EventId">Delete</a>
<a class="btn btn-dark m-1" asp-action="Details" asp-route-id="@item.EventId">Details</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>

@{
ViewData["Title"] = "Index";
int tribe = int.Parse(@Context.Request.RouteValues["id"].ToString());
string tribeName = "";
string tribeColor = "";
switch(tribe)
{
case 0:
tribeName = "Nightwings";
tribeColor = "#8c54d1";
break;
case 1:
tribeName = "Icewings";
tribeColor = "#a5c9d6";
break;
//more of the above
}
}

<body style="background-color:@tribeColor">
<div class="container">
<h1 class="d-inline">Lore of the @tribeName</h1>
<table class="table">
<thead>
<tr>
<th class="col-2">Name</th>
<th class="col-4">Description</th>
<th class="col-2">Year</th>
<th class="col-1">Type</th>
<th class="col-2">Submited By</th>
<th class="col-2"></th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) 
{
<tr>
<td>
<div class="Event-Rows">
@Html.DisplayFor(modelItem => item.EventName)
</div>
</td>
<td>
<div class="Event-Rows">
@Html.DisplayFor(modelItem => item.EventDescription)
</div>
</td>
<td>
<div class="Event-Rows">
@Html.DisplayFor(modelItem => item.EventYear)
</div>
</td>
<td>
<div class="Event-Rows">
@switch (item.EventType)
{
case 0:
<text>None</text>
break;
//More of the above
}
</div>
</td>
<td>
<div class="Event-Rows">
@Html.DisplayFor(modelItem => item.EventSubmitedBy)
</div>
</td>
<td>
<div class="btn-group d-flex">
<a class="btn btn-danger m-1" asp-action="Delete" asp-route-id="@item.EventId">Delete</a>
<a class="btn btn-dark m-1" asp-action="Details" asp-route-id="@item.EventId">Details</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>

Joschi•10mo ago

What kind of Blazor app are you running? Server or WASM? Is your page a new page (different unique url) or on the same page as the drop-down?

EnderWolfOP•10mo ago

Server. The drop down is in the nav bar of the site. So, I think a new page??

Joschi•10mo ago

I'm not too familiar with server, but because it well runs on the server I guess it can access the DB without an API call. But anyways. What you could do is create a page with route parameters. Like @page /tribes/{tribeId}. Then you get that get that id or whatever from the route:

c#
[SupplyParameterFromQuery("tribeId")]
public int? TribeId {get; set;}

c#
[SupplyParameterFromQuery("tribeId")]
public int? TribeId {get; set;}

and now you can fetch your data in OnParametersSetAsync(), however you like. API call, direct DB connection, whatever (Not sure about the best practise here for Blazor Server).

EnderWolfOP•10mo ago

Sorry, I was asleep. I'll give that a go thank you Would I place all this code, that get's the data from the database in the page's file?

  List<Event> events = _context.Event.AsNoTracking()
  .Where(c => c.EventTribe == id && c.EventStatus == 1 ||  c.EventTribe == 11 && c.EventStatus == 1)
  .OrderBy(c => c.EventYear)
  .ToList();

  List<Event> events = _context.Event.AsNoTracking()
  .Where(c => c.EventTribe == id && c.EventStatus == 1 ||  c.EventTribe == 11 && c.EventStatus == 1)
  .OrderBy(c => c.EventYear)
  .ToList();

Joschi•10mo ago

That's what I would be unsure about. Maybe you find some advisory on best practice online. I only really work with WASM apps that call backend APIs. Having your pages depend on the DBcontext would be quite the tight coupling, but if you are sure you will stick with the server based app it's probably fine to do?

EnderWolfOP•10mo ago

Ah alright. Makes sense. I'm willing to change from blazor server, that was just my best guess at what would work best. this is more or less just a personal project to work on between finishing my diploma and starting uni. the idea is for it to also help a small fandom I am a part of, but the main goal is just something to do in my spare time that I enjoy as to not turn coding into a thing I only do for work/study The idea was to have the events page that would open with different data/background colours based on the id. but I can always just make a bunch of individual pages for each option in the drop down, though I thought doing it this way would allow better code reusability

Joschi•10mo ago

I mean yes it does and I think you should create one page instead of multiple. You could abstract the DBcontext away in some way if you don't want to couple that tightly. But in the end if you change to some other technology I guess it's a major rework anyways. So you could just use the DBcontext directly for now. https://learn.microsoft.com/en-us/aspnet/core/blazor/blazor-ef-core?view=aspnetcore-8.0 I just briefly skimmed that, maybe it helps.

ASP.NET Core Blazor with Entity Framework Core (EF Core)

Learn how to use Entity Framework Core (EF Core) in Blazor apps.

EnderWolfOP•10mo ago

I see, I'll take a look at that link. ty! I feel like that should be able to help me, but I've not yet leant a lot of the concepts it's talking about such as factory. thank you for trying to help me though! I will still keep trying to learn stuff from that link

EnderWolfOP•10mo ago

I think it all works now! I found this video and followed it. https://youtu.be/S6Eq0g7GGJk?si=aabPgFFcH-1Afnr4

Patrick God

YouTube

CRUD with the Blazor Server Render Mode in .NET 8 🔥

🚀 Get the .NET 8 Web Dev Jump-Start Course for FREE: https://dotnet8.patrickgod.com 💖 Support me on Patreon for exclusive source code access: https://patreon.com/_PatrickGod 🐦 Let's get social on Twitter/X: https://twitter.com/_PatrickGod 🔗 Let's connect on LinkedIn: https://www.linkedin.com/in/patrickgod/ Table of Contents: 00:00 CRUD with the...

Gaming

Programming

✅ MVC to Blazor