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
You are probably hitting your
AddJob
Action twice. First, thebtnSave
button is clicked, and by the jquery event, you post your data with ajax. Then, your form submits the data to yourAddJob
Action as well. And a duplicate record is inserted.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:
It should be:
If you made this changes then it will insert data twice.
So, You need to post form once only.
This can be done:
I will suggestions Remove AJAX call code post your form using form post only.