CODEWITHSUNDEEP
c#.netasp.net-mvclist
MarkCo
MarkCo

Reputation: 1212

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

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


}

Upvotes: 0

Views: 857

Answers (1)

persian-theme
persian-theme

Reputation: 6638

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

Upvotes: 1

Related Questions