C#•14mo ago

✅ Server side or Client side?

Hi, finally i get to MVC and it looks much easier then work with minmal api, so i have some questions about it. should i use views for 100% of my htmlpages? like, as i get, cuz mvc is just part of net core, instead of return View() i can use app.UseDefaultFiles(); and i thing it gonna work without any problem, is it bad tone to mix ways of rendering? also, in old project i was requesting data with fetch and rendering it like this -

async function LoadProduct() {
    const response = await fetch(`/api/product`, {
        method: "GET",
        headers: { "Accept": "application/json" }
    });

    if (!response.ok)
        console.error();

    const data = await response.json();
    const div = `
        <div class="product-container">
            <div class="product-image">
                <img class="product-img" src="../${data.image}" alt="Product Image">
            </div>
            <div class="product-details">
                <p class="titleq pp">${data.title}</p>
                <p class="priceq pp">${data.price}$</p>
                <p class="descriptionq pp">${data.description}</p>
            </div>
        </div>
        `

    document.querySelector("[data-container]").insertAdjacentHTML("beforeend", div);
};

async function LoadProduct() {
    const response = await fetch(`/api/product`, {
        method: "GET",
        headers: { "Accept": "application/json" }
    });

    if (!response.ok)
        console.error();

    const data = await response.json();
    const div = `
        <div class="product-container">
            <div class="product-image">
                <img class="product-img" src="../${data.image}" alt="Product Image">
            </div>
            <div class="product-details">
                <p class="titleq pp">${data.title}</p>
                <p class="priceq pp">${data.price}$</p>
                <p class="descriptionq pp">${data.description}</p>
            </div>
        </div>
        `

    document.querySelector("[data-container]").insertAdjacentHTML("beforeend", div);
};

2 Replies

wwwwOP•14mo ago

with mvc i can do it this way

[Route("/")]
public IActionResult Index()
{
    TestModel model = new TestModel
    {
        Title = "Home page",
        People = new List<User>()
        {
            new User("David", 22),
            new User("Bob", 25),
            new User("Sam", 30)
        }
    };
    return View(model);
}

[Route("/")]
public IActionResult Index()
{
    TestModel model = new TestModel
    {
        Title = "Home page",
        People = new List<User>()
        {
            new User("David", 22),
            new User("Bob", 25),
            new User("Sam", 30)
        }
    };
    return View(model);
}

@model TestModel

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .user{
            background-color: red;
        }
    </style>
</head>

<body>
    @if (Model.People is not null)
    {
        @foreach (User user in Model.People)
        {
            <div class="user">
                <p>@user.Name</p>
                <p>@user.Age</p>
            </div>
        }
    }
</body>

</html>

@model TestModel

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .user{
            background-color: red;
        }
    </style>
</head>

<body>
    @if (Model.People is not null)
    {
        @foreach (User user in Model.People)
        {
            <div class="user">
                <p>@user.Name</p>
                <p>@user.Age</p>
            </div>
        }
    }
</body>

</html>

looks much easier to do what i want. so what im asking, should i do everything using Views or use them only for things i can't do with js?

İrşat•14mo ago

Use model when your page can't do without that data. You can also manage page content depending on that data more easily. As an example, user data in header, name and age. Use AJAX (fetch) when you want asynchronous operations. That allows you to manage page without reloading. For instance, you could login, then say "Login successful!" to user without refreshing the page. If it fails, then you could say something is wrong, check password. You could also try front end frameworks like Angular, React or Vue.

Gaming

Programming

✅ Server side or Client side?