我試圖在按鈕單擊 Ajax Post 請求時將ID值傳遞給控制器??。但它無法作業。該按鈕位于 Foreach 回圈中。在這里，我嘗試傳遞 ID 值，但稍后我想傳遞模型值。如果可能的話，請給我一個解決方案。
控制器方法：
[HttpPost]
public IActionResult Job_details(int id)
{
int ids = 0;
return Json(new { result = "Redirect"});
}
查看代碼：
@model IEnumerable<OnlineRecruitmentMst>
@{
var options = Model.OrderBy(i => i.VacancyID).ToList();
}
@for (int i = 0; i < options.Count(); i )
{
<div id="loopOption" class="row justify-content-center">
<div class="col-xl-10">
<!-- single-job-content -->
<div class="single-job-items mb-30">
<div class="job-items">
<div class="company-img">
<a href="job_details.cshtml"><img src="assets/img/icon/job-list1.png" alt=""></a>
</div>
<div class="job-tittle">
<a><h4 id="VacPost">@options[i].Post</h4></a>
<ul>
<li id="VacDept"><i class="fas fa-map-marker-alt"></i>@options[i].Department</li>
<li id="VacNumber">Numer Of Vacancy: @options[i].NumberOfVacancy</li>
</ul>
</div>
</div>
<div class="items-link f-right">
<button id="btnPost" type="submit" class="btn head-btn1" data-id="@options[i].VacancyID" value="@options[i].VacancyID">View Details</button>
<span id="VacEndDate" class="alert-danger">End Date : @options[i].EndDate</span>
</div>
</div>
</div>
</div>
}
腳本代碼：
<script type="text/javascript">
$(function () {
$(document).on("click", "#btnPost", function (e) {
debugger;
e.preventDefault();
var Vacid = $(this).val();
$.ajax({
type: "POST",
url: "/home/job_details/",
data: JSON.stringify(Vacid),
contentType: 'application/json;charset=utf-8',
dataType: "json",
cache: false,
success: function (response) {
alert("AJAX request successfully completed");
if (response.result == 'Redirect') {
window.location = '@Url.Action("JobVacancy", "Home")';
}
},
error: function () {
alert("An error occurred.");
}
});
});
});
</script>
uj5u.com熱心網友回復：
我想傳遞模型值。如果可能的話，請給我一個解決方案。
關于如何傳遞 id，您可以參考：
看法：
@section Scripts
{
<script type="text/javascript">
$(function () {
$(document).on("click", "#btnPost", function (e) {
debugger;
e.preventDefault();
var Vacid = $(this).val();
$.ajax({
type: "POST",
url: "/home/job_details/",
data: { id: Vacid }, //change here
//contentType: 'application/json;charset=utf-8', //remove this
dataType: "json",
cache: false,
success: function (response) {
alert("AJAX request successfully completed");
if (response.result == 'Redirect') {
window.location = '@Url.Action("JobVacancy", "Home")';
}
},
error: function () {
alert("An error occurred.");
}
});
});
});
</script>
}
關于如何傳遞模型，這里有一個作業演示，你需要用動態索引修改你的元素 id：
模型：
public class OnlineRecruitmentMst
{
public int VacancyID { get; set; }
public string Post { get; set; }
public string Department { get; set; }
public int NumberOfVacancy { get; set; }
public string EndDate { get; set; }
}
看法：
@model IEnumerable<OnlineRecruitmentMst>
@{
var options = Model.OrderBy(i => i.VacancyID).ToList();
}
@for (int i = 0; i < options.Count(); i )
{
<div id="loopOption" class="row justify-content-center">
<div class="col-xl-10">
<!-- single-job-content -->
<div class="single-job-items mb-30">
<div class="job-items">
<div class="company-img">
<a href="job_details.cshtml"><img src="assets/img/icon/job-list1.png" alt=""></a>
</div>
<div class="job-tittle">
<a><h4 id="VacPost_@i">@options[i].Post</h4></a> @*change id here*@
<ul>
@*change id here*@
<li id="VacDept_@i"><i class="fas fa-map-marker-alt"></i>@options[i].Department</li>
<li id="VacNumber_@i">Numer Of Vacancy: @options[i].NumberOfVacancy</li>
</ul>
</div>
</div>
<div class="items-link f-right">
@*add onclick function here*@
<button onclick="Click('@options[i].VacancyID','@i')" id="btnPost" type="submit" class="btn head-btn1" data-id="@options[i].VacancyID" value="@options[i].VacancyID">View Details</button>
@*change id here*@
<span id="VacEndDate_@i" class="alert-danger">End Date : @options[i].EndDate</span>
</div>
</div>
</div>
</div>
}
@section Scripts
{
<script type="text/javascript">
function Click(vacid,index) {
var VacNumber = $("#VacNumber_" index).text();
var data = VacNumber.split(":");
var Vacancy = data[data.length - 1];
var VacEndDate = $("#VacEndDate_" index).text();
var data2 = VacEndDate.split(":");
var EndDate = data2[data2.length - 1];
//pass the model
var model = {
VacancyID: vacid,
Post: $("#VacPost_" index).text(),
Department: $("#VacDept_" index).text(),
NumberOfVacancy: Vacancy,
EndDate: EndDate,
};
$.ajax({
type: "POST",
url: "/home/job_details/",
data: JSON.stringify(model), //change here
contentType: 'application/json;charset=utf-8',
dataType: "json",
cache: false,
success: function (response) {
alert("AJAX request successfully completed");
if (response.result == 'Redirect') {
window.location = '@Url.Action("JobVacancy", "Home")';
}
},
error: function () {
alert("An error occurred.");
}
});
}
</script>
}
控制器：
[HttpPost]
public IActionResult Job_details([FromBody] OnlineRecruitmentMst OnlineRecruitmentMst)
{
//...
}
結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/415896.html
標籤：
上一篇：欄位為空時的復選框過濾表