C#•9mo ago

✅ Some web things

Soooo... i have this app

using System;
using webtest;

class Prgram
{
    static void Main(string[] args)
    {
        var dataSource = new List<Person>() {
            new Person("David", 21),
            new Person("Bob", 25),
            new Person("Tom", 30),
            new Person("Sam", 23),
        };

        var builder = WebApplication.CreateBuilder(
            new WebApplicationOptions
            {
                WebRootPath = "StaticFiles"
            }
        );
        var app = builder.Build();

        app.MapGet("/users", async (context) =>
        {
            context.Response.ContentType = "text/html; charset=utf-8";
            await context.Response.SendFileAsync("Html/users.html");
        });

        app.UseWhen(
            context => context.Request.Path == "/users" && context.Request.Method == "GET",
            appBuilder => appBuilder.Run(async context =>
            {
                await context.Response.WriteAsJsonAsync(dataSource);
            })
        );

        app.MapGet("/", async (context) =>
        {
            context.Response.ContentType = "text/html; charset=utf-8";
            await context.Response.SendFileAsync("Html/index.html");
        });

        app.Run();
    }
}

using System;
using webtest;

class Prgram
{
    static void Main(string[] args)
    {
        var dataSource = new List<Person>() {
            new Person("David", 21),
            new Person("Bob", 25),
            new Person("Tom", 30),
            new Person("Sam", 23),
        };

        var builder = WebApplication.CreateBuilder(
            new WebApplicationOptions
            {
                WebRootPath = "StaticFiles"
            }
        );
        var app = builder.Build();

        app.MapGet("/users", async (context) =>
        {
            context.Response.ContentType = "text/html; charset=utf-8";
            await context.Response.SendFileAsync("Html/users.html");
        });

        app.UseWhen(
            context => context.Request.Path == "/users" && context.Request.Method == "GET",
            appBuilder => appBuilder.Run(async context =>
            {
                await context.Response.WriteAsJsonAsync(dataSource);
            })
        );

        app.MapGet("/", async (context) =>
        {
            context.Response.ContentType = "text/html; charset=utf-8";
            await context.Response.SendFileAsync("Html/index.html");
        });

        app.Run();
    }
}

problem - On home page i have link which goes to /users, i wanted it to work like, first time when go to users, send users html page, and on this users html page wanted to make <ul> with event listener "onload" to request data. any advice?

28 Replies

Angius•9mo ago

Not sure why you need the middleware But yes, you certainly can do that

wwww•9mo ago

me too, some old preoblem when i didn't get how to send html and db data together

Angius•9mo ago

Well you can't do that

wwww•9mo ago

problem is -

Angius•9mo ago

Sending the static file is one thing, one endpoint Sending the data encoded as JSON is another thing, another endpoint

wwww•9mo ago

so, how do i do tihs? should i send html page as static file?

Angius•9mo ago

app.MapGet("/users", async (context) =>
{
    context.Response.ContentType = "text/html; charset=utf-8";
    await context.Response.SendFileAsync("Html/users.html");
});

app.MapGet("/api/users", () => dataSource);

app.MapGet("/users", async (context) =>
{
    context.Response.ContentType = "text/html; charset=utf-8";
    await context.Response.SendFileAsync("Html/users.html");
});

app.MapGet("/api/users", () => dataSource);

const data = await fetch('/api/users');
const users = await data.json();

for (const user of users) {
    // ...
}

const data = await fetch('/api/users');
const users = await data.json();

for (const user of users) {
    // ...
}

wwww•9mo ago

forgot to send static files and was confused why tf js not working lmao so, i got

var dataSource = new List<Person>() {
    new Person("David", 21),
    new Person("Bob", 25),
    new Person("Tom", 30),
    new Person("Sam", 23),
};

var builder = WebApplication.CreateBuilder(new WebApplicationOptions { WebRootPath = "StaticFiles" });
var app = builder.Build();
app.UseStaticFiles();

app.MapGet("/users", async (context) =>
{
    context.Response.ContentType = "text/html; charset=utf-8";
    await context.Response.SendFileAsync("Html/users.html");
});

app.MapGet("/api/users", () => dataSource);

app.MapGet("/", async (context) =>
{
    context.Response.ContentType = "text/html; charset=utf-8";
    await context.Response.SendFileAsync("Html/index.html");
});

app.Run();

var dataSource = new List<Person>() {
    new Person("David", 21),
    new Person("Bob", 25),
    new Person("Tom", 30),
    new Person("Sam", 23),
};

var builder = WebApplication.CreateBuilder(new WebApplicationOptions { WebRootPath = "StaticFiles" });
var app = builder.Build();
app.UseStaticFiles();

app.MapGet("/users", async (context) =>
{
    context.Response.ContentType = "text/html; charset=utf-8";
    await context.Response.SendFileAsync("Html/users.html");
});

app.MapGet("/api/users", () => dataSource);

app.MapGet("/", async (context) =>
{
    context.Response.ContentType = "text/html; charset=utf-8";
    await context.Response.SendFileAsync("Html/index.html");
});

app.Run();

this tabs....

window.onload = async () => {
    const response = await fetch('/api/users');
    const data = await response.json();

    data.forEach(user => {
        const li = `<li>${user.name} ${user.age}</li>`;
        document.querySelector("[data-list]").insertAdjacentHTML('beforeend', li);
    });
};

window.onload = async () => {
    const response = await fetch('/api/users');
    const data = await response.json();

    data.forEach(user => {
        const li = `<li>${user.name} ${user.age}</li>`;
        document.querySelector("[data-list]").insertAdjacentHTML('beforeend', li);
    });
};

wwww•9mo ago

and got

Angius•9mo ago

lgtm

wwww•9mo ago

thx a lot again, now i even realize what is this "api" ting in route is badhun1UA

Angius•9mo ago

Anytime

wwww•9mo ago

btw, today i had resuls api day at my corse and i decided to refactor it like this -

app.MapGet("/", async () =>
{
    string path = $"Html/index.html";
    string type = "text/html; charset=utf-8";

    byte[] file = await File.ReadAllBytesAsync(path);
    return Results.File(file, type);
});

app.MapGet("/", async () =>
{
    string path = $"Html/index.html";
    string type = "text/html; charset=utf-8";

    byte[] file = await File.ReadAllBytesAsync(path);
    return Results.File(file, type);
});

is this better? also wanted top make something like this,

static void Main(string[] args)
{
    var builder = WebApplication.CreateBuilder(new WebApplicationOptions { WebRootPath = "StaticFiles" });
    var app = builder.Build();
    app.UseStaticFiles();

    app.MapGet("/", SendHtml("users"));

    app.MapGet("/api/users", () => dataSource);

    app.MapGet("/", SendHtml("index"));

    app.Run();
}

static async Task<IResult> SendHtml(string page)
{
    string path = $"Html/{page}.html";
    string type = "text/html; charset=utf-8";

    byte[] file = await File.ReadAllBytesAsync(path);
    return Results.File(file, type);
}

static void Main(string[] args)
{
    var builder = WebApplication.CreateBuilder(new WebApplicationOptions { WebRootPath = "StaticFiles" });
    var app = builder.Build();
    app.UseStaticFiles();

    app.MapGet("/", SendHtml("users"));

    app.MapGet("/api/users", () => dataSource);

    app.MapGet("/", SendHtml("index"));

    app.Run();
}

static async Task<IResult> SendHtml(string page)
{
    string path = $"Html/{page}.html";
    string type = "text/html; charset=utf-8";

    byte[] file = await File.ReadAllBytesAsync(path);
    return Results.File(file, type);
}

Angius•9mo ago

That string interpolation isn't necessary there And I personally prefer using var

wwww•9mo ago

butt im forget some c# basics and got funny thing

Angius•9mo ago

But besides that, sure, seems fine to me And yeah, this works But you need that lambda

wwww•9mo ago

yeah i did it

Angius•9mo ago

async () => await SendHtml("page")

wwww•9mo ago

wwww•9mo ago

but have some error

wwww•9mo ago

wwww•9mo ago

was reading rn oh nvm

Angius•9mo ago

wwww•9mo ago

i copied yea

static void Main(string[] args)
{
    var dataSource = new List<Person>() {
        new Person("David", 21),
        new Person("Bob", 25),
        new Person("Tom", 30),
        new Person("Sam", 23),
    };

    var builder = WebApplication.CreateBuilder(new WebApplicationOptions { WebRootPath = "StaticFiles" });
    var app = builder.Build();
    app.UseStaticFiles();

    app.MapGet("/users", () => SendHtml("users"));
    app.MapGet("/api/users", () => dataSource);
    
    app.MapGet("/", () => SendHtml("index"));

    app.Run();
}

static async Task<IResult> SendHtml(string page)
{
    string path = $"Html/{page}.html";
    string type = "text/html; charset=utf-8";

    byte[] file = await File.ReadAllBytesAsync(path);
    return Results.File(file, type);
}

static void Main(string[] args)
{
    var dataSource = new List<Person>() {
        new Person("David", 21),
        new Person("Bob", 25),
        new Person("Tom", 30),
        new Person("Sam", 23),
    };

    var builder = WebApplication.CreateBuilder(new WebApplicationOptions { WebRootPath = "StaticFiles" });
    var app = builder.Build();
    app.UseStaticFiles();

    app.MapGet("/users", () => SendHtml("users"));
    app.MapGet("/api/users", () => dataSource);
    
    app.MapGet("/", () => SendHtml("index"));

    app.Run();
}

static async Task<IResult> SendHtml(string page)
{
    string path = $"Html/{page}.html";
    string type = "text/html; charset=utf-8";

    byte[] file = await File.ReadAllBytesAsync(path);
    return Results.File(file, type);
}

looks better now but... any advice about placeing of things?

wwww•9mo ago

wwww•9mo ago

i mean, looks like they are in totally random order, and its not rly matter when tey are to work

Angius•9mo ago

Personally, I like ordering routes from most shallow So

"/"
"/users"
"/users/data"
"/users/data/foo"
"/posts"
"/posts/all"

"/"
"/users"
"/users/data"
"/users/data/foo"
"/posts"
"/posts/all"

And grouping by area You can also use route groups for that: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis/route-handlers?view=aspnetcore-7.0#route-groups

wwww•9mo ago

Gaming

Programming

✅ Some web things