CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4razor
Rob Bowman
Rob Bowman

Reputation: 8741

MVC 4 Calculate Price / Place Order Pattern

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):

<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.

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.

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.

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

Upvotes: 0

Views: 1384

Answers (2)

Jason Evans
Jason Evans

Reputation: 29186

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.

Upvotes: 1

Muhammad Usman
Muhammad Usman

Reputation: 358

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

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

and the javascript functions would be 

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.

Upvotes: 0

Related Questions