英文:
How to call drop down list by ajax call request when selected value changed?
问题
I work on web app mvc .NET framework I face issue i can't call function GetSelectedDropDownChanged when drop down selected changed .
我在.NET框架下的Web应用程序中工作，我遇到一个问题，当下拉列表选择改变时，我无法调用GetSelectedDropDownChanged函数。
I put break point to function GetSelectedDropDownChanged on controller WorkforceRequests
我在WorkforceRequests控制器中的GetSelectedDropDownChanged函数上设置了断点。
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>
<th>
<select class="form-control" id="statusselect" name="statusselectName">
<option value="1">待处理请求</option>
<option value="2">所有请求</option>
</select>
</th>
when select from drop down I expect to call it ajax request call to function GetSelectedDropDownChanged controller WorkforceRequests :
当从下拉列表中选择时，我期望调用GetSelectedDropDownChanged函数，控制器是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>
<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 :
我从下面的Ajax请求中调用函数：
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);
}
}
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
数据将作为列表从函数GetSelectedDropDownChanged的Ajax调用返回，表格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>
<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 :
我将代码更改为view.cshtml内部：
@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()
<details>
<summary>英文:</summary>
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**
</details>
# 答案1
**得分**: 1
@ahmed abdelaziz，请查看下面的代码
在获取值之前和之后，您需要编写一个URL
``` var valueofDropDown = $(this).val();
var url = '/WorkforceRequests/GetSelectedDropDownChanged?selectedValue='+valueofDropDown;
您是否检查过这个，因为我无法在您的代码中显示它
//其他内容
}
_Layout.cshtml
@RenderSection("scripts", required: false)
英文:
@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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论