I am trying to pass the ID Value to the controller on the button click Ajax Post request. But it couldn't work. The button resides within the Foreach loop. Here I am trying to pass the ID value but later on, I want to pass the model value. If possible please give me a solution for both.

Controller Method:

[HttpPost]
        public IActionResult Job_details(int id)
        {
            int ids = 0;
            return Json(new { result = "Redirect"});
        }

View Code:

@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 Code:

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

CodePudding user response：

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

For how to pass id,you could refer:

View:

@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>
}

For how to pass model,here is a working demo,you need to modify your element id with dynamic index:

Model:

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; }
}

View:

@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>
}

Controller:

[HttpPost]
public IActionResult Job_details([FromBody] OnlineRecruitmentMst OnlineRecruitmentMst)
{
    //...
}

Result: