MVC 4 가격 계산/주문 주문 패턴

Question

내 웹 사이트는 주문 세부 사항을 입력 할 수있는 간단한 양식을 가지고 있습니다. 처음에는 "가격 계산"버튼을 표시하고 싶습니다. 가격이 계산 된 후에 만 ​​"주문 주문"버튼을 표시하십시오.

나는 내보기에 다음이 "CalcualtePrice"나는 다음과 같은 자바 스크립트를 추가 숨겨진 부울 모델 필드를 설정하기 위해

@using (Html.BeginForm("PlaceOrder", "Order")) 
{ 
    <div id="OrderEntry" class="listWithoutBullets"> 
     <ul> 
      <li>Name: @Html.TextBoxFor(m => Model.Name)</li> 
      <li>Address Line 1: @Html.TextBoxFor(m => Model.Address1)</li> 
      <li>Address Line 2: @Html.TextBoxFor(m => Model.Address2)</li> 
      <li>Postcode: @Html.TextBoxFor(m => Model.Postcode)</li> 

      <li>Number of Single Photos: @Html.TextBoxFor(m => Model.SinglePhotos)</li> 
      <li>Number of Show Boxes Filled with Photos: @Html.TextBoxFor(m => Model.ShoeBoxes)</li> 

      <li>Require Digital Images on DVD: @Html.CheckBoxFor(m => Model.DVD)</li> 
      <li>Require Digital Images on USB Memory Stick: @Html.CheckBoxFor(m => Model.USBMemory)</li> 

      <li>Discount Code: @Html.TextBoxFor(m => Model.DiscountCode)</li>      
     </ul>  
    </div> 

    <div id="OrderPricing"> 
     <ul>  
      <li>Total Exc VAT: £@Html.DisplayFor(m => Model.TotalExcVat,null,"lblTotalExcVat")</li> 
      <li>Total Inc VAT: £@Html.DisplayFor(m => Model.TotalIncVat,null,"lblTotalIncVat")</li>    
     </ul> 
    </div> 

    @Html.HiddenFor(m => Model.CalculatePrice); 

    if (Model == null) 
    { 
     <input type="submit" value="Calculate Price" onclick="setCalculatePriceOn" /> 
    } 
    else 
    { 
     if (Model.TotalExcVat > 0) 
     { 
      <input type="submit" value="Place Order" onclick="setCalculatePriceOff" /> 
      <input type="submit" value="Calculate Price" onclick="setCalculatePriceOn" /> 
     } 
     else 
     { 
      <input type="submit" value="Calculate Price" onclick="setCalculatePriceOn" /> 
     } 
    }   
} 

(나는 자바 스크립트에 대해 아무것도 모르는) :

<script type="text/javascript"> 

function setCalculatePriceOn() { 
    jQuery("#CalculatePrice").val('true'); 
} 

function setCalculatePriceOff() { 
    jQuery("#CalculatePrice").val('false'); 
} 

자바 스크립트는 단순히 내 cshtml 파일의 기초에 추가했습니다.

컨트롤러 내에서 "CalculatePrice"에 대한 모델 부울 필드가 사용자가 가격을 계산하거나 주문하려고하는지 여부를 결정하도록 설정되었는지 확인합니다.

내 문제는 자바 스크립트가 실행되지 않는 것입니다. 클릭 이벤트 또는 그와 바인딩해야합니까? 전체 cshtml 페이지는 이제 계산 순서와 장소 순서를 제출하는 문제를 해결하기 위해 복잡하고 지저분 해 보인다. 나는 처음에 컨트롤러의 http 동사 (GET)를 계산하여 가격을 계산하고 place order에 대한 PUT을 확인함으로써이 문제를 해결하려고 시도했지만 어떤 버튼을 클릭했는지에 따라 "Html.BeginForm"에 사용되는 동사를 무시할 수 없었다.

누군가가 깔끔한 해결책을 가지고 있기를 바랍니다. 합리적으로 일반적인 유스 케이스 여야합니다. 가격/장소 주문을 계산 하시겠습니까?

Answer 1

자세히 살펴보면 도움이 될 것이라고 생각합니다. How do you handle multiple submit buttons in ASP.NET MVC Framework? 여러 제출 버튼 문제가있는 것 같습니다.

Answer 2

onclick의 onsubmit 이벤트 인스턴스를 사용하고 return 문을 추가하십시오. 새로운 버튼을

<input type="submit" value="Calculate Price" onsubmit="return setCalculatePriceOn();" /> 

처럼되고 자바 스크립트 기능이 양식을 제출하기 전에 숨겨진 필드의 값이 업데이트되어 있는지 확인합니다

function setCalculatePriceOn() { 
    jQuery("#CalculatePrice").val('true'); 
    return true; 
} 

function setCalculatePriceOff() { 
    jQuery("#CalculatePrice").val('false'); 
    return true; 
} 

될 것이다.