How to display list of objects in a View for an MVC project

Question

I have a method that will return a list of string objects. I would like to display those list of objects as checkboxes in the view.

        [HttpGet]
        [Route("AvailablePlans")]
        public ActionResult GetPlan()
        {
                List<Plans> plans = new();

        plans.Add(new Plans { PlanId = 1, PlanName = "Internet" });
        plans.Add(new Plans { PlanId = 2, PlanName = "TV & Streaming" });
        plans.Add(new Plans { PlanId = 3, PlanName = "Mobile" });
        plans.Add(new Plans { PlanId = 4, PlanName = "Home Security" });
        plans.Add(new Plans { PlanId = 5, PlanName = "Home Phone" });


            var plansAvailable = JsonSerializer.Serialize(plans);
            _logger.Log(LogLevel.Information, "Response-Body: {@Response-Body}", plansAvailable);


            return Ok(plans);
        }

I have tried the following inside of the view, but plans count is constantly 0 whenever I call it. Is there a specific way to display the list of objects as checkboxes?

@model PhoneNumberInput


<h2>Second page</h2>

@using (Html.BeginForm())
{
 
    <input type="checkbox" id="@PlanService.API.Controllers.PlansController.plans[0]" name="PlanService.API.Controllers.PlanControllers.plans[1]" />
    <label for="PlanService.API.Controllers.PlanControllers.plans[1]"> @PlanService.API.Controllers.PlansController.plans[1] </label> <br />

    @Html.TextBoxFor(r => r.PhoneNumber)
    <input id="Button" type="submit" value="Next" />

    <p>  @Html.ValidationMessageFor(r => r.PhoneNumber) </p>

}

Update:

I currently have the following as so:

namespace Plan.API.Models
{
    public class ViewPhoneNumberInput
    {
        [Required(ErrorMessage = "You did not enter your phone number! Please enter your phone number!")]
        public String PhoneNumber { get; set; }
        public List<Plans> plans { get; set; }
    }
}

Controller:

namespace Plan.Api.Controllers
{

     public static List<Plans> plans = new();

     [HttpGet]
        [Route("AvailablePlans")]
        public ActionResult GetPlan()
        {

            var model = new ViewPhoneNumberInput();
            model.plans = new List<Plans>();

            model.plans.Add(new Plans { PlanId = 1, PlanName = "Internet" });
            model.plans.Add(new Plans { PlanId = 2, PlanName = "TV & Streaming" });
            model.plans.Add(new Plans { PlanId = 3, PlanName = "Mobile" });
            model.plans.Add(new Plans { PlanId = 4, PlanName = "Home Security" });
            model.plans.Add(new Plans { PlanId = 5, PlanName = "Home Phone" });


            var plansAvailable = JsonSerializer.Serialize(model.plans);
            _logger.Log(LogLevel.Information, "Response-Body: {@Response-Body}", plansAvailable);


            return Ok(model.plans);
        }


}

persian-theme · Accepted Answer · 2021-08-05 13:52:39Z

1

The checkbox usually accepts a bool value and I think your code is asp core.

But I will explain the procedure in asp mvc.

add ViewModelPhoneNumberInput class

public class ViewModelPhoneNumberInput
{
   public PhoneNumberInput phoneNumberInput   {get; set; }
   public List<Plans> plans {get; set; }
}

change action to :

[HttpGet]
[Route("AvailablePlans")]
public ActionResult GetPlan()
{
    var model = new ViewModelPhoneNumberInput();
    model.plans = new List<Plans>();

    plans.Add(new Plans { PlanId = 1, PlanName = "Internet" });
    plans.Add(new Plans { PlanId = 2, PlanName = "TV & Streaming" });
    plans.Add(new Plans { PlanId = 3, PlanName = "Mobile" });
    plans.Add(new Plans { PlanId = 4, PlanName = "Home Security" });
    plans.Add(new Plans { PlanId = 5, PlanName = "Home Phone" });
    var plansAvailable = JsonSerializer.Serialize(plans);
    _logger.Log(LogLevel.Information, "Response-Body: {@Response-Body}", plansAvailable);

    return View(model);
}

change view to :

@model yournamespace.ViewModelPhoneNumberInput
@using (Html.BeginForm())
{
    for(int i= 0;i < Model.plans.Count; i++)
    {
       <input type="checkbox" id="@Model.plans[i].PlanId" name="Model.plans[i].PlanId" />
       <label for="Model.plans[i].PlanId"> @Model.plans[i].PlanName </label> <br />
    }
    

    @Html.TextBoxFor(r => r.phoneNumberInput.PhoneNumber)
    <input id="Button" type="submit" value="Next" />
    <p>  @Html.ValidationMessageFor(r => r.phoneNumberInput.PhoneNumber) </p>
}

edited Aug 5, 2021 at 13:52

answered Aug 4, 2021 at 21:24

persian-theme

6,6483 gold badges9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

MarkCo Over a year ago

Thank you!! I see, so if my action controller is in a asp.net core web api project and the view is in the MVC project I would need to right click on my web api project and add reference for the mvc project that contains the ViewPhoneNumberInput model class in order to call it in the action controller, correct? If so I tried it but on the line model.plans it has a red line under plans saying "The type or namespace name Plans could not be found (are you missing a using directive or an assembly reference?)

persian-theme Over a year ago

My answer was somehow wrong, I corrected it. If you use asp mvc you do not need any reference

persian-theme Over a year ago

You must tell the controller the namespace where you added the model. with the key (ctrl +. ) Can add assembly reference.

MarkCo Over a year ago

Thank you! On my end in the for loop it says Operator '<' cannot be applied to operands of type 'int' and 'List<Plans>'. Were you getting the same when you did i < Model.plans?

persian-theme Over a year ago

I had forgotten . Yes, it is correct to use Model.plans.Count

|

Collectives™ on Stack Overflow

How to display list of objects in a View for an MVC project

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related