latest Post

/ / / / Simple KFC online Order form using ASP.NET and JQuery

Simple KFC online Order form using ASP.NET and JQuery

By , ,
.aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KfcOrderform.aspx.cs" Inherits="WebApplication6.KfcOrderform" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>KFC</title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }

        .auto-style2 {
            text-align: center;
            color: #FFFFFF;
            font-weight: 700;
            background-color: #FFFF99;
        }

        .auto-style3 {
            text-align: center;
            color: #FFFFFF;
            font-weight: 700;
            font-size: x-large;
            background-color: #990000;
        }

        .auto-style4 {
            font-weight: normal;
        }

        .auto-style5 {
            width: 331px;
            color: #FF5050;
            text-align: right;
            background-color: #FFFF99;
        }

        .auto-style7 {
            width: 208px;
            height: 135px;
        }

        .auto-style9 {
            width: 239px;
            height: 132px;
        }

        .auto-style10 {
            text-align: center;
            width: 339px;
            height: 160px;
        }

        .auto-style11 {
            height: 160px;
        }

        .auto-style12 {
            text-align: center;
            width: 339px;
        }

        .auto-style13 {
            width: 331px;
            color: #FF5050;
            text-align: right;
            font-size: large;
            background-color: #FFFF99;
        }

        .auto-style14 {
            background-color: #FFFF99;
        }

        .auto-style15 {
            width: 221px;
            height: 122px;
        }

        .auto-style16 {
            width: 335px;
        }

        .auto-style17 {
            width: 249px;
            height: 119px;
        }

        .auto-style18 {
            width: 339px;
            text-align: right;
        }

        .auto-style19 {
            text-align: left;
        }

        .auto-style20 {
            width: 339px;
            text-align: right;
            color: red;
        }

        .auto-style21 {
            text-align: center;
        }

        .auto-style22 {
            font-size: medium;
        }
    </style>

    <script src="Scripts/jquery-1.10.2.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <table class="auto-style1">
<tr>
                <td class="auto-style3">:: <span class="auto-style4"><em>KFC</em></span> Online Order Form :: </td>
            </tr>
<tr>
                <td>
                    <table class="auto-style1">
<tr>
                            <td class="auto-style21">
                                <asp:button commandname="Customer" cssclass="auto-style22" id="btnCust" oncommand="btnNav_Command" runat="server" text="Customer Info" width="160px">
                            </asp:button></td>
                            <td class="auto-style21">
                                <asp:button commandname="Burger" cssclass="auto-style22" id="btnBurgr" oncommand="btnNav_Command" runat="server" text="Burger Type" width="110px">
                            </asp:button></td>
                            <td class="auto-style21">
                                <asp:button commandname="Adon" cssclass="auto-style22" id="btnAdon" oncommand="btnNav_Command" runat="server" text="AddOn">
                            </asp:button></td>
                            <td class="auto-style21">
                                <asp:button commandname="Bill" cssclass="auto-style22" id="btnBil" oncommand="btnNav_Command" runat="server" text="Bill Summary">
                            </asp:button></td>
                        </tr>
</table>
</td>
            </tr>
<tr>
                <td class="auto-style2">
                    <asp:multiview id="MultiView1" runat="server">
                        <asp:view id="CustomerInfo" runat="server">
                            <table class="auto-style1">
<tr>
                                    <td class="auto-style13">Customer Name:</td>
                                    <td class="auto-style14" style="text-align: left;">
                                        <asp:textbox id="txtcustomer" runat="server"></asp:textbox>
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style13">Mobile Num:</td>
                                    <td class="auto-style14" style="text-align: left;">
                                        <asp:textbox id="txtMobile" runat="server"></asp:textbox>
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style13">City:</td>
                                    <td class="auto-style14" style="text-align: left;">
                                        <asp:dropdownlist height="33px" id="lstcity" runat="server" width="115px">
                                            <asp:listitem>Hyderabad</asp:listitem>
                                            <asp:listitem>Delhi</asp:listitem>
                                            <asp:listitem>Chennai</asp:listitem>
                                            <asp:listitem>Bangalor</asp:listitem>
                                        </asp:dropdownlist>
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style5">&nbsp;</td>
                                    <td class="auto-style14" style="text-align: left;">
                                        <asp:button backcolor="#FF3399" commandname="Burger" forecolor="White" height="28px" id="btncustmr" oncommand="btnNav_Command" runat="server" style="font-weight: 700;" text="Select Burger Type" width="142px">
                                        <asp:label id="lblerr" runat="server" style="color: red;"></asp:label>
                                    </asp:button></td>
                                </tr>
</table>
</asp:view>
                        <asp:view id="BurgerType" runat="server">
                            <table class="auto-style1">
<tr>
                                    <td class="auto-style10">
                                        <img alt="" class="auto-style7" src="chickenburger.jpg" />
                                    </td>
                                    <td class="auto-style11">
                                        <img alt="" class="auto-style9" src="Vegburger.jpg" />
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style12">
                                        <asp:radiobutton groupname="Burger" id="optchickenburger" runat="server" style="color: #cc0000;" text="Chicken Burger">
                                    </asp:radiobutton></td>
                                    <td>
                                        <asp:radiobutton groupname="Burger" id="optvegburger" runat="server" style="color: red;" text="Veg. Burger">
                                    </asp:radiobutton></td>
                                </tr>
<tr>
                                    <td class="auto-style12">&nbsp;</td>
                                    <td style="text-align: left;">
                                        <asp:button backcolor="#FF0066" commandname="Adon" forecolor="White" id="btnbrgr" oncommand="btnNav_Command" runat="server" text="Select Ad-On" width="104px">
                                        <asp:label id="lblerr0" runat="server" style="color: red;"></asp:label>
                                    </asp:button></td>
                                </tr>
</table>
</asp:view>
                        <asp:view id="AddOn" runat="server">
                            <table class="auto-style1">
<tr>
                                    <td class="auto-style16">
                                        <img alt="" class="auto-style15" src="fries.jpg" />
                                    </td>
                                    <td>
                                        <img alt="" class="auto-style17" src="krushers.jpg" />
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style16">
                                        <asp:checkbox id="optfries" runat="server" style="color: red;" text="Fries">
                                    </asp:checkbox></td>
                                    <td>
                                        <asp:checkbox id="optkrushers" runat="server" style="color: red;" text="Krushers">
                                    </asp:checkbox></td>
                                </tr>
<tr>
                                    <td class="auto-style16">&nbsp;</td>
                                    <td style="text-align: left;">
                                        <asp:button backcolor="#FF0066" commandname="Bill" forecolor="White" id="btnBillSummary" onclick="btnBilSummary_Click" oncommand="btnNav_Command" runat="server" text="Bill Summary" width="104px">
                                        <asp:label id="lblerr1" runat="server" style="color: red;"></asp:label>
                                    </asp:button></td>
                                </tr>
</table>
</asp:view>
                        <asp:view id="Bill" runat="server">
                            <table class="auto-style1">
<tr>
                                    <td class="auto-style20">Customer Name :</td>
                                    <td class="auto-style19">
                                        <asp:label forecolor="Black" id="lblcustomer" runat="server"></asp:label>
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style20">Mobile Number :</td>
                                    <td class="auto-style19">
                                        <asp:label forecolor="Black" id="lblnum" runat="server"></asp:label>
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style20">Selected items :</td>
                                    <td class="auto-style19">
                                        <asp:label forecolor="Black" id="lblitems" runat="server"></asp:label>
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style20">City :</td>
                                    <td class="auto-style19">
                                        <asp:label forecolor="Black" id="lblcity" runat="server"></asp:label>
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style20">Total Amount :</td>
                                    <td class="auto-style19">
                                        <asp:label forecolor="Black" id="lbltotal" runat="server"></asp:label>
                                    </td>
                                </tr>
<tr>
                                    <td class="auto-style18">&nbsp;</td>
                                    <td style="text-align: left;">
                                        <input id="btnPrint" onclick="print()" type="button" value="Print order" />
                                    </td>
                                </tr>
</table>
</asp:view>
                    </asp:multiview>
                </td>
            </tr>
</table>
<div>
        </div>
<script type="text/javascript">
            $(document).ready(function () {
            
                $('#btncustmr,#btnBurgr').click(function () {
                    var name = $('#txtcustomer').val();
                    var num = $('#txtMobile').val();
                    if (name == '') {
                        alert('Please enter Customer name');
                    }
                    else if (num.length > 10 || num.length < 10 || num == '') {
                        alert('Enter Valid Mobile Number (10 digits)');
                    }
                });
                $('#btnbrgr').click(function () {
                    var chicken = $('#optchickenburger:checked').val() ? true : false;
                    var veg = $('#optchickenburger:checked').val() ? true : false;
                    if (chicken == false) {
                        alert('select burger type');
                    } else if (veg == false) { alert('select burger type'); }
                });
              
            });
        </script>
    </form>
</body>
</html>


.cs page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication6
{
    public partial class KfcOrderform : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                MultiView1.ActiveViewIndex = 0;
            }
        }

        protected void btnNav_Command(object sender, CommandEventArgs e)
        {
            switch (e.CommandName)
            {
                case "Customer":
                    MultiView1.ActiveViewIndex = 0;
                    break;
                case "Burger":
                    if (string.IsNullOrEmpty(txtcustomer.Text))
                    {
                        return;
                    }
                    else if (string.IsNullOrEmpty(txtMobile.Text))
                    {
                        return;

                    }
                    else { MultiView1.ActiveViewIndex = 1; }
                    break;
                case "Adon":
                    bool chicken = optchickenburger.Checked;
                    bool veg = optvegburger.Checked;
                    if (chicken == false &amp;&amp; veg == false)
                    {
                        return;
                    }
                    else { MultiView1.ActiveViewIndex = 2; }
                    break;
                case "Bill":                 
                    MultiView1.ActiveViewIndex = 3;
                    break;
            }
        }

        int bcost, acost, tot;
        protected void btnBilSummary_Click(object sender, EventArgs e)
        {
            if (optchickenburger.Checked)
            {
                bcost = 80;
            }
            if (optvegburger.Checked)
            {
                bcost = 60;
            }
            if (optfries.Checked)
            {
                acost = 60;
                bcost = bcost + acost;
            }
            if (optkrushers.Checked)
            {
                acost = 40;
                bcost = bcost + acost;
            }
            tot = bcost;
            int cost = bcost - acost;
            lblcustomer.Text = txtcustomer.Text;
            lblnum.Text = txtMobile.Text;
            lblitems.Text = "Burger" + cost.ToString("c") + " Adon" + acost.ToString("c");
            lblcity.Text = lstcity.SelectedItem.Text;
            lbltotal.Text = tot.ToString("c");
            MultiView1.ActiveViewIndex = 3;
        }

    }

}


About Mallikarjun A

Mallikarjun A
Recommended Posts × − +

2 comments:

Subscribe to: Post Comments ( Atom )