Implement foreachloop in mvc

Question

I am fetching the admin side vacancy in client side

 

currenty admin side three vacancy available and I am displaying three vacancy in client side

 

In client side display the three vacancy

 

problem is there I want to display each vacancy display separate

 

currently all vacancy display together that is main problem

 

if no vacancy available admin side then display client side no content available

 

for example:

 

what I want to:

<div class="row">
    <div class="col-md-6">
        //first vacancy data and apply button
    </div>
    <div class="col-md-6">
        //second vacancy data and apply button
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        //third vacancy data and apply button
    </div>
    <div class="col-md-6">
        //fourth vacancy data and apply button
    </div>
</div>

if no vacancy admin side then below display image

<div class="row">
//@ViewBag.message //here I am fetching controller viewbag message in model means **no content available**
</div>

admin side vacancy:

 

client side vacancy(here I fetch the admin vacancy):

 

 

ViewModel

public class ViewModel
{
    public Career Career { get; set; }
    public List<Vacancy> Vacancy { get; set; }
    [NotMapped]
    public SelectList vacancyselectlist { get; set; }
}

public class Career
{
    [Key]
    public int usercarrerid { get; set; }

    public string useremailid { get; set; }

    public string usercontactno { get; set; }

    public string userresume { get; set; }

    public Nullable<int> vacancyid { get; set; }

    [ForeignKey("vacancyid")]
    public Vacancy vacancy { get; set; }

}

public class Vacancy
{
    public int vacancyid { get; set; }
    public string vacancytitle { get; set; }
    public string vacancyposition { get; set; }
    public string vacancyexperience { get; set; }
    public string vacancyjobdescription { get; set; }
    public string vacancyrequiredskill { get; set; }
}

Career.cshtml

@model projectname.Models.ViewModel
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h2 style="margin-top:150px;">Current Job Openings</h2>
        </div>
    </div>
</div>

<div class="container">
    <div style="font-size:18px;">
        <table>
            <tr>
                <th>Vacancy Title</th>
            </tr>

            @foreach (var carr in Model.Vacancy)
            {
                <tr>
                    <td>
                        <text>-</text>
                        @carr.vacancytitle
                    </td>

                </tr>
            }

            <tr>
                <th>Vacancy Position</th>
            </tr>

            @foreach (var carr in Model.Vacancy)
            {
                <tr>
                    <td>
                        <text>-</text>
                        @carr.vacancyposition
                    </td>

                </tr>
            }

            <tr>
                <th>Vacancy Experiance</th>
            </tr>

            @foreach (var carr in Model.Vacancy)
            {
                <tr>
                    <td>
                        <text>-</text>
                        @carr.vacancyexperience
                    </td>

                </tr>
            }

            <tr>
                <th>Vacancy Job Description</th>
            </tr>

            @foreach (var carr in Model.Vacancy)
            {
                <tr>
                    @{
                        //here I am removing the dots and add the glyphiicon //split means remove the character
                        var dataJobDescription = @carr.vacancyjobdescription.Split('.');
                    }
                    <td>
                        @for (var i = 0; i < dataJobDescription.Length; i++)
                        {
                            <span>
                                <img src="~/bootstrap-icons-1.0.0/chevron-right.svg" width="20" height="20" />
                            </span>
                            @dataJobDescription[i]
                            <br />
                        }
                    </td>
                </tr>
            }

            <tr>
                <th>Vacancy Required Skill</th>
            </tr>

            @foreach (var carr in Model.Vacancy)
            {
                <tr>
                    @{
                        //here I am removing the dots and add the glyphiicon //split means remove the character
                        var dataRequiredSkill = @carr.vacancyrequiredskill.Split('.');
                    }
                    <td>
                        @for (var i = 0; i < dataRequiredSkill.Length; i++)
                        {
                            <span>
                                <img src="~/bootstrap-icons-1.0.0/chevron-right.svg" width="20" height="20" />
                            </span>
                            @dataRequiredSkill[i]
                            <br />
                        }
                    </td>
                </tr>
            }

            <tr>
                <td>
                    <button class="btn btn-success applylink">Apply</button>
                </td>
            </tr>
        </table>
    </div>
</div>

HomeController.cs

[HttpGet]
 public async Task<ActionResult> Career(List<Vacancy> _vacancy)
 {
     //some code
     HttpResponseMessage responseMessage = client.GetAsync("https://localhost:44325/Home/DisplayVacancyData").Result; //here I am fetching admin side vacancy to client side

     if (responseMessage.IsSuccessStatusCode)
     {
         //some code

         if (_vacancy.Count == 0)
         {
             ViewBag.message = "No content Available"; //if no vacancy avilable in admin side then display client side No content Available
         }
         else
         {
             return View("Career", test);
         }
     }
     return View("Index");
 }

problem is here

@carr.vacancytitle //problem is here all the data get here need to implement logic
@carr.vacancyposition //problem is here all the data get here need to implement logic
@carr.vacancyexperience //problem is here all the data get here need to implement logic

which place to add foreach loop because data is dynamic here can not use for loop

 

here need to implement foreach loop because data is dynamic not static

 

please help