为什么我的AJAX表单不会验证?

时间:2015-10-29 10:06:44

标签: c# jquery ajax asp.net-mvc validation

我在使用jquery validate插件时遇到了一些麻烦,我正在为汽车经销商编写一个预订无线电维修的项目,并需要通过AJAX表单向我的服务器发送信息,目前这个表格根本没有验证出于某种原因。

这很令人费解,因为我在另一种形式上使用了相同类型的代码,这很好用!

有人能指出我正确的方向吗?

代码在

之下

查看

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/jqueryval")

<!-- Bootstrap Core JavaScript -->
@Scripts.Render("~/bundles/bootstrap")

@Scripts.Render("~/bundles/jqueryunobtrusive")
<!-- Metis Menu Plugin JavaScript -->
<script src="@Url.Content("~/Content/lib/metisMenu/dist/metisMenu.min.js")"></script>

<!-- Custom Theme JavaScript -->
<script src="@Url.Content("~/Content/js/sb-admin-2.js")"></script>

<script src="@Url.Content("~/Content/lib/bootstap-wizard/jquery.bootstrap.wizard.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script src=@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")></script>
<script src=@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")></script>



<!-- Custom CSS -->
<link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet">

<!-- Custom Fonts -->
<link href="@Url.Content("~/Content/lib/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css">





<!-- Custom Fonts -->



<link href="@Url.Content("~/Content/awesome-bootstrap-checkbox.css")" rel="stylesheet" />

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

@using (Ajax.BeginForm("BookRepair", "Dealer", null, new AjaxOptions
{
    HttpMethod = "POST",
    OnSuccess = "Success",
    OnFailure = "Failure",
    UpdateTargetId = "SuccessText",
    InsertionMode = InsertionMode.Replace

}, new { @class = "form-horizontal" }))
{
    @Html.ValidationSummary(true, "", new { @class="text-danger"})
    <div class="container-fluid" id="PageContainer">
        <div id="rootwizard">
            <ul>
                <li><a href="#tab1" data-toggle="tab">Exchange Details</a></li>
                <li><a href="#tab2" data-toggle="tab">Vehicle Details</a></li>
                <li><a href="#tab3" data-toggle="tab">Defect Details</a></li>
                <li><a href="#tab4" data-toggle="tab" id="AddInfo">Trapped Items</a></li>
                <li><a href="#tab5" data-toggle="tab">Terms and Conditions</a></li>


            </ul>
            <br />
            <div class="col-md-6">


                <div class="panel panel-default">
                    <div class="container-fluid">
                        <div class="panel-body">


                            <div class="tab-content">
                                <div class="tab-pane" id="tab1">
                                    <h1>Radio or Cluster?</h1>

                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-default" id="IsRadio">
                                            @Html.RadioButtonFor(m => m.IsRadioRepair, new { @type = "radio", @value="True", @class = "btn btn-primary" }) Radio
                                            @Html.ValidationMessageFor(m => m.IsRadioRepair, "", new { @class = "text-danger" })
                                        </label>
                                        <label class="btn btn-default" id="IsCluster">
                                            <input type="radio" value="False" class="btn btn-primary"> Cluster
                                        </label>
                                    </div>

                                    <div class="Requesttype">
                                        <h4>Type of Request</h4>
                                        <div class="btn-group" data-toggle="buttons">
                                            <label class="btn btn-default" id="IsAdvanceRepair">
                                                @Html.RadioButtonFor(m => m.IsDirectRepair, new { @type = "radio", @value = "false", @class = "btn btn-primary" }) Advance Repair
                                                @Html.ValidationMessageFor(m => m.IsDirectRepair, "", new { @class = "text-danger" })
                                            </label>
                                            <label class="btn btn-default" id="RepairBtn">
                                                <input type="radio" value="True" class="btn btn-primary"> Direct Repair
                                            </label>
                                        </div>
                                    </div>


                                    <div id="warranty-container-Adv">
                                        <h4>Unit is in Warranty?</h4>
                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "PDI Warranty", new { @value = "PDI" }) PDI Warranty
                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "non PDI Warranty", new { @value = "NoPDI" }) non PDI Warranty
                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "Not in Warranty", new { @value = "NoWarranty" }) Not In Warranty
                                        @Html.ValidationMessageFor(m => m.WarrantyTypeOptions, "", new { @class = "text-danger" })
                                    </div>

                                    <div id="warranty-container-Dir">
                                        <h4>Unit is in Warranty?</h4>

                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "In Warranty", new { @value = "ClusterHasWarranty" }) In Warranty
                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "Not in Warranty", new { @value = "ClusterNoWarranty" }) Not In Warranty
                                        @Html.ValidationMessageFor(m => m.WarrantyTypeOptions, "", new { @class = "text-danger" })

                                    </div>
                                    <div class="col-md-12">
                                        <ul class="pager wizard">




                                            <li class="next"><a href="#tab2">Next</a></li>


                                        </ul>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab2">
                                    <div class="form-group">
                                        <h4>Vehicle Sale Date</h4>
                                        @Html.TextBoxFor(m => m.VehicleSaleDate, new { @class = "form-control datepicker", @placeholder = "Please select..." })
                                        @Html.ValidationMessageFor(m => m.VehicleSaleDate, "", new { @class = "text-danger" })

                                        <h4>Claim Number</h4>
                                        @Html.TextBoxFor(m => m.ClaimNumber, new { @class = "form-control", @placeholder = "E.G 12ER34" })
                                        @Html.ValidationMessageFor(m => m.ClaimNumber, "", new { @class = "text-danger" })
                                        <h4>VIN Number</h4>
                                        @Html.TextBoxFor(m => m.VIN, new { @class = "form-control", @placeholder = "Please enter VIN number" })
                                        @Html.ValidationMessageFor(m => m.VIN, "", new { @class = "text-danger" })

                                        <h4>Vehicle Registration Number</h4>
                                        @Html.TextBoxFor(m => m.VehicleRegNo, new { @class = "form-control", @placeholder = "Please enter Car Registration number" })

                                        <h4>Miles/KM</h4>
                                        @Html.TextBoxFor(m => m.Mileage, new { @class = "form-control", @placeholder = "Please enter Mileage in KM or Miles" })
                                        <ul class="pager wizard">

                                            <li class="previous"><a href="#tab1">Previous</a></li>
                                            <li class="next"><a href="#tab3">Next</a></li>

                                        </ul>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab3">
                                    <div class="form-group">
                                        <h4>Part Number</h4>
                                        @Html.TextBoxFor(m => m.PartNumber, new { @class = "form-control", @placeholder = "Please enter Part Number" })
                                        @Html.ValidationMessageFor(m => m.PartNumber, "", new { @class = "text-danger" })
                                        <button class="btn btn-success" title="" data-placement="bottom" data-toggle="tooltip" type="button" data-original-title="You can find the part number on the label" style="float: right">Where?</button>
                                    </div>
                                    <div class="form-group">
                                        <h4>Bezel Colour</h4>
                                        @Html.TextBoxFor(m => m.BezelColor, new { @class = "form-control", @placeholder = "Please enter Bezel Color" })
                                        <br />
                                        <h4>Type</h4>
                                        @Html.TextBoxFor(m => m.Type, new { @class = "form-control", @placeholder = "Type" })
                                        <br />
                                        <h4>Serial Number</h4>
                                        @Html.TextBoxFor(m => m.Serial, new { @class = "form-control", @placeholder = "Serial Number" })
                                        <br />
                                        <h4>Labour hours</h4>
                                        @Html.TextBoxFor(m => m.LabourHours, new { @class = "form-control", @placeholder = "Labour hours" })
                                        <br />
                                        <h4>Defect Description</h4>
                                        @Html.TextBoxFor(m => m.DefectDesc, new { @class = "form-control", @placeholder = "E.G Poor display, Customer Damage, Navigation issues, etc" })
                                        <br />
                                        <h4>Status of the Defect</h4>
                                        @Html.TextBoxFor(m => m.Condition, new { @class = "form-control", @placeholder = "Inoperative, happens over time, intermittent etc" })
                                        <br />
                                        <h4>Reported issue(s)</h4>
                                        @Html.TextAreaFor(m => m.CustomerComplaint, new { @class = "form-control", @style = "max-width:100%; max-height:100%;resize:none", @placeholder = "Please enter customer's complaint as Reported" })



                                    </div>
                                    <ul class="pager wizard">
                                        <li class="previous"><a href="#tab1">Previous</a></li>
                                        <li class="next"><a href="#tab3">Next</a></li>
                                        </ul>
                                       </div>
                                <div class="tab-pane" id="tab4">
                                    <div class="form-group">
                                        <h4 id="TrappedItemContainer0">Does the Unit have any trapped Items?</h4>
                                    </div>
                                    <div class="btn-group" data-toggle="buttons"id="TrappedItemContainer1">
                                        <label class="btn btn-default" id="HasTrappedItems">
                                            @Html.RadioButtonFor(m => m.HasTrappedItems, new { @type = "radio", @class = "btn btn-primary" }) Yes
                                        </label>
                                        <label class="btn btn-default" id="NoTrappedItems">
                                            <input type="radio" value="IsAdvance" class="btn btn-primary"> No
                                        </label>
                                    </div>
                                           <div id="TrappedItemContainer">    

                                            <h4>Trapped Item 1</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem1, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })

                                            <br />
                                            <h4>Trapped Item 2</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem2, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />
                                            <h4>Trapped Item 3</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem3, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />
                                            <h4>Trapped Item 4</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem4, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />
                                            <h4>Trapped Item 5</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem5, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />
                                            <h4>Trapped Item 6</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem6, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />


                                    </div>

                                    <h4>Additional Comments</h4>
                                    @Html.TextAreaFor(m => m.AdditionalComments, new { @class = "form-control", @style = "max-width:100%; max-height:100%;resize:none", @placeholder = "Any other Additional Information" })
                                    <ul class="pager wizard">

                                        <li class="previous"><a href="#tab3">Previous</a></li>
                                        <li class="next"><a href="#tab5">Next</a></li>


                                    </ul>
                                </div>



                                <div class="tab-pane" id="tab5">
                                    <div class="col-md-12">



                                        <h3>Terms + Conditions</h3>
                                        Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                        Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
                                        Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lob ortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.

                                        <br />

                                        <ol type="I">
                                            <br />
                                            <li>
                                                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                                Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
                                                Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
                                                Sem nulla eu ultricies orci praesent id augue nec lorem pretium congue sit amet ac nunc fusce iaculis lorem eu diam hendrerit at mattis purus dignissim vivamus mauris tellus, fringilla.
                                            </li>
                                            <br />

                                            <li>
                                                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                                Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
                                                Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
                                            </li>
                                            <br />

                                            <li>
                                                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                                Placerat suscipit
                                            </li>
                                            <br />
                                            <li>
                                                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                                Placerat suscipit
                                            </li>
                                            <br />
                                            <li>
                                                Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
                                                Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lob ortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
                                            </li>
                                            <br />

                                        </ol>
                                    </div>
                                    <div class="col-md-12" style="text-align:center;">

                                        <div class="btn-group" data-toggle="buttons">
                                            <label class="btn btn-default" id="TCAgree">
                                                <input type="radio" value="IsAccepted" class="btn btn-primary"> I agree
                                            </label>
                                            <label class="btn btn-default" id="TCNotAgree">
                                                <input type="radio" value="IsRefused" class="btn btn-primary"> I do not Agree
                                            </label>
                                        </div>
                                        <br />
                                        <br />

                                        <div id="AjaxLoader">
                                            <button type="submit" class=" btn btn-success" style="text-align:right;" @*value="submit"*@ id="SubmitBtn"> Submit Request</button>
                                            <ul class="pager wizard">
                                                <li class="previous"><a href="#tab4">Previous</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <br/>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

}

这些是我通过_Layout页面加载的脚本

  @Scripts.Render("~/bundles/jquery")

    <!-- Bootstrap Core JavaScript -->
    @Scripts.Render("~/bundles/bootstrap")

    @Scripts.Render("~/bundles/jqueryunobtrusive")
    <!-- Metis Menu Plugin JavaScript -->
    <script src="@Url.Content("~/Content/lib/metisMenu/dist/metisMenu.min.js")"></script>

    <!-- Custom Theme JavaScript -->
    <script src="@Url.Content("~/Content/js/sb-admin-2.js")"></script>

    <script src="@Url.Content("~/Content/lib/bootstap-wizard/jquery.bootstrap.wizard.min.js")"></script>



    @Scripts.Render("~/bundles/modernizr")

    <!-- Bootstrap Core CSS -->
    <link href="@Url.Content("~/Content/lib/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="@Url.Content("~/Content/lib/metisMenu/dist/metisMenu.min.css")" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="@Url.Content("~/Content/lib/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css">
    @Styles.Render("~/Content/css")
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

我的Controller此时只调用一个插入数据的Web服务,主要问题只是前端/后端验证。

1 个答案:

答案 0 :(得分:0)

您的观点应为

<!-- Bootstrap Core CSS -->
    <link href="@Url.Content("~/Content/lib/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="@Url.Content("~/Content/lib/metisMenu/dist/metisMenu.min.css")" rel="stylesheet">
<link href="@Url.Content("~/Content/awesome-bootstrap-checkbox.css")" rel="stylesheet" />


@using (Ajax.BeginForm("BookRepair", "Dealer", null, new AjaxOptions
{
    HttpMethod = "POST",
    OnSuccess = "Success",
    OnFailure = "Failure",
    UpdateTargetId = "SuccessText",
    InsertionMode = InsertionMode.Replace

}, new { @class = "form-horizontal" }))
{
    @Html.ValidationSummary(true, "", new { @class="text-danger"})
    <div class="container-fluid" id="PageContainer">
        <div id="rootwizard">
            <ul>
                <li><a href="#tab1" data-toggle="tab">Exchange Details</a></li>
                <li><a href="#tab2" data-toggle="tab">Vehicle Details</a></li>
                <li><a href="#tab3" data-toggle="tab">Defect Details</a></li>
                <li><a href="#tab4" data-toggle="tab" id="AddInfo">Trapped Items</a></li>
                <li><a href="#tab5" data-toggle="tab">Terms and Conditions</a></li>


            </ul>
            <br />
            <div class="col-md-6">


                <div class="panel panel-default">
                    <div class="container-fluid">
                        <div class="panel-body">


                            <div class="tab-content">
                                <div class="tab-pane" id="tab1">
                                    <h1>Radio or Cluster?</h1>

                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-default" id="IsRadio">
                                            @Html.RadioButtonFor(m => m.IsRadioRepair, new { @type = "radio", @value="True", @class = "btn btn-primary" }) Radio
                                            @Html.ValidationMessageFor(m => m.IsRadioRepair, "", new { @class = "text-danger" })
                                        </label>
                                        <label class="btn btn-default" id="IsCluster">
                                            <input type="radio" value="False" class="btn btn-primary"> Cluster
                                        </label>
                                    </div>

                                    <div class="Requesttype">
                                        <h4>Type of Request</h4>
                                        <div class="btn-group" data-toggle="buttons">
                                            <label class="btn btn-default" id="IsAdvanceRepair">
                                                @Html.RadioButtonFor(m => m.IsDirectRepair, new { @type = "radio", @value = "false", @class = "btn btn-primary" }) Advance Repair
                                                @Html.ValidationMessageFor(m => m.IsDirectRepair, "", new { @class = "text-danger" })
                                            </label>
                                            <label class="btn btn-default" id="RepairBtn">
                                                <input type="radio" value="True" class="btn btn-primary"> Direct Repair
                                            </label>
                                        </div>
                                    </div>


                                    <div id="warranty-container-Adv">
                                        <h4>Unit is in Warranty?</h4>
                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "PDI Warranty", new { @value = "PDI" }) PDI Warranty
                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "non PDI Warranty", new { @value = "NoPDI" }) non PDI Warranty
                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "Not in Warranty", new { @value = "NoWarranty" }) Not In Warranty
                                        @Html.ValidationMessageFor(m => m.WarrantyTypeOptions, "", new { @class = "text-danger" })
                                    </div>

                                    <div id="warranty-container-Dir">
                                        <h4>Unit is in Warranty?</h4>

                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "In Warranty", new { @value = "ClusterHasWarranty" }) In Warranty
                                        @Html.RadioButtonFor(m => m.WarrantyTypeOptions, "Not in Warranty", new { @value = "ClusterNoWarranty" }) Not In Warranty
                                        @Html.ValidationMessageFor(m => m.WarrantyTypeOptions, "", new { @class = "text-danger" })

                                    </div>
                                    <div class="col-md-12">
                                        <ul class="pager wizard">




                                            <li class="next"><a href="#tab2">Next</a></li>


                                        </ul>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab2">
                                    <div class="form-group">
                                        <h4>Vehicle Sale Date</h4>
                                        @Html.TextBoxFor(m => m.VehicleSaleDate, new { @class = "form-control datepicker", @placeholder = "Please select..." })
                                        @Html.ValidationMessageFor(m => m.VehicleSaleDate, "", new { @class = "text-danger" })

                                        <h4>Claim Number</h4>
                                        @Html.TextBoxFor(m => m.ClaimNumber, new { @class = "form-control", @placeholder = "E.G 12ER34" })
                                        @Html.ValidationMessageFor(m => m.ClaimNumber, "", new { @class = "text-danger" })
                                        <h4>VIN Number</h4>
                                        @Html.TextBoxFor(m => m.VIN, new { @class = "form-control", @placeholder = "Please enter VIN number" })
                                        @Html.ValidationMessageFor(m => m.VIN, "", new { @class = "text-danger" })

                                        <h4>Vehicle Registration Number</h4>
                                        @Html.TextBoxFor(m => m.VehicleRegNo, new { @class = "form-control", @placeholder = "Please enter Car Registration number" })

                                        <h4>Miles/KM</h4>
                                        @Html.TextBoxFor(m => m.Mileage, new { @class = "form-control", @placeholder = "Please enter Mileage in KM or Miles" })
                                        <ul class="pager wizard">

                                            <li class="previous"><a href="#tab1">Previous</a></li>
                                            <li class="next"><a href="#tab3">Next</a></li>

                                        </ul>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab3">
                                    <div class="form-group">
                                        <h4>Part Number</h4>
                                        @Html.TextBoxFor(m => m.PartNumber, new { @class = "form-control", @placeholder = "Please enter Part Number" })
                                        @Html.ValidationMessageFor(m => m.PartNumber, "", new { @class = "text-danger" })
                                        <button class="btn btn-success" title="" data-placement="bottom" data-toggle="tooltip" type="button" data-original-title="You can find the part number on the label" style="float: right">Where?</button>
                                    </div>
                                    <div class="form-group">
                                        <h4>Bezel Colour</h4>
                                        @Html.TextBoxFor(m => m.BezelColor, new { @class = "form-control", @placeholder = "Please enter Bezel Color" })
                                        <br />
                                        <h4>Type</h4>
                                        @Html.TextBoxFor(m => m.Type, new { @class = "form-control", @placeholder = "Type" })
                                        <br />
                                        <h4>Serial Number</h4>
                                        @Html.TextBoxFor(m => m.Serial, new { @class = "form-control", @placeholder = "Serial Number" })
                                        <br />
                                        <h4>Labour hours</h4>
                                        @Html.TextBoxFor(m => m.LabourHours, new { @class = "form-control", @placeholder = "Labour hours" })
                                        <br />
                                        <h4>Defect Description</h4>
                                        @Html.TextBoxFor(m => m.DefectDesc, new { @class = "form-control", @placeholder = "E.G Poor display, Customer Damage, Navigation issues, etc" })
                                        <br />
                                        <h4>Status of the Defect</h4>
                                        @Html.TextBoxFor(m => m.Condition, new { @class = "form-control", @placeholder = "Inoperative, happens over time, intermittent etc" })
                                        <br />
                                        <h4>Reported issue(s)</h4>
                                        @Html.TextAreaFor(m => m.CustomerComplaint, new { @class = "form-control", @style = "max-width:100%; max-height:100%;resize:none", @placeholder = "Please enter customer's complaint as Reported" })



                                    </div>
                                    <ul class="pager wizard">
                                        <li class="previous"><a href="#tab1">Previous</a></li>
                                        <li class="next"><a href="#tab3">Next</a></li>
                                        </ul>
                                       </div>
                                <div class="tab-pane" id="tab4">
                                    <div class="form-group">
                                        <h4 id="TrappedItemContainer0">Does the Unit have any trapped Items?</h4>
                                    </div>
                                    <div class="btn-group" data-toggle="buttons"id="TrappedItemContainer1">
                                        <label class="btn btn-default" id="HasTrappedItems">
                                            @Html.RadioButtonFor(m => m.HasTrappedItems, new { @type = "radio", @class = "btn btn-primary" }) Yes
                                        </label>
                                        <label class="btn btn-default" id="NoTrappedItems">
                                            <input type="radio" value="IsAdvance" class="btn btn-primary"> No
                                        </label>
                                    </div>
                                           <div id="TrappedItemContainer">    

                                            <h4>Trapped Item 1</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem1, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })

                                            <br />
                                            <h4>Trapped Item 2</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem2, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />
                                            <h4>Trapped Item 3</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem3, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />
                                            <h4>Trapped Item 4</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem4, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />
                                            <h4>Trapped Item 5</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem5, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />
                                            <h4>Trapped Item 6</h4>
                                            @Html.TextBoxFor(m => m.TrappedItem6, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
                                            <br />


                                    </div>

                                    <h4>Additional Comments</h4>
                                    @Html.TextAreaFor(m => m.AdditionalComments, new { @class = "form-control", @style = "max-width:100%; max-height:100%;resize:none", @placeholder = "Any other Additional Information" })
                                    <ul class="pager wizard">

                                        <li class="previous"><a href="#tab3">Previous</a></li>
                                        <li class="next"><a href="#tab5">Next</a></li>


                                    </ul>
                                </div>



                                <div class="tab-pane" id="tab5">
                                    <div class="col-md-12">



                                        <h3>Terms + Conditions</h3>
                                        Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                        Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
                                        Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lob ortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.

                                        <br />

                                        <ol type="I">
                                            <br />
                                            <li>
                                                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                                Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
                                                Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
                                                Sem nulla eu ultricies orci praesent id augue nec lorem pretium congue sit amet ac nunc fusce iaculis lorem eu diam hendrerit at mattis purus dignissim vivamus mauris tellus, fringilla.
                                            </li>
                                            <br />

                                            <li>
                                                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                                Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
                                                Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
                                            </li>
                                            <br />

                                            <li>
                                                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                                Placerat suscipit
                                            </li>
                                            <br />
                                            <li>
                                                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
                                                Placerat suscipit
                                            </li>
                                            <br />
                                            <li>
                                                Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
                                                Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lob ortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
                                            </li>
                                            <br />

                                        </ol>
                                    </div>
                                    <div class="col-md-12" style="text-align:center;">

                                        <div class="btn-group" data-toggle="buttons">
                                            <label class="btn btn-default" id="TCAgree">
                                                <input type="radio" value="IsAccepted" class="btn btn-primary"> I agree
                                            </label>
                                            <label class="btn btn-default" id="TCNotAgree">
                                                <input type="radio" value="IsRefused" class="btn btn-primary"> I do not Agree
                                            </label>
                                        </div>
                                        <br />
                                        <br />

                                        <div id="AjaxLoader">
                                            <button type="submit" class=" btn btn-success" style="text-align:right;" @*value="submit"*@ id="SubmitBtn"> Submit Request</button>
                                            <ul class="pager wizard">
                                                <li class="previous"><a href="#tab4">Previous</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <br/>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

}