Create a razor view dynamically for below database rows - asp.net-mvc

Question

for BELOW table TechCourse contains courseName image and price I need to display these details dynamically using BELOW CShtml code. for each course, that above div code should display dynamically.
+------------+-----------+---------------------+-------------+--+
| | | | | |
| Course_ID | Name | imageurl | courseprize | |
| 100 | Physics | /images/physics.jpg | 750 | |
| 101 | Maths | /images/maths.jpg | 800 | |
| 102 | Biology | /images/bio.jpg | 800 | |
| 103 | Chemistry | images/chem.jpg | NULL | |
+------------+-----------+---------------------+-------------+--+
Div Code:
<section class="popular-posts-block container">
<header class="popular-posts-head">
<h2 class="popular-head-heading">Most Popular Courses</h2>
</header>
<div class="row">
<div class="slider popular-posts-slider">
#foreach (var TechCourse in Model)
{
<div>
<div class="col-xs-12">
<!-- popular post -->
<article class="popular-post">
<div class="aligncenter">
<img src
Here Course Image
alt="image description">
</div>
<div>
<strong class="bg-primary text-white font-lato text-uppercase price-tag">$99.00</strong>
</div>
<h3 class="post-heading">CourseName</h3>
<div class="post-author">
<div class="alignleft rounded-circle no-shrink">
<a href="instructor-single.html">
Here Image
<img src="http://placehold.it/35x35" class="rounded-circle" alt="image description"></a>
</div>
<h4 class="author-heading">Arfat</h4>
</div>
<footer class="post-foot gutter-reset">
<ul class="list-unstyled post-statuses-list">
<li>
<a href="#">
<span class="fas icn fa-users no-shrink"><span class="sr-only">users</span></span>
<strong class="text fw-normal">98</strong>
</a>
</li>
<li>
<a href="#">
<span class="fas icn no-shrink fa-comments"><span class="sr-only">comments</span></span>
<strong class="text fw-normal">10</strong>
</a>
</li>
</ul>
<ul class="star-rating list-unstyled">
<li><span class="fas fa-star"><span class="sr-only">star</span></span></li>
<li><span class="fas fa-star"><span class="sr-only">star</span></span></li>
<li><span class="fas fa-star"><span class="sr-only">star</span></span></li>
<li><span class="fas fa-star"><span class="sr-only">star</span></span></li>
<li><span class="fas fa-star"><span class="sr-only">star</span></span></li>
</ul>
</footer>
</article>
</div>
</div>
}
</div>
</div>
</section>
for the above table, TechCourse contains courseName image and price I need to display these details dynamically using above cshtml code. for each course, that above div code should display dynamically.

Answer 1

Use the code below:
public ActionResult Index()
{
var coursetab = (from list in dbcontext.Course_master orderby list.CreatedDate descending where list.Course_ID != 0 select list).ToList();
return View(coursetab);
}
ViewCode:
<section class="popular-posts-block container">
<header class="popular-posts-head">
<h2 class="popular-head-heading">Most Popular Courses</h2>
</header>
<div class="row">
<!-- popular posts slider -->
<div class="slider popular-posts-slider">
#foreach (var item in Model)
{
<div>
<div class="col-xs-12">
<!-- popular post -->
<article class="popular-post">
<div class="aligncenter">
<img src="~/Images/CourseImages/#item.Imageurl" style="height:147px;" />
</div>
<div>
<strong class="bg-primary text-white font-lato text-uppercase price-tag"></strong>
</div>
<h3 class="post-heading">#item.Name</h3>
<div class="post-author">
<div class="alignleft no-shrink rounded-circle">
<img src="http://placehold.it/35x35" class="rounded-circle" alt="image description">
</div>
<h4 class="author-heading">Arfat</h4>
</div>
</article>
</div>
</div>
}
</div>
</div>
</section>