用于在多对多关系 mvc 中创建 object 的输入类型无线电

Question

I have 3 models: Component, Category (categories of the components) and Sistem. I want to create a Sistem using already existing components. In the create view I want to use radio input to select the Component, but it seems like the selected one doesn't go where it should.

I have two models that have a many-to-many relationship:

public class Sistem
    {
        public Sistem()
        {
            this.Components = new HashSet<Component>();
        }
        public int Id { get; set; }
        public string Name { get; set; }                         
        public virtual ICollection<Component> Components { get; set; }   
    }

public class Component
    {
        public Component()
        {
            this.Sistems = new HashSet<Sistem>();
        }
        public int Id { get; set; }
        public int Name {get; set; }
        public ICollection<Sistem> Sistems { get; set; }
    }

public ActionResult Create()
        {
            Sistem sistem = new Sistem();
            var categories = from cat in db.Categories select cat;
            ViewBag.Categories = categories;
            sistem.Components = CreateAllComponents();
            return View(sistem);
        }

        public ActionResult Create(Sistem sistem)
        {

            var categories = from cat in db.Categories select cat;
            ViewBag.Categories = categories;
            if (ModelState.IsValid)
                {
                    db.Sisteme.Add(sistem);
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
            else
                {
                    return View(sistem);
                }
        }
        [NonAction]
        public ICollection<Component> CreateAllComponents()
        {
            Component empty = new Component();
            var listOfComponents = new List<Component>();
            var categories = from cat in db.Categories
                             select cat;
            foreach (var cat in categories)
            {
                listOfComponents.Add(empty);
            }
            return listOfComponents;
        }

Now I want to choose one Component from each Category and add it to the Sistem collection of Categories. This is in the View for Create:

foreach (var cat in @ViewBag.Categories)
{
    int idx = 0;
    <div class="radio-toolbar">
        @foreach (var comp in cat.Components)
        {

                **<input type="radio" asp-for="@Model.Components.ToList()[idx]" id="@comp.Name"  name="@cat.Name" value="@comp"/>
                <label for="@comp.Name" asp-for="@Model.ComponenteSistem.ToList()[idx]"> @comp.Name</label>**
        }
    </div>
    idx = idx + 1;
}

It should link every component I choosed with the sistem that I'm currently creating but the relationship table ramains empty: enter image description here

I think the problem is this part from the label/input: asp-for="@Model.Components.ToList()[idx] but I don't know how to change it to make it work.

Answer 1

Firstly,you cannot bind a whole model to radio button( value="@comp" ).Here is a working demo for binding Component Id and Name to Sistem： Category Model：

public class Category {
        public List<Component> Components { get; set; }
    }

View(change checked radio button and the next hidden input name before form post,so that the selected Id and Name can be binded to Sistem.Components)：

<form id="myForm" method="post">
    @foreach (var cat in @ViewBag.Categories)
    {
    
    <div class="radio-toolbar">
        @foreach (var comp in cat.Components)
        {
        
            <input type="radio" id="@comp.Id" value="@comp.Id" />
            <input hidden id="compName_@comp.Id" value="@comp.Name" />
            <label for="@comp.Id"> @comp.Name</label>
        
            
        }
    </div>
    }
    <button>submit</button>
</form>
<script>
    $('#myForm').submit(function () {
        var count = 0;
        $(".radio-toolbar").each(function () {
            $(this).find("input[type='radio']:checked").attr("name", "Components[" + count + "].Id");
            $(this).find("input[type='radio']:checked").next().attr("name", "Components[" + count + "].Name");
            count++;
        })
        return true; // return false to cancel form action
    });
</script>

Controller(I use fake data to test):

[HttpGet]
        public ActionResult Create()
        {
            Sistem sistem = new Sistem { 
                Id=1,
                Name="sistem1",
                Components=new List<Component> 
                {
                    new Component{ Id=11, Name=11},
                    new Component{ Id=12, Name=12},
                    new Component{ Id=13, Name=13}
                }
            };
            var categories = new List<Category> 
            {
                new Category{  Components=new List<Component>
                {
                new Component{ Id=11, Name=11},
                    new Component{ Id=12, Name=12},
                    new Component{ Id=13, Name=13}
                } },
                new Category{  Components=new List<Component>
                {
                new Component{ Id=21, Name=21},
                    new Component{ Id=22, Name=22},
                    new Component{ Id=23, Name=23}
                } },
                new Category{  Components=new List<Component>
                {
                new Component{ Id=31, Name=31},
                    new Component{ Id=32, Name=32},
                    new Component{ Id=33, Name=33}
                } }
            };
            ViewBag.Categories = categories;
            return View(sistem);
        }
        [HttpPost]
        public ActionResult Create(Sistem sistem)
        {
            return Ok();
        }

result: