troubleshooting Question

ASP.NET MVC - Help with posting form using jqueryval and AjAX

Avatar of Sarah Ward
Sarah WardFlag for United States of America asked on
ASP.NETAJAXjQuery
18 Comments2 Solutions276 ViewsLast Modified:
I have an ASP.NET MVC form that I'm trying to validate using JQueryVal.   The API controller works as I've tested in Postman successfully.  My problem is this.

The field validators work, however when the form IS valid it does not POST to the API and create a new record in my database table.

Instead it redirects you to the same page with the Form data in the querystring as parameters.

Here's my View that includes my AjAX/Jquery script.

@model ClienteManagment.ViewModels.IntakeFormViewModel

@{
    ViewBag.Title = "IntakeForm";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

<h2>Intake Form</h2>

<form id="newIntake">

    <div class="form-group">
        @Html.LabelFor(m => m.Intake.ItemName)
        @Html.TextBoxFor(m => m.Intake.ItemName, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Intake.ItemName)
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Intake.ItemDescription)
        @Html.TextBoxFor(m => m.Intake.ItemDescription, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Intake.ItemDescription)
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Intake.Segment)
        @Html.DropDownListFor(m => m.Intake.SegmentId, new SelectList(Model.Segment, "Id", "Name"), "Select Segment", new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Intake.SegmentId)
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Intake.MarketingLead)
        @Html.DropDownListFor(m => m.Intake.MarketingLeadId, new SelectList(Model.MarketingLead, "Id", "Name"), "Select Marketing Lead", new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Intake.MarketingLead)
    </div>

    <div class="form-group">
        @Html.Label("Intake Type")
        <br />
        <div class="radio">
            @{
                foreach (var row in Model.IntakeType)
                {
                    @Html.RadioButtonFor(m => m.Intake.IntakeTypeId, row.Id)
                    @Html.Label(row.Name)
                    <br />
                }
            }
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Intake.Quantity)
        @Html.TextBoxFor(m => m.Intake.Quantity, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Intake.Quantity)
    </div>

    <button class="btn btn-primary">Submit</button>
</form>

@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
    <script>

        $(document).ready(function () {
            var validator = $("#newIntake").validate({
                submitHandler: function () {

                    console.log("Handling Submit!");

                    var dateSub = new Date().toLocaleString();

                    var formData = {
                        "ItemName": $("#Intake_ItemName").val(),
                        "ItemDescription": $("#Intake_ItemDescription").val(),
                        "IntakeTypeId": $("#Intake_IntakeTypeId").val(),
                        "SegmentId": $("#Intake_SegmentId").val(),
                        "MarketingLeadID": $("#Intake_MarketingLeadId").val(),
                        "Quantity": $("#Intake_Quantity").val(),
                        "DateSubmitted": dateSub
                    };

                    $.ajax({
                        url: "/api/intake",
                        method: "post",
                        data: formData
                    })
                        .done(function () {
                            console.log("Yeah!  It worked.");
                            // Clear the form
                            //$("#newIntake").get(0).reset()
                            //validator.resetForm();
                        })
                        .fail(function () {
                            console.log("Something unexpected happened.");
                        });

                    return false;
                }
            });
        });

    </script>
}
ASKER CERTIFIED SOLUTION
Sarah Ward
Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 2 Answers and 18 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 18 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros