MVC 4计算价格/下订单模式

My website has a simple form that allows for entry of order details. I would like to display a "Calculate Price" button initially. Only once price has been calculated, display a "Place Order" button.

我的网站有一个简单的表格，允许输入订单详情。我想最初显示“计算价格”按钮。只有计算一次价格后，才会显示“下订单”按钮。

I have the following on my view:

我的观点如下：

@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" />
        }
    }        
}

In order to set the hidden boolean model field "CalcualtePrice" I added the following java script (I know nothing about java script):

为了设置隐藏的布尔模型字段“CalcualtePrice”，我添加了以下java脚本（我对java脚本一无所知）：

<script type="text/javascript">

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

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

The javascript, I simply added at the foot of my cshtml file.

javascript，我只是添加在我的cshtml文件的脚下。

Within the controller I check if the model boolean field for "CalculatePrice" has been set to decide whether the user is trying to calculate the price or place the order.

在控制器中，我检查是否已设置“CalculatePrice”的模型布尔字段来决定用户是否正在尝试计算价格或下订单。

My problem is that the java script doesn't seem to get run. Do I need to bind it to the click event or something? The whole cshtml page now looks over complicated and messy since I tried to solve the problem of submitting the calculate vs the place order. I initially tried to solve this by checking the http verb in the controller (GET for calculate price and PUT for place order) but I couldn't seem to overide the verb used by the "Html.BeginForm" dependent on which button was clicked.

我的问题是java脚本似乎没有运行。我是否需要将其绑定到click事件或其他内容？整个cshtml页面现在看起来过于复杂和混乱，因为我试图解决提交计算与地点顺序的问题。我最初尝试通过检查控制器中的http动词来解决这个问题（GET用于计算价格和PUT用于下订单）但我似乎无法覆盖“Html.BeginForm”使用的动词，这取决于单击了哪个按钮。

Hopefully someone will have a neat solution to what I guess must be a reasonably common use case, calculate price / place order?

希望有人会有一个简洁的解决方案，我认为必须是一个相当常见的用例，计算价格/地点顺序？

2 个解决方案

#1

Take a close look at this, I think it will help you: How do you handle multiple submit buttons in ASP.NET MVC Framework? Sounds like you have a multiple submit button issue.

仔细看看这个，我想它会对你有所帮助：你如何处理ASP.NET MVC框架中的多个提交按钮？听起来你有一个多重提交按钮问题。

#2

try using the onsubmit event insteat of onclick and add a return statement. New button will be like

尝试使用onclick的onsubmit事件insteat并添加一个return语句。新按钮就像

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

and the javascript functions would be

和javascript函数将是

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

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

This will make sure that the value of the hidden field is updated before the form submits.

这将确保在表单提交之前更新隐藏字段的值。

#1