在Foreachloop按钮内，单击“值不传递给控制器​​”

如何解决在Foreachloop按钮内，单击“值不传递给控制器​​”

我正在尝试将 ID 值传递给控制器​​，并单击Ajax Post请求按钮。但这行不通。该按钮位于Foreach循环内。在这里，我尝试传递ID值，但稍后，我想传递 model 值。如果可能的话，请给我两者的解决方案。

控制器方法：

[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> 

解决方法

我想传递模型值。如果可能的话请给我一个解决方案 对于两者。

有关如何传递ID的信息，请参阅：

查看：

v + df['b']

关于如何传递模型，这是一个有效的演示，您需要使用动态索引修改元素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>
}

查看：

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",data: JSON.stringify(model),//change here
                contentType: 'application/json;charset=utf-8',dataType: "json",error: function () {
                    alert("An error occurred.");
                }
            });
        }
 
    </script>
}

结果：