0

私のウェブサイトには、注文の詳細を入力できるシンプルなフォームがあります。最初に「価格を計算する」ボタンを表示したい。価格が計算されたら、「注文する」ボタンを表示します。

私の見解では次のとおりです。

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

非表示のブール モデル フィールド「CalcualtePrice」を設定するために、次の Java スクリプトを追加しました (Java スクリプトについては何も知りません)。

<script type="text/javascript">

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

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

JavaScript は、cshtml ファイルの末尾に追加しただけです。

コントローラー内で、「CalculatePrice」のモデルのブール値フィールドが設定されているかどうかを確認して、ユーザーが価格を計算しようとしているのか、注文しようとしているのかを判断します。

私の問題は、Java スクリプトが実行されていないように見えることです。クリックイベントなどにバインドする必要がありますか? 計算と注文の送信の問題を解決しようとしたため、cshtmlページ全体が複雑で乱雑に見えます。私は最初に、コントローラーで http 動詞 (価格計算の場合は GET、注文の場合は PUT) をチェックしてこれを解決しようとしましたが、どのボタンがクリックされたかに応じて、「Html.BeginForm」で使用される動詞を上書きするようには見えませんでした。

うまくいけば、誰かが合理的に一般的なユースケースであるに違いないと私が推測する、価格の計算/注文の配置に対するきちんとした解決策を持っているでしょうか?

4

2 に答える 2

1

これをよく見てください。役立つと思います: ASP.NET MVC フレームワークで複数の送信ボタンをどのように処理しますか? 複数の送信ボタンの問題があるようです。

于 2013-08-05T11:34:45.203 に答える
0

onclick の代わりに onsubmit イベントを使用してみて、return ステートメントを追加してください。新しいボタンは次のようになります

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

JavaScript関数は次のようになります

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

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

これにより、フォームが送信される前に隠しフィールドの値が更新されます。

于 2013-08-04T20:53:43.833 に答える