Leonardo Posts - Answer Overflow

Leonardo

•Created by Leonardo on 5/16/2024 in #help

blazor webassembly and web api image file upload

yeah ik it sounds simple ive made few solutions already and I ALSO have saw few good solutions but I was wondering if anyone else here with more experience with blazor wasm could tell me any better approach or something else that I should be concerned about when implementing it. Im thinking about saving the images direct in the web api folder directory OR in the blazor wasm wwwroot VS using a blob storage since I'm using free tier on azure and I dont want to have the risk of losing my image storage just cuz I'm broke 😄 so if anyone else have more experience with it I would love to know thanks

2 replies

CC#

•Created by Leonardo on 11/24/2023 in #help

Sidebar smooth animation in Blazor Wasm

There isn't to much to detail I'm using the default Bootstrap Template from Blazor Wasm project I just want to know how can I add some kind of smooth animation when closing and opening the sidebar. Here's a small piece of code

<div class="sidebar-nav scroll-sidebar @NavMenuCssClass" @onclick=ToggleNavMenu>
    <Sidebar />
</div>

@* Sidebar Interaction *@
@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

<div class="sidebar-nav scroll-sidebar @NavMenuCssClass" @onclick=ToggleNavMenu>
    <Sidebar />
</div>

@* Sidebar Interaction *@
@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

The trick here is adding and removing the *collapse" class from the navbar div. Thanks!

6 replies

CC#

•Created by Leonardo on 10/30/2023 in #help

❔ Blazor wasm with custom styles

not exactly a help request or something like that, just wanted to know if someone else here already worked with Blazor wasm but had to use custom styles on it, like using different frameworks (tailwind, flowbite, bootstrap) and with custom templates, i'm asking this because most of the cases, custom templates use main javascript code and blazor must have JSInterop to run it so i was wondering if i could get any good advice or some cool examples to continue my studies on btw i dont intend on using mudblazor, havit, telerik or wahtever libs that have entire custom components.

26 replies

CC#

•Created by Leonardo on 8/2/2023 in #help

❔ Free tier web hosting for .NET applications, Is it actually a thing nowadays?

Hey, I'm developing a simple app just for my college and I really wanted to use all the free resources that we have around the internet. For example: I'm actually using CockroachDB which have a free tier version where allows the user to have 50 Million RU/Month and 10GB. In case you get to use all the requests in the month and use all the cluster storage. You can wait till next month refresh and clear the database/cluster for more storage. (btw: I know about netlify tho where we can upload react apps and im going to use that too) And I'm looking for more tools like that, since Its just a project focused on education. Anyways, please feel free to correct Im if ive said something that's not right. Thanks!

11 replies

CC#

•Created by Leonardo on 4/29/2023 in #help

✅ Typescript form sending model empty to C# API layer

hey guys, I have these samples here: My React/Typescript POST method

export async function saveProduct(product: ProductsType): Promise<ProductsType[]> {
    try {
        const response = await axios.post(`${ProductsAPI}/CreateProduct`,
            {
                product
            },
            {
                headers: { 'Content-Type': 'application/json' }
            });
        return response.data;
    } catch (err) {
        console.log(err);
        return [];
    }
};

export async function saveProduct(product: ProductsType): Promise<ProductsType[]> {
    try {
        const response = await axios.post(`${ProductsAPI}/CreateProduct`,
            {
                product
            },
            {
                headers: { 'Content-Type': 'application/json' }
            });
        return response.data;
    } catch (err) {
        console.log(err);
        return [];
    }
};

My C# Post controller:

        [HttpPost]
        [Route("CreateProduct")]
        public IActionResult CreateProduct([FromBody] Product model)
        {
            try
            {
                var response = _productService.Add(model);
                return Ok(response.Result);
            }
            catch (Exception ex)
            {
                return BadRequest(ex.InnerException?.ToString());
            }
        }

        [HttpPost]
        [Route("CreateProduct")]
        public IActionResult CreateProduct([FromBody] Product model)
        {
            try
            {
                var response = _productService.Add(model);
                return Ok(response.Result);
            }
            catch (Exception ex)
            {
                return BadRequest(ex.InnerException?.ToString());
            }
        }

Models: - Typescript

export type ProductsType = {
    tenantId: number;
    productId: number;
    name: string;
    description: string;
    price: number;
    productTypeId: number;
    modifiedBy: number;
    dateCreated: Date;
    active: number;
};

export type ProductsType = {
    tenantId: number;
    productId: number;
    name: string;
    description: string;
    price: number;
    productTypeId: number;
    modifiedBy: number;
    dateCreated: Date;
    active: number;
};

- C#

using System;
using System.Collections.Generic;

namespace Products.Domain.Model.Product;

public partial class Product
{
    public int TenantId { get; set; }

    public int ProductId { get; set; }

    public string? Name { get; set; }

    public string? Description { get; set; }

    public decimal? Price { get; set; }

    public int? ProductTypeId { get; set; }

    public int? ModifiedBy { get; set; }

    public DateTime? DateCreated { get; set; }

    public bool? Active { get; set; }
}

using System;
using System.Collections.Generic;

namespace Products.Domain.Model.Product;

public partial class Product
{
    public int TenantId { get; set; }

    public int ProductId { get; set; }

    public string? Name { get; set; }

    public string? Description { get; set; }

    public decimal? Price { get; set; }

    public int? ProductTypeId { get; set; }

    public int? ModifiedBy { get; set; }

    public DateTime? DateCreated { get; set; }

    public bool? Active { get; set; }
}

Yes, the product variable is not empty when I'm debugging but for some reason when it goes for the CreateProduct route in C# it's empty, all fields are null. Any ideas?

15 replies

CC#

•Created by Leonardo on 1/9/2023 in #help

❔ Timeout Issue - (SQL Server & CSharp)

Hello guys, So i have a huge amount of data on my database and i need to make a transaction using procedures with SQL Server and executing those commands through an C# Layer on my backend and sometimes due that high amount of storage data i often get timeout exceptions when doing those actions, i usually put the timeout value as 0 so it's not going to expire my transaction even it takes too long, but recently i tried putting a value like 120s and it solved my timing out issue but i dont get why it worked, is there anyone who can explain to me why it did work and if theres another method to solve these kinda of problems? Thanks!

4 replies

Gaming

Programming