How can data be sent from the view to the controller?
This is the select element where the data is retrieved (sel1):
<div class="form-group" style="margin: 0 auto;">
<label for="sel1">Select a cat breed:</label>
<select class="form-control" id="sel1">
@foreach (var item in Model)
{
<option>
@Html.DisplayFor(modelItem => item.BreedName)
</option>
}
</select>
</div>
This is the script attempted to send back the data:
<script>
$(document).ready(function () {
loadJasonData();
$("#sel1").change(function () {
loadJasonData();
});
});
function loadJasonData() {
$.ajax({
type: "POST",
url: "CatDetails",
//url: "/CatCompare/CatDetails", i also tried this of url
cache: false,
dataType: "json",
data: { name: $("#sel1").val() }
})
}
And here is the controller handling the data:
[HttpPost]
[HttpGet]
public ActionResult CatDetails(string name)
{
var breedName = db.Breeds.FirstOrDefault(b => b.BreedName == name);
ViewBag.name = breedName.BreedName;
ViewBag.lifeSpan = breedName.Lifespan;
ViewBag.height = breedName.Height;
ViewBag.weight = breedName.Weight;
ViewBag.shortDescription = breedName.ShortDescription;
return View();
}