CODEWITHSUNDEEP
jqueryasp.net-mvctelerikunobtrusive-validationtelerik-mvc
user1257758
user1257758

Reputation: 59

JQuery Telerik Wizard Valid always true on initial page load

I am having an issue where on initial page load (starting debugger) where the valid() function always returns as true onSelect(e) function on Index.cshtml. However, if I just hit enter on the url and reload the page, the valid function works as expected. The one thing I do notice is that on the initial debugger the page takes a little while to load, second time around everything is there.

Here is my example:

BundleConfig.cs

public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                       "~/Scripts/jquery-ui-1.13.2.min.js",
                       "~/Scripts/jquery-3.7.1.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive-ajax.min.js",
            "~/Scripts/jquery.validate.min.js",
            "~/Scripts/jquery.validate.unobtrusive.js"
            ));
            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));
            bundles.Add(new ScriptBundle("~/Kendo").Include("~/Scripts/kendo.all.min.js",
              "~/Kendo/js/kendo.aspnetmvc.min.js"));

            bundles.Add(new StyleBundle("~/Kendo/styles").Include("~/Kendo/styles/kendo.common.min.css",
                "~/Kendo/styles/kendo.default.min.css"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/Site.css"));

            bundles.Add(new StyleBundle("~/Kendo/styles").Include("~/Kendo/styles/kendo.common.min.css"));
        }
    }

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title - My Kendo UI MVC Application</title>
    <link href="https://cdn.kendostatic.com/2023.1.117/styles/kendo.default-ocean-blue.min.css" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="https://kendo.cdn.telerik.com/2023.1.117/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.1.117/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.aspnetmvc.min.js"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Kendo/styles")
</head>
<body class="k-content">

    <style>
        .wide {
            width: 95%;
        }

        .field-validation-error {
            color: red;
        }
    </style>
    <main>
        <div class="container">
            @RenderBody()
        </div>
    </main>
    <footer class="footer text-center d-flex align-items-center">
        <div class="container pb-0">
            <hr />
            <p>Copyright &copy; @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
        </div>
    </footer>


    <script>
        $(document).ready(function () {
            $("#responsive-panel").kendoResponsivePanel({
                breakpoint: 768,
                autoClose: false,
                orientation: "top"
            });
            $("#menu").kendoMenu();
        });
        function onclick(e) {
            $("#responsive-panel").getKendoResponsivePanel().toggle();
        }
    </script>


    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/Kendo")
    @Scripts.Render("~/bundles/jqueryval")
</body>
</html>

Index.cshtml

@using Kendo.Mvc.UI
@model WizardPartialExample.Models.WizardComplexModel


@{
    ViewBag.Title = "Wizard Test A";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Wizard -->
@(Html.Kendo().Wizard()
        .Name("wizard")
        .Events(ev => ev.Select("onSelect"))
        .Events(ev => ev.Done("onDone"))
        .LoadOnDemand(true)
        .HtmlAttributes(new { @novalidate = "" })
        .ReloadOnSelect(false)
        .Steps(s =>
        {
            s.Add<WizardPartialExample.Models.WizardComplexModel>()
            .Title("Business Profile")
            .ContentUrl(Url.Action("_BusinessProfile", "Home", Model))
            .Buttons(b =>
            {
                b.Next().Text("Next");
            });

            s.Add<WizardPartialExample.Models.WizardComplexModel>()
            .Title("Business Financial")
            .ContentUrl(Url.Action("_BusinessFinancial", "Home", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Done().Text("Submit");

            });
        })
    )

<script type="text/javascript">
    var dataPartial1;
    var dataPartial2;
    var currentStep;

    function onSelect(e) {
        var form, contentUrl;
        if (e.step.options.index < currentStep) {
            alert('step');
        }
        else {
            if (e.step.options.index == 1) {
                form = $('#frmPartialBusinessProfile');
                dataPartial1 = form.serialize();
                contentUrl = '@Url.Action("_BusinessFinancial", "Home",Model)';
            }
            if (!form.valid()) {
                e.preventDefault();
            }
            else {
                e.step.options.contentUrl = contentUrl;
            }
        }
        currentStep = e.step.options.index;
    }

    function onDone(e) {

        alert('test');
        var form = $('#frmPartialBusinessFinancial');

        if (form.valid()) {
            form.submit();
        }
        else {
            e.preventDefault();
        }

    }
</script>

_BusinessProfile.cshtml

@using Kendo.Mvc.UI
@model WizardPartialExample.Models.WizardComplexModel

@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmPartialBusinessProfile", @name = "frmPartialBusinessProfile" }))
{
    <div style="width: 45%; float: left; border: 1px solid black" id="BusinessInfoEntry">
        <h3>Business Profile</h3>
        <fieldset>
            <legend></legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.BusinessModel.BusinessName)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessModel.BusinessName, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessModel.BusinessName)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessModel.BusinessStructure)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessModel.BusinessStructure, new { maxlength = 20 })
                    @Html.ValidationMessageFor(m => m.BusinessModel.BusinessStructure)
                </li>
            </ol>
        </fieldset>
    </div>
}

_BusinessFinancial.cshtml

@using Kendo.Mvc.UI
@model WizardPartialExample.Models.WizardComplexModel

@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmPartialBusinessFinancial", @name = "frmPartialBusinessFinancial" }))
{
    <div style="width: 45%; float: left; border: 1px solid black" id="BusinessInfoEntry">
        <h3>Business Financial</h3>
        <fieldset>
            <legend></legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.RevenueModel.AnnualRevenue)
                    <br />
                    @Html.TextBoxFor(m => m.RevenueModel.AnnualRevenue, "{0:c}", new { @type = "number", @class = "required numeric", id = "AnnualRevenueId", @Value = Model.RevenueModel == null || Model.RevenueModel.AnnualRevenue == null ? 0 : Model.RevenueModel.AnnualRevenue })
                    @Html.ValidationMessageFor(m => m.RevenueModel.AnnualRevenue)
                </li>
                <li>
                    @Html.LabelFor(m => m.RevenueModel.GrossMonthlySales)
                    <br />
                    @Html.TextBoxFor(m => m.RevenueModel.GrossMonthlySales, "{0:c}", new { @type = "number", @class = "required numeric", id = "GrossMonthlySalesId", @Value = Model.RevenueModel == null || Model.RevenueModel.GrossMonthlySales == null ? 0 : Model.RevenueModel.GrossMonthlySales })
                    @Html.ValidationMessageFor(m => m.RevenueModel.GrossMonthlySales)
                </li>
            </ol>
        </fieldset>
    </div>
}

And my models.

namespace WizardPartialExample.Models
{
    public class WizardComplexModel
    {
        public Revenue RevenueModel { get; set; }

        public Business BusinessModel { get; set; }
    }

    public class Business
    {
        [Required(ErrorMessage = "The business name is required.", AllowEmptyStrings = false)]
        [DisplayName("*Business Name")]
        [StringLength(250)]
        public string BusinessName { get; set; }

        [Required(ErrorMessage = "The business structure required.", AllowEmptyStrings = false)]
        [DisplayName("*Business Structure")]
        public string BusinessStructure { get; set; }

    }
    public class Revenue
    {
        [Range(1000, Double.MaxValue, ErrorMessage = "The field {0} must be greater than {1}.")]
        [DisplayName("Gross Monthly Sales")]
        public decimal GrossMonthlySales { get; set; }

        [Range(1000, Double.MaxValue, ErrorMessage = "The field {0} must be greater than {1}.")]
        [DisplayName("AnnualRevenue")]
        public decimal AnnualRevenue { get; set; }
    }
}

`

Sorry forgot the HomeController.cs

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            var model = new WizardPartialExample.Models.WizardComplexModel();
            model.BusinessModel = new Models.Business();
            model.RevenueModel = new Models.Revenue();
            return View("Index", model);
        }
        public ActionResult Index2()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            var model = new WizardPartialExample.Models.WizardComplexModel();
            model.BusinessModel = new Models.Business();
            model.RevenueModel = new Models.Revenue();
            return View("Index2", model);
        }
        public ActionResult Ind()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult _BusinessProfile(WizardPartialExample.Models.WizardComplexModel viewModel)
        {
            return PartialView("_BusinessProfile", viewModel);
        }

        public ActionResult _BusinessFinancial(WizardPartialExample.Models.WizardComplexModel viewModel)
        {
            return PartialView("_BusinessFinancial", viewModel);
        }
    }
}

Upvotes: 0

Views: 28

Answers (0)

Related Questions