CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvc
Susen Maharjan
Susen Maharjan

Reputation: 537

How to redirect to POST ActionResult from jQuery?

I tried to add toastr notification in my code. Before adding it, it perfectly works fine. But when I tried to add toastr notification after jQuery validation, it shows that the record was successfully performed but it won't redirect or save data like previous. It seems that the jQuery didn't forward the viewModel data to the POST method. Following is my codes:

@model ESportsScreening.ViewModel.ScreeningFormViewModel

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

<h2>New Screening</h2>

@using (Html.BeginForm("Create", "Screenings", FormMethod.Post, new { id = "createForm" }))
{
    <p class="alert alert-info">All fields are <strong>required</strong></p>
    @Html.AntiForgeryToken()
    <div class="form-group">
        @Html.LabelFor(m => m.TeamA)
        @Html.TextBoxFor(m => m.TeamA, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.TeamA)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.TeamB)
        @Html.TextBoxFor(m => m.TeamB, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.TeamB)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Date)
        @Html.TextBoxFor(m => m.Date, new { @class = "form-control", placeholder = "eg 1 Jan 2018" })
        @Html.ValidationMessageFor(m => m.Date)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Time)
        @Html.TextBoxFor(m => m.Time, new { @class = "form-control", placeholder = "eg 24:00" })
        @Html.ValidationMessageFor(m => m.Time)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Ticket)
        @Html.TextBoxFor(m => m.Ticket, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Ticket)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Competition)
        @Html.DropDownListFor(m => m.Competition, new SelectList(Model.Competitions, "Id", "Name"), "", new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Competition)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Description)
        @Html.TextAreaFor(m => m.Description, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Description)
    </div>

    <button class="btn btn-primary">Save</button>
}

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

    <script>
        $(document).ready(function () {
            $("#createForm").submit(function (e) {
                e.preventDefault();
                $('#createForm').validate();

                if ($('#createForm').valid()) {
                    toastr.success("Screening recorded succesfully!");
                } else {
                    toastr.fail("Something unexpected happened..");
                }
            });
        });
    </script>
}

What are the changes required in my jQuery so that it can forward me to the POST method of ScreeningController and Create(viewModel)?

Upvotes: 1

Views: 237

Answers (1)

Manoj
Manoj

Reputation: 5071

You need to remove e.preventDefault();. It preventing to post on server.

           $("#createForm").submit(function (e) {
                $('#createForm').validate();
                if ($('#createForm').valid()) {
                    toastr.success("Screening recorded succesfully!");
                } else {
                    toastr.fail("Something unexpected happened..");
                }
            });

Upvotes: 2

Related Questions