Thứ Năm, 12 tháng 1, 2023

[.NET] Hướng dẫn truyền dữ liệu querystring để xây dựng các trang chi tiết

 Các bược thực hiện xây dựng trang chi tiết.

Bước 1: Tận dụng Template xây dựng layout mới và đặt tên là ProductLayout.

Bước 2: Tại controller sản phẩm, tạo 1 Action đặt tên là ChiTietSanPham có 1 tham số truyền vào kiểu int tên tham số là id.

Trong Action đó, truy vấn trả về View với dữ liệu Model là sản phẩm được lọc theo id.

Đồng thời tạo 1 view tương ứng kế thừa tư ProductLayout.

Bước 3: Về phần nội dung trang chi tiết sản phẩm, các bạn tìm đến phần nội dung chi tiết từ Template ta sẽ tiến hành chỉnh sửa lại cho phù hợp.

Kết quả sau khi thực hiện




Nội dung ProductLayout

<!--A Design by W3layouts

Author: W3layout

Author URL: http://w3layouts.com

License: Creative Commons Attribution 3.0 Unported

License URL: http://creativecommons.org/licenses/by/3.0/

-->

<!DOCTYPE html>

<html>

<head>

    <title>New Store A Ecommerce Category Flat Bootstarp Resposive Website Template | Signle :: w3layouts</title>

    <link href="~/Content/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="~/Content/js/jquery.min.js"></script>

    <!-- Custom Theme files -->

    <!--theme-style-->

    <link href="~/Content/css/style.css" rel="stylesheet" type="text/css" media="all" />

    <!--//theme-style-->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,

Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />

    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <!--fonts-->

    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'><!--//fonts-->

    <!-- start menu -->

    <link href="~/Content/css/memenu.css" rel="stylesheet" type="text/css" media="all" />

    <script type="text/javascript" src="~/Content/js/memenu.js"></script>

    <script>$(document).ready(function(){$(".memenu").memenu();});</script>



    <script src="~/Content/js/main.js"></script>

    <script src="~/Content/js/simpleCart.min.js"></script>

</head>

<body>

    <!--header-->

    <div class="header">

        <div class="header-top">

            <div class="container">

                <div class="search">

                    <form>

                        <input type="text" value="Search " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">

                        <input type="submit" value="Go">

                    </form>

                </div>

                <div class="header-left">

                    <ul>

                        <li><a class="lock" href="login.html">Login</a></li>

                        <li><a class="lock" href="register.html">Register</a></li>

                        <li>

                        </li>


                    </ul>

                    <div class="cart box_1">

                        <a href="checkout.html">

                            <h3>

                                <div class="total">

                                    <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)

                                </div>

                                <img src="images/cart.png" alt="" />

                            </h3>

                        </a>

                        <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p>


                    </div>

                    <div class="clearfix"> </div>

                </div>

                <div class="clearfix"> </div>

            </div>

        </div>

        <div class="container">

            <div class="head-top">

                <div class="logo">

                    <a href="index.html"><img src="~/Content/images/logo.png" alt=""></a>

                </div>

                @Html.Action("MenuPartial", "Home")


                <div class="clearfix"> </div>

            </div>

        </div>


    </div>



    <!--content-->

    <!---->

    @RenderBody();

    <!--//content-->

    <div class="footer">

        <div class="container">

            <div class="footer-top-at">


                <div class="col-md-4 amet-sed">

                    <h4>MORE INFO</h4>

                    <ul class="nav-bottom">

                        <li><a href="#">How to order</a></li>

                        <li><a href="#">FAQ</a></li>

                        <li><a href="contact.html">Location</a></li>

                        <li><a href="#">Shipping</a></li>

                        <li><a href="#">Membership</a></li>

                    </ul>

                </div>

                <div class="col-md-4 amet-sed ">

                    <h4>CONTACT US</h4>


                    <p>

                        Contrary to popular belief

                    </p>

                    <p>The standard chunk</p>

                    <p>office:  +12 34 995 0792</p>

                    <ul class="social">

                        <li><a href="#"><i> </i></a></li>

                        <li><a href="#"><i class="twitter"> </i></a></li>

                        <li><a href="#"><i class="rss"> </i></a></li>

                        <li><a href="#"><i class="gmail"> </i></a></li>


                    </ul>

                </div>

                <div class="col-md-4 amet-sed">

                    <h4>Newsletter</h4>

                    <p>

                        Sign Up to get all news update

                        and promo

                    </p>

                    <form>

                        <input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">

                        <input type="submit" value="Sign up">

                    </form>

                </div>

                <div class="clearfix"> </div>

            </div>

        </div>

        <div class="footer-class">

            <p>© 2015 New store All Rights Reserved | Design by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>

        </div>

    </div>

</body>

</html>

Nội dung Controller SanPhamController
public ActionResult ChiTietSanPham(int? id)
        {
            if(id==null)
            {
                return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);

            }    
            
            var sp = db.SanPhams.SingleOrDefault(n => n.MaSP == id && n.DaXoa==false);
            if (sp==null)
            {
                return HttpNotFound();
            }    
            return View(sp);
        }


Người đăng: vào lúc

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)