View data from the database-CodePudding

this year I need to build a project on HTML I choose to build a store so I build a database for all the items (i call it items) every item has a logo(link to photo), name, price, and description. and now I want to show all the items on the main page (every single item on an item card) but! I need to show it Dynamically(That it will only show products that exist in the database) I try to do it with function with response.write but it did not succeed... If you can help it would be great!

CodePudding user response：

The database is unknown so let me try to explain the logic. Let me give an example over MVC since you use c# and html tags by definition. In Razor view it will look like below

@foreach(var product in ProductList){
   <div>
       <div><img src="@product.logoImgConvertedToBase64" /></div>
       <div>@product.name</div>
       <div>@product.price</div>
       <div>@product.description</div>
   </div>
}

CodePudding user response：

Create web APIs of return Json type in MVC architecture with C# and include and display the Jquery library in the project.

Jquery library CDN link in; https://code.jquery.com/jquery-3.6.0.min.js

Example backend code;

public JsonResult AllProduct() 
{
    var list = db.products.ToList(); //products name table
    return Json(list, JsonRequestBehavior.AllowGet);
}

To connect with jquery in html page;

$.ajax({
   type: "GET",
   url: "AllProduct",
   contentType: "application/json",
   dataType: "json",
   success: function(response) {
      $("#table").html(response); //Example #table div show return all value
   },
   error: function(response) {
      console.log(response);
   }
});