Home > Blockchain >  Asp.net core how to display IEnumerable model one by one
Asp.net core how to display IEnumerable model one by one

Time:10-21

I have an IEnumerable model that want to show in one by one item in view.

   public IActionResult Index()
   {
       var model = _context.Question.ToList();
       return View(model);
   }

I have a view similar to the one below. I want the next and previous items to be displayed by pressing the next and previous button

enter image description here

And this is my view

   <div>
    <p>
        @foreach (var item in Model.Take(1))
        {
            @Html.Raw(item.QuestionContent)
            foreach (var item2 in item.Answers)
            {
                @Html.Raw(item2.AnswerContent)
                <input type="checkbox" />
            }
        }
    </p>

    <div>
        <a id="btnnext" class="btn">
            Next
        </a>
        <a id="btnprev" class="btn">
            Prev
        </a>
    </div>

CodePudding user response:

Here is a whole working demo you could follow:

Model:

public class Question
{
    public int Id { get; set; }
    public string QuestionContent { get; set; }
    public List<Answer> Answers { get; set; }
}
public class Answer
{
    public int Id { get; set; }
    public string AnswerContent { get; set; }
}

View:

@model IEnumerable<Question>
@{ 
    int current = (int)ViewBag.CurrentIndex;

}
<div>
    <p>

        @Html.Raw(Model.ElementAt(current).QuestionContent)
        @foreach (var item in Model.ElementAt(current).Answers)
        {
            @Html.Raw(item.AnswerContent)
            <input type="checkbox" />
        }

    </p>
    @{
        var prevDisabled = !(bool)ViewBag.HasPreviousPage ? "disabled" : "";
        var nextDisabled = !(bool)ViewBag.HasNextPage ? "disabled" : "";
    }

    <a asp-action="Index"
       asp-route-index="@ViewBag.PreviousIndex"
       class="btn btn-default @prevDisabled">
        Previous
    </a>
    <a asp-action="Index"
       asp-route-index="@ViewBag.NextIndex"
       class="btn btn-default @nextDisabled">
        Next
    </a>
</div>

Controller:

public IActionResult Index(int index)
{
    var model = _context.Question.ToList();
    ViewBag.CurrentIndex = index;
    ViewBag.PreviousIndex = index - 1;
    ViewBag.NextIndex = index   1;
    ViewBag.HasPreviousPage = ViewBag.PreviousIndex == -1 ? false : true;
    ViewBag.HasNextPage = ViewBag.NextIndex == model.Count() ? false : true;         
    return View(model);
}
  • Related