We Keep Coding

MVC: 404 not found in ajax

I am showing a number of flights in a view. I have created a button for every flight. On clicking this button I am getting the details of a single flight shown in the view.
here is my view code:
foreach (var item in Model)
{
<div class="toFrom">
<h3 id="FCity_#item.FlightID">#item.FromCity </h3>
<span><i class="fa mx-4 fa-plane"></i></span>
<h3 id="TCity_#item.FlightID">#item.ToCity</h3>
</div>
<div class="info d-flex">
<p class="me-2 " id="DDate_#item.FlightID">#item.DepartureDate.ToShortDateString()</p>
<p class="me-2" id="DTime_#item.FlightID">#item.DepartureTime.ToShortTimeString()</p>
<p class="me-2 " id="ATime_#item.FlightID">#item.ArrivalTime.ToShortTimeString()</p>
<select id="CFare_#item.Fare" class="form-control me-2">
#foreach (var re in ddlcabin)
{
<option value="#re.Fare">#re.CabinName (#re.Fare)</option>
}
</select>
<button class="form-control btn btn-primary" onclick="Save(#item.FlightID,#item.Fare)">select </button>
</div>
}
Now I want to get these values using and pass them to an action method without using a form in the view.
here is my js code:
function Save(id, fare) {
var fct = $("#FCity_" + id).text();
var tct = $("#TCity_" + id).text();
var ddt = $("#DDate_" + id).text();
var dt = $("#DTime_" + id).text();
var at = $("#ATime_" + id).text();
var cf = $("#CFare_" + fare).val();
$.ajax({
method: 'GET',
url: 'Flights/ReserveFlight',
data: { FromCity: fct, ToCity: tct, DepDate: ddt, DepTime: dt, ArrTime: at, CabinFare: cf },
success: function (data) {
console.log("data is inserted")
},
error: function (err) {
console.log(err)
}
});
}
when I click the save button it shows an error in the browser console and doesn't hit the debugger applied to the action method
here is my action method:
public ActionResult ReserveFlight(string FromCity, string ToCity, DateTime DepDate, DateTime DepTime, DateTime ArrTime, int CabinFare)
{
return View();
}
here is the error:
GET
http://localhost:64480/Flights/Flights/ReserveFlight?FromCity=Islamabd%20&ToCity=Karachi&DepDate=5%2F20%2F2022&DepTime=8%3A30%20AM&ArrTime=12%3A00%20AM&CabinFare=4500 404 (Not Found)

Modify the URL in ajax as:
$.ajax({
method: 'GET',
url: '/Flights/ReserveFlight',
data: { FromCity: fct, ToCity: tct, DepDate: ddt, DepTime: dt, ArrTime: at, CabinFare: cf },
success: function (data) {
console.log("data is inserted")
},
error: function (err) {
console.log(err)
}
});
Or work with UrlHelper.
$.ajax({
method: 'GET',
url: '#Url.Action("Flights", "ReserveFlight")',
data: { FromCity: fct, ToCity: tct, DepDate: ddt, DepTime: dt, ArrTime: at, CabinFare: cf },
success: function (data) {
console.log("data is inserted")
},
error: function (err) {
console.log(err)
}
});
Reference: Action(String, String) | UriHelper.Action() Method

Problems Cascading dropdownlist, generated dropdown isn't posting selected value to server

Here is my view in image
The code is working fine, but...
When i submit the form, it only sends the value of first dropdownlist (I checked on browser network received arguments), also when i view the page source it doesn't show the generated options that I generated using ajax function.
Here is my Code
Action that generate my first dropdownList
public ActionResult TwoDropDownList()
{
HotelContext H = new HotelContext();
ViewBag.DropDownListOne = new SelectList(H.Continent.ToList(), "Id", "Name");
return View();
}
Action that return json of second dropdownlist data
[HttpPost]
public JsonResult UpdateCountryDropDownList(int ContinentId)
{
HotelContext H = new HotelContext();
List<SelectListItem> CountryNames = new List<SelectListItem>();
List<Country> Co = H.Country.Where(x => x.ContinentId == ContinentId).ToList();
Co.ForEach(x =>
{
CountryNames.Add(new SelectListItem { Text = x.Name, Value = x.Id.ToString() });
});
return Json(CountryNames , JsonRequestBehavior.AllowGet);
}
My Ajax call
#model Hotel.Models.Continent
<script>
$(document).ready(function () {
$("#Name").change(function () {
var ContinentoId = $(this).val();
$.ajax({
type: "POST",
dataType: "json",
data: { ContinentId: ContinentoId },
url: '#Url.Action("UpdateCountryDropDownList","Home")',
success: function (result) {
var Country = "<select id='ddlCountry'>";
Country = Country + '<option value="">--Select--</option>';
for (var i = 0; i < result.length; i++) {
Country = Country + '<option value=' + result[i].Value + '>' + result[i].Text + '</option>';
}
Country = Country + '</select>';
$('#Countries').html(Country);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(arguments)
}
});
});
})
</script>
My View
#using(Html.BeginForm()){
SelectList se = ViewBag.DropDownListOne;
#Html.DropDownListFor(x=>x.Name,se,"--Select--")
<div id ="Countries">
#Html.DropDownList("ddlCountry",new List<SelectListItem>(),"--Select--")
</div>
<input type="submit" value="submit" style="margin-top:100px;" />
}
HTTPPost Action
[HttpPost]
public string TwoDropDownList(string Name, string ddlCountry)
{
if (string.IsNullOrEmpty(Name) || string.IsNullOrEmpty(ddlCountry))
{
return ("you must select Both");
}
else
return ("everything is working fine");
}

You already have a <select> element with name="ddlCountry" (generated by #Html.DropDownList("ddlCountry", new List<SelectListItem>(), "--Select--") but in the ajax call, you overwrite it and create a new <select> element without a name attribute (so its value is not posted back.
In the success callback, you should be creating <option> elements and appending them to the existing <select>
success: function (result) {
var country = $('#ddlCountry); // get the existing element
country.empty().append($('<option></option>').val('').text('--Select--'));
$.each(result, function(index, item) {
country.append($('<option></option>').val(item.Value).text(item.Text));
});
}
Side note: Your methods should be returning a collection of anonymous objects, not SelectListItem There is no point sending extra data (the other properties of SelectListItem) across the wire when you don't use them.

I think you are missing the end tag </div> for the <div id ="Countries">.
Try this:
<div id ="Countries">
#Html.DropDownList("ddlCountry",new List<SelectListItem>(),"--Select--")
</div>

Pass ViewModel to view twice

I have the following index-method in my homecontroller:
var homeIndexModel = new HomeIndexModel()
{
ActiveTasks = tasks.Where(
task =>
task.TaskStatus != TaskStatusEnum.Deferred &&
task.TaskStatus != TaskStatusEnum.Verified && task.TaskStatus != TaskStatusEnum.Resolved),
ClosedTasks = tasks.Where(
task =>
task.TaskStatus == TaskStatusEnum.Resolved),
DeferredTasks = tasks.Where(
task =>
task.TaskStatus == TaskStatusEnum.Verified ||
task.TaskStatus == TaskStatusEnum.Deferred),
Rules = m_errandSvc.GetAllRules(),
Sources =
Enum.GetValues(typeof(TaskSourceEnum)).Cast<TaskSourceEnum>().AsEnumerable().OrderBy(taskSource => taskSource.AsString()),
Types =
Enum.GetValues(typeof(TaskTypeEnum)).Cast<TaskTypeEnum>().AsEnumerable().OrderBy(taskSource => taskSource.AsString()),
Counties = counties,
Reports = null,
};
return this.View(homeIndexModel);
This homeIndexModel Is passed to the view when you visit the firstpage. As you can see, I assaign a Report-object to null.
I want to use thise Report-property of homeIndexModel when I do a search On the firstpage. When I hit "Search", a modal should appear and the search result printed out.
Here Is my search-method in the controller:
[HttpPost]
public ActionResult SearchReport(string searchVal, string searchParam)
{
var reports = m_errandSvc.GetReportSearch(searchVal, searchParam).ToList();
var homeIndexModel = new HomeIndexModel()
{
Reports = reports
};
return this.View(homeIndexModel);
}
As you can see, I assaign the Report-property with the result of GetReportSearch. I want to loop through this object below:
<!-- Modal -->
<div class="modal" id="myModalSearch" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<h4>FISH</h4>
#if (Model.Reports != null)
{
}
</div>
</div>
</div>
</div>
</div>
</div>
The problem I have is that when I add a foreach, like this below, my debug-mode quits.
#if (Model.Reports != null)
{
foreach(var itm in Model.Reports)
{
<div>#itm.Report_id</div>
<div>#itm.ReportSource</div>
}
}
How can I solve this whole thing with homeIndexViewModel and print out my search-result as I want to?
Herer is my jQuery that I use to post to the search-method:
$('#searchReports').click(function () {
var searchVal = $('#searchVal').val();
$.ajax({
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
url: DataReview.BASE + "/Home/SearchReport",
data: JSON.stringify(
{
'searchVal': searchVal,
'searchParam': searchParam
}
)
}).done(function (data) {
console.log("YES");
}).fail(function(data) {
console.log("Fail " + data);
});
});

Pass back the view model again on search and then assign the report to it this way.
[HttpPost]
public ActionResult SearchReport(string searchVal, string searchParam, HomeIndexModel homeIndexModel )
{
var reports = m_errandSvc.GetReportSearch(searchVal, searchParam).ToList();
homeIndexModel.Reports = reports
return this.View(homeIndexModel);
}
Or the best practice is you can do a Ajax call and then get only the reports data and update your View page. But this requires Jquery, let me know if you want help on implementing this.
EDIT 1: Making small change to your code to get this job done by ajax.
$.ajax({
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
url: DataReview.BASE + "/Home/SearchReport",
data: JSON.stringify(
{
'searchVal': searchVal,
'searchParam': searchParam
}
)
})
.done(function (reportData ) {
var $panelHeading = $('#myModalSearch .panel-heading');
$('#myModalSearch .panel-heading').contents(':not(h4)').remove(); //remove previous search results
$.each(reportData, function(i,v){
$panelHeading.append("<div>"+this.Report_id+"</div<div>"+this.ReportSource+"</div>"); //append new result
});
})
Your controller must return JSON rather than a view, So change the code to below one.
[HttpPost]
public ActionResult SearchReport(string searchVal, string searchParam)
{
var reports = m_errandSvc.GetReportSearch(searchVal, searchParam).ToList();
return Content( new JavaScriptSerializer().Serialize(reports), "application/json");
}

Bind the record to html.dropdownlist using ajax call in mvc

I have one Mvc application. In that application in one View i have 2 #html.dropdownlists.I create one function in <script/> tag, will call at selectedIdnexchange event of first dropdown, and get the selected value and send to controller using ajax call. Controller will return result and trying to bind that result with 2nd dropdown.I want to display all RTO names of selected state in 2nd dropdown.
Here is my dropdown
#Html.DropDownList("State", new List<SelectListItem> {
new SelectListItem{Text="Andaman and Nicobar Islands",Value="Andaman and Nicobar Islands"},
new SelectListItem{Text="Andhra Pradesh",Value="Andhra Pradesh"},
new SelectListItem{Text="Arunachal Pradesh",Value="Arunachal Pradesh"},
new SelectListItem{Text="Assam",Value="Assam"},
new SelectListItem{Text="Bihar",Value="Bihar"},
new SelectListItem{Text="Chandigarh",Value="Chandigarh"},
new SelectListItem{Text="Chhattisgarh",Value="Chhattisgarh"},
new SelectListItem{Text="Dadra and Nagar Haveli",Value="Dadra and Nagar Haveli"},
new SelectListItem{Text="Daman and Diu",Value="Daman and Diu"},
new SelectListItem{Text="National Capital Territory of Delhi",Value="National Capital Territory of Delhi"},
new SelectListItem{Text="Goa",Value="Goa"} }, null, new { #class="ddlHtml form-control",#id="ddlState"})
#Html.DropDownList("RTOListItem", new List<SelectListItem> {
new SelectListItem{Text="None",Value="-1"}
}, null, new { #class = "ddlHtml form-control", #id = "DDlforLocations" })
Here is my script function
$(document).on('change', '#ddlState', function () {
var v = document.getElementById("ddlState");
var statevalue = v.options[v.selectedIndex].text;
alert(statevalue);
var j = v.selectedIndex;
if (j == 0) {
sweetAlert("Oops..", "choose correct State", "error");
}
else {
$.ajax({
url: '#Url.Action("GetLocations","Home")',
type: 'GET',
datatype: 'json',
data: { selectedState: statevalue }
})
.success(function (data) {
$('#DDlforLocations').html(data);
});
}
});
And here is my controller
public JsonResult GetLocations(string selectedState)
{
ConsumerNomineeFormEntities db= new ConsumerNomineeFormEntities();
RTOCode tbl = new RTOCode();
var optionList = db.RTOCodes.Where(a => a.State == selectedState).Select(a => "<option value='" + a.Location + "'>" + a.Location + "</option>");
var val = tbl.Location;
return Json(optionList, JsonRequestBehavior.AllowGet);
}
Please help me. To bind the record returning from controller with 2nd dropdown

It is not good idea to mix the code to build your UI markup in your server side code. You may consider returning some data from your server side which you will use in your client side to build the UI markup.
So let's return a list of SelectListItem objects.
var optionList = db.RTOCodes.Where(a => a.State == selectedState)
.Select(c => new SelectListItem { Value = c.Location,
Text = c.Location}).ToList();
And in your ajax call's success event, loop through this array and build the markup for the options.
success : function(data){
var options="";
// options = "<option value='-1'>None</option>"; // uncomment if you want this item
$.each(data,function(a,b){
options+="<option value='"+b.Value+"'>"+b.Text+"</option>";
});
$("#DDlforLocations").html(options);
}
Also, since you are loading the content of the second dropdown via ajax when user selects something on the first dropdown, you may consider changing that to pure clean HTML
<select name="RTOListItem" id="DDlforLocations">
<option value="-1">Select one</option>
</select>

How to display the value in dropdown using jquery?

i have a dropdown, where i can select AgencyName, with that selected AgencyName, i tried to display its AgentName in the next dropdown. But my code does'nt display the AgentName in the next dropdown.
i have my view page like:
<span class="LabelNormal">Agency</span>
#Html.DropDownListFor(m => m.LightAgencies.agencykey, new SelectList(Model.LightAgencies.Agency, "Key", "Value"), "", new {#id = "OwnerAgency" })
<span class="LabelNormal">Agent</span>
#Html.DropDownListFor(m => m.LightOwnerAgent.au_key, new SelectList(""), "", new { #id = "OwnerAgent" })
And i have my jquery like,
$(document).ready(function () {
$("#OwnerAgency").change(function () {
var procemessage = "<option value=`0`> Please wait...</option>";
$("#OwnerAgent").html(procemessage).show();
var url = "/Index/GetOwnerAgent/";
// Get agency key
var OwnerAgency = $("#OwnerAgency :selected").val();
// Get agent
var OwnerAgent = $("#OwnerAgent :selected").val();
$.ajax({
url: url,
data: { agencykey: OwnerAgency },
cache: false,
type: "POST",
success: function (data) {
var OwnerAgent = $("#OwnerAgent :selected").val();
alert(OwnerAgent);
},
error: function (reponse) {
alert("error : " + reponse);
}
});
});
where my controller "/Index/GetOwnerAgent/" giving the exact value for OwnerAgent. As iam the beginner i dont know how to do this, Kindly tell me.

In your code, you display the selected value in the dropdownlist as soon as the controller responds. I think you want to select the result from the controller in the dropdown.
Assuming that the data returned from the controller is a value that exists in the dropdownlist, you should be able to use:
...
success: function (data) {
$("#OwnerAgent").val(data);
}
...