在ASP.NET中创建商店网站

Afzaal Ahmad Zeeshan

4.77/5 (21投票s)

2014年8月9日

CPOL

11分钟阅读

285922

26899

本文介绍如何使用ASP.NET和Microsoft WebMatrix软件快速启动一个商店网站。

下载源代码 - 4.3 MB

引言

本文解释了如何在无需编写ASP.NET所有代码的情况下启动商店网站。它还解释了一些商店网站的基本规则和规定，这将帮助您更好地构建网站。

环境要求

您需要安装Microsoft WebMatrix或Visual Studio，以便构建、编译和运行此项目。对于初学者，您可以从Microsoft网站 (http://www.microsoft.com/web) 下载Microsoft WebMatrix，然后运行此项目。当您下载该软件时，Web平台安装程序将安装项目运行所需的所有软件。

您需要将此解压文件夹复制/粘贴到 C:/Users/<username>/Documents/My WebSites/<此处>

之后，您将能够在WebMatrix中运行此项目。

背景

许多论坛已经开发，许多问答网站也已提供，但刚进入开发领域的新手开发人员仍然会问与此问题相关的问题：“我如何在ASP.NET中开发自己的电子商务/购物网站？”。所以，我在这里写了一篇文章，将解释他们应该/如何开始他们的旅程，并添加一些代码行以使其运行。

什么是电子商务

电子商务也称为Electronic Commerce（电子商业），您将您的整个业务放到互联网上，客户可以使用用户界面触发交易。

大多数新开发人员被“电子商务”这个软件名称所迷惑，认为它可能是一个非常大的项目，或者需要非常难以构建的东西。

没有这样的事情，即使是只有一点ASP.NET知识的开发人员也可以为他们的小公司开发一个简单的网站。

主要要点/要求

像所有其他项目一样，电子商务网站也需要一些功能才能正常运行。同样，电子商务也需要一些基本功能，其中最重要的是以下几点：

一个平台，用户可以在其中查看网站的所有内容。例如，要在网页中显示的商品。
此项目还需要一个数据库，必须为交易和用户帐户流程设置。大多数电子商务专业人士会构建一个数据库，并允许用户设置他们的帐户。这样他们就可以拥有客户等等。
在您的网站中实现基本的安全性，以防止黑客攻击等。
针对每种类型的项目和每个用户的代码。必须妥善处理访客和注册用户。
用户界面必须对用户友好，用户可以自由浏览您的网站。向他提供较少但有效的信息。

这些是开发电子商务时的一些主要要求。真正的噩梦在于，您必须学习第三方服务的API才能集成结账系统。我没有任何API，所以目前不会添加任何结账系统，如果将来我能访问到任何API，我会在第一时间发布在这里！

整个项目只是一个简单的网站，基本实现了安全和销售功能。您通过向用户展示产品图片和一些产品详细信息（如价格、描述等）来销售您的产品。您可以添加尽可能多的详细信息，以提高用户友好性。

您也可以允许用户在您的网站上创建他们的帐户，尽管这不是必需的，因为他们用于结账的第三方服务会处理好这一部分。为此，您将需要数据库。数据库也需要用于产品和详细信息等相关数据。但是，为用户提供免费帐户是吸引更多客户的好尝试。

数据库设计

数据库设计是这个购物网站中非常基本且最重要的部分。您将所有内容都放入数据库中，然后从那里提取出来。

根据您的需求设计数据库是非常重要的一步。您需要为每个表以及每个表中的对象设计一个算法。例如，在一个产品表中，您需要有很多以下对象：

ProductId
用于区分所有产品。这是您分配给它的ID。其数据类型为int，因为您不会使用ABC作为产品ID。
ProductName
这会告诉用户这是什么产品。大多数产品都可以通过名称来理解。“苹果派”是产品的名称。它向用户暗示这是什么产品。您可以很容易地理解这是用苹果制成的派。
ProductDescription
有时，完整描述您的产品以及产品能为用户提供的帮助或支持很容易。“苹果派，由新鲜苹果制成”。很好的描述，解释了这款派是由新鲜苹果制成的。
ProductPrice
用于告知用户，他需要为该产品支付多少钱。通常您会以美元传递此值，但以用户友好的模式（以当地货币）提供会更好。
可用商品（可选）
此功能使购物者能够了解商品的可用数量。这不是必需的，只是一个可选功能，您可以告诉用户他目前可以购买多少。大多数主要公司都使用此功能来告诉客户，当购买量达到数十甚至数百时，他目前只能购买这么多商品，或者他必须订购更多。

只有当您希望允许用户在您的网站上拥有帐户时，才会创建用户表。用户表将如下所示：

UserId
同样的目的，只是为了区分用户。可能还有另一个名叫“Afzaal”的用户，但没有其他ID为1的用户。
电子邮件
用于联系用户，告知其购买情况。
名称
识别用户。虽然这不是必需的，您可以使用他的电子邮件，但称呼用户为
“你好，Afzaal！”比称呼他为“你好，example@example.com”要好。
...如果您需要，可以向此表添加更多功能。

接下来是所需的最后一个表，即通过您的网站进行的购买。您需要保存这些购买记录，以便在交易发生任何错误或交易未到达目的地时，您可以在网站中进行跟踪并引导客户。它如下：

UserId
进行购买的用户ID
ProductId
已购买产品的ID
时间
购买时间

够了！

我为什么只写了3列？因为当您使用UserId和ProductId时，您可以从其他两个表中提取剩余内容。无需再次保存UserName，或ProductName，ProductDescription，那只会占用您硬盘上的空间。因此，使用UserId和ProductId，您可以使用该值从数据库中提取剩余内容。

我截取的屏幕截图如下所示，它将解释我试图解释的内容。

在上面的截图中，ImageName 列是额外的，我没有解释。那是因为在这个模板中，每个产品都附带了一张图片。这不是必需的，但这是一个很好的尝试。大多数图片都与您想要展示的产品相关。您可以将它们的名称保存在数据库中，也可以根据您的需要将它们保存在其他任何地方。

这是商店网站数据库的基本结构。您可以向数据库表添加更多功能，如果需要，还可以向数据库添加更多表。

购物网站

购物网站是电子商务网站的一个子网站。在这个网站中，您几乎可以找到电子商务网站的所有功能，但为什么它被称为购物网站呢？

因为电子商务网站通常是为商业巨头准备的。例如，银行网站、国际汇款、网上购物中心。它们需要一个非常大的框架才能运行。它们被称为[特定领域]的电子商务网站。

一个购物网站，是您放置所有产品内容的地方，例如本文中解释的苹果派和所有其他食品。您要求客户，好吧，如果您无法联系到我，您也可以在这里下订单。这不需要非常大的安全检查，也不需要处理业务的庞大框架。您创建网站，让用户使用它。够了！访问您内容的用户对您忠诚（在大多数情况下），他们会下订单，您会送到他们家，进行给与取。您给他们订单，他们给您钱，这就是交易。这并不反映电子商务，在电子商务中会发生交易，用户发送他们的钱，发出提款指令。这就是为什么，购物网站是电子商务网站的一个子类别。

这就是它被称为购物网站的原因。与电子商务相比，购物网站更容易开发，因为您只需将产品放入数据库，然后每次用户浏览您的网站时访问它们即可。之后，您只需生成一个订单页面，用户在其中输入详细信息并下订单，然后由您稍后处理。

项目中的代码

ASP.NET (Web Pages)

此项目由ASP.NET团队开发，是任何网站所有者快速启动其网站的最佳解决方案。他所需要知道的只是如何编辑ASP.NET以及非常基本的HTML、CSS和JavaScript知识。

您可以在这里学习ASP.NET。

var db = Database.Open("bakery");
var products = db.Query("SELECT * FROM PRODUCTS").ToList();
var featured = products[new Random().Next(products.Count)];

上面的代码来自主页。上面的代码所做的是从数据库中提取结果，然后获取一个随机项目。

这种功能在许多网站上都能看到，您在主页标题上看到一个随机项目，所有其他内容都显示在下面！您从限制中获得一个随机数，然后访问该对象的数据。

jQuery 代码

这个网站里我喜欢的一点是实时计算总金额的功能。jQuery被用于实现这个功能。下面是这个功能的代码：

<script type="text/javascript"> 
   $(function () { 
       var price = parseFloat($("#orderPrice").text()).toFixed(2), 
       total = $("#orderTotal"), 
       orderQty = $("#orderQty"); 
       orderQty.change(function () { 
          var quantity = parseInt(orderQty.val()); 
          if (!quantity || quantity < 1) { 
              orderQty.val(1); 
              quantity = 1; 
          } else if (quantity.toString() !== orderQty.val()) { 
                 orderQty.val(quantity); 
          } 
          total.text("$" + (price * quantity).toFixed(2)); 
       }); 
    }); 
</script>

以上代码从用户获取值，然后计算他将支付的总金额。在提交表单后，网站通过在用户购买时获取其电子邮件地址向用户发送电子邮件。然后就完成了！这就是整个商店网站，您从用户那里收到订单，处理它，然后通知用户。整个层级结构如下：

用户进入
下单
你处理它
通知用户
打包订单

这就是购物网站的全部逻辑。你不需要硬编码任何东西，只需谷歌搜索针对此类方法的最佳可用方法。

很简单，不是吗？

数据库/SQL Server CE

默认网站的数据库也存在于项目zip文件夹中。您可以解压项目并在WebMatrix或Visual Studio中运行它。数据库已提供给您，您可以执行并修改它。

随意更新模板，尽可能多地更新。您应该始终为您的尝试获得良好的结果。我没有发现任何其他需要解释的部分。如果您需要帮助，请联系我或在这里留言/评论，我会指导您。

项目中的扩展功能

我在网站中开发了一个之前缺失的功能。那就是通过用户界面创建新产品的能力。尽管您总是可以进入数据库，添加内容，然后返回并将图像复制/粘贴到您想要放置的文件夹中。代码中还有一些CSS修复，使图像只能跨越允许的区域。如果您上传的图像超过670px，则右侧的按钮会被覆盖。通过添加一行代码解决了这个问题。

div#featuredProduct img {
   width: 670px;
}

现在图片不会超过670px，但这里没有使用高度，您应该注意这一点。

新添加的页面是“Admin”文件夹中的“NewProduct”。您可以自行为此页面添加安全性，或使用任何其他方法来隐藏/保护它。

该页面包含以下代码：

@{
    // page related codes
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Add Product";
    var result = "";

    if(IsPost) {
        // Form submitted, save it!
        // initialize the variables.
        var name = Request.Form["name"];
        var desc = Request.Form["desc"];
        var price = Request.Form["price"];
        // get the image from the request. 
        var image = WebImage.GetImageFromRequest();
        var fileName = "";

        // get if there is some image with the request. Otherwise,
        // remember, the image won't be shown and it is not a good UX
        // to see a broken link to image. But it will work!
        if(image != null) {
            // get the file name
            fileName = Path.GetFileName(image.FileName);
            var mapPath = Server.MapPath("~/Images/Products/" + fileName);
            var thumbPath = Server.MapPath("~/Images/Products/Thumbnails/" + fileName);
            // save the image
            image.Save(mapPath);
            image.Save(thumbPath);
        }
 
        // database events
        var db = Database.Open("bakery");
        // insert the data to the database
        db.Execute("INSERT INTO Products (Name, Description, Price, ImageName) VALUES (@0, @1, @2, @3)", name, desc, price, fileName);
        // update the variable to show in the HTML markup.
        result = "Your product was saved. View it in your shop website!";
    }
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- CSS styles on the page -->
        <style>
            label {
                margin: 0;
                display: block;
            }
            input[type="text"], textarea {
                padding: 2px;
                width: 300px;
                font-family: inherit;
            }
            textarea {
                height: 100px;
            }
        </style>
    </head>
    <body>
        @result
        <h4>Details</h4>
        <p>Add details for you product then save it to the database.</p>
        <form method="post" enctype="multipart/form-data">
            <label id="name">Product Name</label><br />
            <input type="text" name="name" id="name" /><br />
            <label id="price">Product Price</label><br />
            <input type="text" name="price" id="price" /><br />
            <label id="desc">Product Description</label><br />
            <textarea name="desc" id="desc"></textarea><br />
            <label id="name">Product Image</label><br />
            <input type="file" name="image" id="name" accept="Image/*" /><br />
            <p>Using this, you can add an image that will be shown to the user when he will open the product page.</p>
            <input type="submit" value="Save" />
        </form>
    </body>
</html>

这包括一个简单的功能，用于写入详细信息并选择一张照片，该照片将保存在网站上，并且还会添加一个新产品条目。如果一切顺利，您将收到一条消息，否则您将什么也看不到（就这么简单！）。

关注点

我学会了，“帮助别人是一件很棒的事情！”。足够学习了。这是我第一次从零开始编写代码，第一次尝试就执行了代码，而且成功了！终于在很久之后我学会了ASP.NET ^_^。

历史

第一版