在 Foreachloop 按钮内单击 Value not pass to controller

Question

我正在尝试将 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>

Answer 1

I want to pass the model value. If possible please give me a solution for both.

如何传递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)
{
    //...
}

结果：

在 Foreachloop 按钮内单击 Value not pass to controller

Inside Foreachloop button click Value not pass to controller

ajax

model-view-controller

jquery

asp.net-mvc-3

asp.net-core