如何在 MVC 项目的视图中显示对象列表

Question

我有一个返回字符串对象列表的方法。我想在视图中将这些对象列表显示为复选框。

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

我在视图内部尝试了以下操作，但 plans 每次调用时计数始终为 0。有没有特定的方法可以将对象列表显示为复选框？

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

}

---

更新：

我目前有以下情况：

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

控制器：

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


}

Answer 1

复选框通常接受 bool 值，我认为您的代码是 asp 核心。

但是我会在asp mvc中解释这个过程。

添加 ViewModelPhoneNumberInput 类

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

将操作更改为：

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

将视图更改为：

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