How to call drop down list by ajax call request when selected value changed? - asp.net

Question

I work on web app mvc .NET framework I face issue i can't call function GetSelectedDropDownChanged when drop down selected changed .
I put break point to function GetSelectedDropDownChanged on controller WorkforceRequests
but it not hit or catched so what is issue
so what I try is :
<th>
<select class="form-control" id="statusselect" name="statusselectName">
<option value="1">Pending Request</option>
<option value="2">All requests </option>
</select>
</th>
when select from drop down I expect to call it ajax request call to function WorkforceRequests controller WorkforceRequests :
<script>
$(function () {
$(document)
.on('change', '#statusselect', function () {
var valueofDropDown = $(this).val();
var url = '/WorkforceRequests/GetSelectedDropDownChanged';
var dataToSend = { selectedValue: valueofDropDown }
$.ajax({
url: url,
data: dataToSend,
type: 'GET',
success: function (dataReceived) {
//update control on View
var receivedValue = dataReceived.myResult;
$('YourControlIDToUpdate').val(receivedValue);
}
})
});
};
</script>
function i call from ajax request as below :
public class WorkforceRequestsController : Controller
{
[HttpGet]
public JsonResult GetSelectedDropDownChanged(string selectedValue)
{
List<WorkforceRequest> workforceRequest = new List<WorkforceRequest>();
if (selectedValue == "1")
{
workforceRequest = Workforce.GetPendingOnPalnningSection();
}
else
workforceRequest = Workforce.GetAllRequestsData();
return Json(new { myResult = workforceRequest }, JsonRequestBehavior.AllowGet);
}
}
data will returned as list from ajax call from function GetSelectedDropDownChanged ON table id dtbl
<table id="dtbl" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.WorkforceRequestID)
</th>
<th>
#Html.DisplayNameFor(model => model.DepartmentCode)
</th>
<th>
#Html.DisplayNameFor(model => model.Section)
</th>
<th>
#Html.DisplayNameFor(model => model.RequiredPosition)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.WorkforceRequestID)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.Section)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequiredPosition)
</td>
</tr>
}
</tbody>
</table>
Last Updated
I change my code inside view.cshtml to :
#model IEnumerable<HR.WorkforceRequisition.Models.WorkforceRequest>
#{
ViewBag.Title = "Pending Requests";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Pending Requests</h2>
<hr />
#if (!string.IsNullOrWhiteSpace(ViewBag.msg))
{
<div class="alert alert-success">
#ViewBag.msg
</div>
}
#if (!string.IsNullOrWhiteSpace(ViewBag.errorMsg))
{
<div class="alert alert-danger">
#ViewBag.errorMsg
</div>
}
#if (Session[BLL.Common.SessionKeys.RoleCode].ToString() == "REC" || Session[BLL.Common.SessionKeys.RoleCode].ToString() == "PLNG")
{
<th>
<select class="form-control" id="statusselect" >
#*<option>Select Status</option>*#
<option value="1">Pending Request</option>
<option value="2">All requests </option>
</select>
</th>
}
<table id="dtbl" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.WorkforceRequestID)
</th>
<th>
#Html.DisplayNameFor(model => model.DepartmentCode)
</th>
<th>
#Html.DisplayNameFor(model => model.Section)
</th>
<th>
#Html.DisplayNameFor(model => model.RequiredPosition)
</th>
<th>
#Html.DisplayNameFor(model => model.JobTitle)
</th>
<th>
#Html.DisplayNameFor(model => model.ReportingTo)
</th>
<th>
#Html.DisplayNameFor(model => model.NationalityCategory)
</th>
<th>
#Html.DisplayNameFor(model => model.StatusRemark)
</th>
<th>
Requestor
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.ActionLink("Details", "Details", new { id = item.WorkforceRequestID })
</td>
<td>
#Html.DisplayFor(modelItem => item.WorkforceRequestID)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.Section)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequiredPosition)
</td>
<td>
#Html.DisplayFor(modelItem => item.JobTitle)
</td>
<td>
#Html.DisplayFor(modelItem => item.ReportingTo)
</td>
<td>
#Html.DisplayFor(modelItem => item.NationalityCategory)
</td>
<td>
#Html.DisplayFor(modelItem => item.StatusRemark)
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedByName)
</td>
</tr>
}
</tbody>
</table>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
#section scripts
{
<script>
$(document).ready(function () {
$("#statusselect").change(function () {
var valueofDropDown = $("#statusselect").val();
console.log(valueofDropDown);
var url = #Url.Action("GetSelectedDropDownChanged", "WorkforceRequests");
var dataToSend = { selectedValue: valueofDropDown }
$.ajax({
url: url,
data: dataToSend,
type: 'GET',
success: function (dataReceived) {
//update control on View
var receivedValue = dataReceived.myResult;
$('YourControlIDToUpdate').val(receivedValue);
}
})
});
}
</script>
}
Issue still not solved yet

Answer 1

#ahmed abdelaziz please check below code
you write a url before after get the value
var valueofDropDown = $(this).val();
var url = '/WorkforceRequests/GetSelectedDropDownChanged?selectedValue='+valueofDropDown;
have you check this one because I am not able to show in your code
#section scripts {
//stuff
}
_Layout.cshtml
#RenderSection("scripts", required: false)