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

我的网站有一个简单的表单，允许输入订单详细信息。我想首先显示一个“计算价格”按钮。仅在计算价格后，显示“下单”按钮

我有以下看法：

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

使用（Html.BeginForm（“PlaceOrder”、“Order”）） {

• 名称：@Html.TextBoxFor（m=>Model.Name）
• 地址行1:@Html.TextBoxFor（m=>Model.Address1）
• 地址行2:@Html.TextBoxFor（m=>Model.Address2）
• 邮编：@Html.TextBoxFor（m=>Model.Postcode）
• 单张照片的数量：@Html.TextBoxFor（m=>Model.SinglePhotos）
• 装满照片的展示框数量：@Html.TextBoxFor（m=>Model.ShoeBoxes）
• 需要DVD上的数字图像：@Html.CheckBoxFor（m=>Model.DVD）
• 需要USB记忆棒上的数字图像：@Html.CheckBoxFor（m=>Model.USBMemory）
• 折扣代码：@Html.TextBoxFor（m=>Model.DiscountCode）

• 汇兑增值税总额：£@Html.DisplayFor（m=>Model.TotalExcVat，null，“lblTotalExcVat”）
• 总增值税：£@Html.DisplayFor（m=>Model.TotalIncVat，空，“lblTotalIncVat”）

@HiddenFor（m=>Model.CalculatePrice）； if（Model==null） { } 其他的 { 如果（Model.TotalExcVat>0） { } 其他的 { } } } 为了设置隐藏的布尔模型字段“CalculatePrice”，我添加了以下java脚本（我对java脚本一无所知）：

函数setCalculatePriceOn（）{
jQuery（“#CalculatePrice”）.val（'true'）；
}
函数setCalculatePriceOff（）{
jQuery（“#CalculatePrice”）.val（'false'）；
}

javascript，我只是在cshtml文件的底部添加

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

我的问题是java脚本似乎无法运行。我需要将它绑定到click事件还是什么？由于我试图解决提交calculate和placeorder的问题，整个cshtml页面现在看起来复杂而混乱。我最初试图通过检查控制器中的http动词（GET表示计算价格，PUT表示下订单）来解决这个问题，但我似乎无法超越“Html.BeginForm”所使用的动词，这取决于单击了哪个按钮

---

希望有人能找到一个简洁的解决方案，来解决我猜一定是一个相当常见的用例，计算价格/下订单？

尝试使用onsubmit事件代替onclick并添加return语句。新按钮将像

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

---

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

仔细查看，我认为这将帮助您：听起来您有多个提交按钮问题。

仔细查看，我认为这将帮助您：听起来您有多个提交按钮问题。谢谢Jason，我确实有多个提交按钮的问题，并在您建议的链接上找到了解决方案。为了更一致，我将我的评论移到了答案中。

<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;
}