전자 상거래 응용 프로그램에서 mvc의 사용자 정의 플래그 및 플래그 패턴 작성

Question

다음 요구 사항이 있습니다. 우리는 asp.net에서 하나의 프로젝트를 개발하고 있지만 우리가 그것을 할 수있는 방법에 대해 혼란 스럽습니다. 고객 중 한 명이 맞춤식 깃발을 제공하는 웹 사이트가 필요합니다. 깃발의 예는이 질문에 첨부되어 있습니다. 여기에 나는 사용자가 깃발을 살 수있는 능력을주고 싶다. 이 옵션에서는 오픈 소스 장바구니 중 하나를 사용합니다. 그러나 우리가 part-1이 붉은 색, 다른 색의 part-2 등 사용자가 될 수있는 능력을 어떻게 알 수 있습니까?

그들은 색상 선택 상자에서 어떤 색을 선택해서 거기에서 계산을 할 수 있습니다. 장바구니 관리 패널의 관리 영역에서 플래그 패턴이 추가됩니다. 그러나 여기에 새로운 패턴을 추가하는 방법을 혼동하지 않으시겠습니까? 어떤 형식으로되어 있습니까? 따라서 사용자는 색상 상자에서 색상을 채우고 결제를 진행할 수 있습니다. 관리자가이 유형의 패턴을 추가하는 방법은 무엇입니까? 또한 플래그에 다른 모양을 추가하려고합니다. 고객이 플래시 사용을 거부합니다. 프런트 엔드의 예가 아래에 나와 있습니다.

Answer 1

동적 배경 - 색상 된 div를 추가하고 그들로부터 색상 선택 (아래 예제 코드를 참조)를 선택할 수 있습니다.

당신이 MVC에 후크하려면 :

• 뷰의 모델로 컨트롤러에서 색상 배열을 보냅니다.

• 사용자에게 3 가지 색상 선택 사항을 POST 컨트롤러로 보내는 '계속'버튼을 추가하십시오.

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>