为以下数据库动态创建Div

时间:2019-03-01 11:47:19

标签: c# model-view-controller

对于BELOW表TechCourse包含courseName图像和价格,我需要使用BELOW CShtml代码动态显示这些详细信息。对于每门课程,上面的div代码应该动态显示。

Course_ID   Name    imageurl    courseprize CreatedDate ModifedDate
100 Physics /images/physics.jpg 750 2019-03-01 00:00:00.000 2019-03-01 00:00:00.000
101 Maths   /images/maths.jpg   800 2019-03-01 00:00:00.000 2019-03-01 00:00:00.000
102 Biology /images/bio.jpg 800 2019-03-01 00:00:00.000 2019-03-01 00:00:00.000
103 Chemistry   images/chem.jpg NULL    2019-03-01 00:00:00.000 2019-03-01 00:00:00.000

Div代码:

  <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"><a href="course-single.html">CourseName</a></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"><a href="instructor-single.html">Arfat</a></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>

对于上表,TechCourse包含courseName图像和价格,我需要使用上述cshtml代码动态显示这些详细信息。对于每门课程,上面的div代码应该动态显示。

1 个答案:

答案 0 :(得分:0)

使用以下代码:

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"><a href="course-single.html">@item.Name</a></h3>
                            <div class="post-author">
                                <div class="alignleft no-shrink rounded-circle">
                                    <a href="instructor-single.html"><img src="http://placehold.it/35x35" class="rounded-circle" alt="image description"></a>
                                </div>
                                <h4 class="author-heading"><a href="instructor-single.html">Arfat</a></h4>
                            </div>

                        </article>
                    </div>
                </div>
            }

        </div>
    </div>
</section>