0
    <div class="container_cards">
    @foreach (var card in ViewBag.Cards)
    {
        <div>
            <div>
                <a href="cards/@card.url">
                    <img src="@card.img">
                </a>
            </div>
            <div>
                <a href="cards/@card.url">
                    <h2>@card.title</h2>
                    <h3>@card.definition</h3>
                </a>
                <div>
                    <div>@card.author</div>
                    <div>@card.month/@card.day/@card.year</div>
                </div>
            </div>
        </div>
    }
</div>

I have a code block like this in my cshtml file. It is filled with required information when C# controller function fills the ViewBag.Cards.

But I have pagination. I need to show next 5 cards when I press a next button. I call an AJAX function from JS file and get the next 5 cards information as a JSON string. I replace the current page with the new page with a code as follows:

function change_page(response) {
    var buf = "";
    var responseObject = JSON.parse(response);
    for (var i = 0; i < responseObject.length; i++) {
        buf += `<div>
                    <div>
                        <a href="/cards/${responseObject[i].url}">
                            <img src="${responseObject[i].img}">
                        </a>
                    </div>
                    <div>
                        <a href="/cards/${responseObject[i].url}">
                            <h2>${responseObject[i].title}</h2>
                            <h3>${responseObject[i].definition}</h3>
                        </a>
                        <div>
                            <div>${responseObject[i].author}</div>
                            <div>${responseObject[i].month}/${responseObject[i].day}/${responseObject[i].year}</div>
                        </div>`;
        buf += `</div></div></div>`;

    }
    $(".container_cards").html(buf);
}

I concatenate HTML codes into a string and replace it with current HTML codes. It looks ugly and I wonder if there is a more elegant and efficient way to achieve this, maybe with making use of razor?

I am using ASP.Net 5 by the way.

zibidigonzales
  • 338
  • 3
  • 9
  • You can create an endpoint that serves HTML instead and basically use the same template. –  Aug 03 '22 at 07:33
  • Can you explain more? – zibidigonzales Aug 03 '22 at 08:37
  • You have a controller function that returns additional posts as JSON. You can create an additional controller / function that returns the posts as HTML instead, like the initial view does. Which means the post info is inserted into HTML server-side, and your client-side ajax response handler simply inserts the HTML into the page. –  Aug 03 '22 at 09:55
  • I tried it but it was returning the entire page's HTML. I thought it was inefficient (is it?) compared to the one I used, where only the related part's data is returned as JSON. Is there a way to specifically return the related part as HTML? I was directly using return View(); – zibidigonzales Aug 03 '22 at 10:54
  • Hi @zibidigonzales, have your learnt ASP.NET Core partial view? – Rena Aug 04 '22 at 06:35
  • Hello @Rena. Now you said it, I researched it. It still didn't give me an idea though. Do you have an idea? – zibidigonzales Aug 04 '22 at 07:05
  • 1
    Hi @zibidigonzales, you can create a partial view and put what you want replaced html in it. When you press the button, you can use ajax to call the action which is used to return PartialView(model), for the callback success function in ajax, you can use `$(".container_cards").html(res);` to replace the html by partial view html. You can check [this answer](https://stackoverflow.com/a/65245275/11398810) as a sample. – Rena Aug 04 '22 at 07:12
  • Thank you for your advice, @Rena. I found another way where I navigate between pages using form, where I no longer need to use that respond value anymore. If I can't succeed this way, I will definitely try your advice. Thanks. – zibidigonzales Aug 04 '22 at 10:43
  • 1
    Did you look at this yet? https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-6.0 –  Aug 04 '22 at 12:52
  • I looked at it when @Rena mentioned it, thank you. But as I said I have switched to a new kind of design so it looks like I won't need it for my current project now. I will remember it if I ever need such thing again. Thank you. – zibidigonzales Aug 04 '22 at 12:59
  • 1
    It's the answer to your question, so if it's moot now, feel free to remove the question yourself –  Aug 04 '22 at 13:14

0 Answers0