I have the following View code in which I am displaying a list of flights.
@using Airline_Reservation_System.Models;
@{
AirlineContext ac = new AirlineContext();
var ddlcabin = ac.Cabins.ToList();
}
<div class="container d-flex flex-column align-items-center py-5">
@{
foreach (var item in Model)
{
<div class="flight mb-2">
<div class="info-label">
<span>Flight Info</span>
</div>
<div class="toFrom">
<h3 id="[email protected]">@item.FromCity </h3>
<span><i class="fa mx-4 fa-plane"></i></span>
<h3 id="[email protected]">@item.ToCity</h3>
</div>
<div class="info d-flex">
<p class="me-2 " id="[email protected]">@item.DepartureDate.ToShortDateString()</p>
<p class="me-2" id="[email protected]">@item.DepartureTime.ToShortTimeString()</p>
<p class="me-2 " id="[email protected]">@item.ArrivalTime.ToShortTimeString()</p>
<select id="[email protected]" class="form-control me-2">
@foreach (var re in ddlcabin)
{
<option value="@re.CabinsId">@re.CabinName (@re.Fare)</option>
}
</select>
<button class="form-control btn btn-primary" onclick="Save(@item.FlightID,@item.CabinsId)">select </button>
@*@Html.ActionLink("Select", "ReserveFlight", "Flights", new { @class = "btn SelectFlight btn-primary" })*@
</div>
</div>
}
}
}
<script>
function Save(id, cabinsId) {
var Fid = id;
var cid = cabinsId;
window.location.href = '@Url.Action("signUp","User")';
$.ajax({
method: 'GET',
url:'/Flights/ReserveFlight',
data: { FlightId: Fid, CabinId: cid }
});
}
</script>
Here in the script section, I called the first action method signUp in the User controller and after that, in the Ajax call, I posted data on the URL /Flights/ReserveFlight
but the problem is that In the first call the control goes to the signUp method in the User controller, but before opening its view the control automatically goes to action called by ajax means to this action which is:
public ActionResult ReserveFlight(int FlightId, int CabinId)
{
FlightReservation reserve = new FlightReservation();
reserve.CabinsId = CabinId;
reserve.Id = FlightId;
reserve.PessengerId = Convert.ToInt32(Session["UserId"]);
db.FlightReservations.Add(reserve);
db.SaveChanges();
return View();
}
this action gets executed and on the line:
db.SaveChanges();
it shows an exception because the pessengerId is going null. when I continue it then the view of the signUp method gets displayed. here is the view:
@using (Html.BeginForm("signUp", "User", FormMethod.Post,))
{
<div>
<div>
<div>
@Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control", id = "fullName" } })
</div>
</div>
<div>
<div class="col-md-5 offset-md-1">
@Html.DropDownListFor(m => m.Genderid, ViewBag.gender as SelectList, "--select gender--", htmlAttributes: new { @class = "form-control", id = "gender" })
</div>
<div class="col-md-5">
@Html.EditorFor(m => m.DOB, new { htmlAttributes = new { @class = "form-control", type = "date", id = "dob" } })
</div>
</div>
<div class="row mb-3">
<div class="col-md-5 offset-md-1">
@Html.EditorFor(model => model.contact, new { htmlAttributes = new { @class = "form-control", type = "number", id = "contact" } })
</div>
<div class="col-md-5">
@Html.EditorFor(model => model.Cnic, new { htmlAttributes = new { @class = "form-control", id = "cnic" } })
</div>
</div>
<div class="row mb-3">
<div class="col-md-10 offset-md-1">
@Html.DropDownListFor(m => m.CityId, ViewBag.cityList as SelectList, "--select city--", htmlAttributes: new { @class = "form-control", id = "city" })
</div>
</div>
<div class="row mb-3">
<div class="col-md-10 offset-md-1">
@Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control", id = "email" } })
</div>
</div>
<div class="row mb-3">
<div class="col-md-5 offset-md-1">
@Html.EditorFor(model => model.password, new { htmlAttributes = new { @class = "form-control", id = "password" } })
</div>
<div class="col-md-5">
@Html.EditorFor(model => model.cPassword, new { htmlAttributes = new { @class = "form-control", id = "cpassword" } })
</div>
</div>
<div class="row">
<div class="offset-md-1 col-md-10">
<input type="button" value="Sign Up" class="btn btn-primary" onclick="signUp()" />
</div>
</div>
</div>
}
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script>
function signUp() {
var obj = {
FullName: $('#fullName').val(),
Genderid: $('#gender').val(),
DOB: $('#dob').val(),
Cnic: $('#cnic').val(),
CityId: $('#city').val(),
contact: $('#contact').val(),
email: $('#email').val(),
password: $('#password').val(),
cPassword: $('#cpassword').val()
};
$.ajax({
method: "POST",
url: "/User/signUp",
data: obj,
success: function () {
alert("success");
},
error: function () {
alert("failed");
}
});
}
</script>
when I submit the form, Data gets inserted into the database but In the ajax call section, the error callback function is executed and alert shows
failed