skip to Main Content

I’m new to MVC asp.net jquery ajax and hoping you guys can help me give insight on my problem.
Thank you so much any answer would be helpful.

I’m just having a self exercise that i saw on some online group to help me gain more knowledge on how to implement jquery on asp.net mvc any advice would help.

Controller
public JsonResult AddJob(jobdetail job)
        {
            using(jQueryAjaxEntities db = new jQueryAjaxEntities())
            {
                db.jobdetails.Add(job);
                db.SaveChanges();
                return Json("Success");
            }

        }

Heres my AddJob view
Whenever I remove the script src it’s saving normally, can anyone explain me why is it like that?

  <script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#btnSave").click(function () {
            var JobModel = {
                TaskName: $("Task_Name").val(),
                Description: $("Description").val(),
                DateStarted: $("Date_Started").val(),
                DateFinished: $("Date_Finished").val(),
                Status: $("Status").val()
            };
            $.ajax({
                type: "POST",
                url: "/Home/AddJob",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({ job: JobModel }),
                success: function (response) {
                    window.location.href = "/Home/Index"
                }
            });
        });
    });
</script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.JobID)

        <div class="form-group">
            @Html.LabelFor(model => model.Task_Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Task_Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Task_Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Date_Started, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Date_Started, new { htmlAttributes = new { @class = "form-control", @type = "date" } })
                @Html.ValidationMessageFor(model => model.Date_Started, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Date_Finished, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Date_Finished, new { htmlAttributes = new { @class = "form-control", @type = "date" } })
                @Html.ValidationMessageFor(model => model.Date_Finished, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Status, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group" id="DivSave">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Submit" id="btnSave" class="btn btn-default" />
            </div>
        </div>
    </div>
}


2

Answers


  1. You are probably hitting your AddJob Action twice. First, the btnSave button is clicked, and by the jquery event, you post your data with ajax. Then, your form submits the data to your AddJob Action as well. And a duplicate record is inserted.

    Login or Signup to reply.
  2. You posting your form twice.

    1.@(Html.BeginForm()) Post call as button type is submit.
    which is working fine and inserting proper data.

    2.jQuery AJAX Post Call.

    Missing # for getting values of fields.
    So, It inserting Null data.

    Code:

    TaskName: $("Task_Name").val()
    

    It should be:

    TaskName: $("#Task_Name").val()
    

    If you made this changes then it will insert data twice.

    So, You need to post form once only.

    This can be done:

    1. Change Button type sumit to button. This will avoid post call of form begin.
    2. Remove Jquery post code.

    I will suggestions Remove AJAX call code post your form using form post only.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search