C
C#•16mo ago
wwww

✅ 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
Angius•16mo ago
Not sure why you need the middleware But yes, you certainly can do that
wwww
wwwwOP•16mo ago
me too, some old preoblem when i didn't get how to send html and db data together
Angius
Angius•16mo ago
Well you can't do that
wwww
wwwwOP•16mo ago
problem is -
Angius
Angius•16mo ago
Sending the static file is one thing, one endpoint Sending the data encoded as JSON is another thing, another endpoint
wwww
wwwwOP•16mo ago
so, how do i do tihs? should i send html page as static file?
Angius
Angius•16mo 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
wwwwOP•16mo 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
wwwwOP•16mo ago
and got
Angius
Angius•16mo ago
lgtm
wwww
wwwwOP•16mo ago
thx a lot again, now i even realize what is this "api" ting in route is badhun1UA
Angius
Angius•16mo ago
Anytime
wwww
wwwwOP•16mo 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
Angius•16mo ago
That string interpolation isn't necessary there And I personally prefer using var
wwww
wwwwOP•16mo ago
butt im forget some c# basics and got funny thing
Angius
Angius•16mo ago
But besides that, sure, seems fine to me And yeah, this works But you need that lambda
wwww
wwwwOP•16mo ago
yeah i did it
Angius
Angius•16mo ago
async () => await SendHtml("page")
wwww
wwwwOP•16mo ago
wwww
wwwwOP•16mo ago
but have some error
wwww
wwwwOP•16mo ago
wwww
wwwwOP•16mo ago
was reading rn oh nvm
Angius
Angius•16mo ago
wwww
wwwwOP•16mo 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
wwwwOP•16mo ago
wwww
wwwwOP•16mo ago
i mean, looks like they are in totally random order, and its not rly matter when tey are to work
Angius
Angius•16mo 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
wwwwOP•16mo ago
badhun1UA

Did you find this page helpful?