C
C#•2y ago
Waranai

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

Did you find this page helpful?