jquery - 在电子商务应用程序的 mvc 中构建自定义标志和标志模式

Question

我们有以下要求。我们正在 asp.net 中开发一个元素，但对我们如何做的方式感到困惑。我们的一位客户需要提供自定义标志构建的网站。这个问题附有标志的例子。在这里我想给用户一个用户可以购买旗帜的能力。对于此选项，我将使用开源购物车之一。但是不知道我们将如何使用第 1 部分为红色、第 2 部分为不同颜色等的用户。

他们可以从颜色选择框中选择任何颜色并从那里结帐。标志图案将从我们的购物车管理面板的管理区域添加。但是在这里混淆了我们将如何添加新的模式？以哪种格式？因此用户可以从其中的颜色框中填充颜色并进行结帐。如何从管理员添加这种类型的模式？他们还想为旗帜添加不同的形状。客户拒绝为其使用闪存。示例前端如下。

Answer 1

您可以动态添加带有背景色的 div 并从中选择颜色(参见下面的示例代码)。

如果你想连接到 MVC:

• 将颜色数组从您的 Controller 发送到 View 的模型中。

• 添加一个“继续”按钮，向用户发送 3 种颜色选择到您的 POST Controller 。

var currentColor=1;
var colors=[];
colors.push({color:'#04a09c',label:'turquoise'});
colors.push({color:'#862a77',label:'wineberry'});
colors.push({color:'#1e3a81',label:'o.g.blue'});

for(var i=0;i<colors.length;i++){
    var $newDiv=$('<div/>',{
        id:colors[i].label,
    });
    $newDiv.css('background-color',colors[i].color);
    $newDiv.addClass('color');
    $newDiv.appendTo('#colors')
    $newDiv.data('label',colors[i].label);
}

$('.color').on('click',function(e){
    var $color=$('#color'+currentColor);
    var bkcolor=$(this).css('background-color');
    var colorName=$(this).data('label');
    $color.css('background-color',bkcolor);
    $color.text(currentColor+" = "+colorName);
    if(++currentColor>3){currentColor=1;}
});

body{ background-color: ivory; padding:10px; }
#choices{width:150px;border:1px solid red;color:white;font-size:18px;background-color:lightgray;}
#colors{display:inline-block;}
.choices{width:150px;height:35px;border:1px solid gray;}
.color{display:inline-block;width:50px;height:35px;border:1px solid gray;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>These are your 3 choices</p>
<div id=choices>
  <div id=color1 class=choices>1</div>
  <div id=color2 class=choices>2</div>
  <div id=color3 class=choices>3</div>
</div>
<p>Click 3 colors below to choose them above</p>
<div id=colors></div>