ASP.Net MVC：如何将爱好与每个学生联系起来

时间：2018-02-20 10:01:16

标签： asp.net-mvc

我在创造学生和爱好之间的联系方面遇到了麻烦。我通过可编辑的webgrid显示我的数据。 webgrid有名称的文本框，国家/地区选择的下拉列表和爱好的复选框。

我希望当用户选择每个学生的爱好...可能是一个或多个并按下提交按钮然后我应该能够从学生视图模型中了解每个学生的爱好。

由于缺乏知识，我无法做到。

我的UI看起来如何

enter image description here

这样我就是每行webgrid中的生成复选框。 

    grid.Column(header: "Hobbies",
    format: @<text>
    @for (var i = 0; i < Model.Hobbies.Count; i++)
    {
        <div class="checkbox">
            @Html.HiddenFor(m => m.Hobbies[i].ID)
            @Html.HiddenFor(m => m.Hobbies[i].Name)
            @Html.CheckBoxFor(m => m.Hobbies[i].Checked)
            @Html.LabelFor(m =>m.Hobbies[i].ID, Model.Hobbies[i].Name)
        </div>
    }
    </text>)

我的完整剃刀代码

@model MVCCRUDPageList.Models.StudentListViewModel
@{
    ViewBag.Title = "Index";
}

<h2>Student View Model</h2>

@using (Html.BeginForm("Index", "WebGridMoreControls", FormMethod.Post))
{
    var grid = new WebGrid(Model.Students, canSort: false, canPage: false);
    var rowNum = 0;
    var SelectedHobbies = 0;

    <div id="gridContent" style=" padding:20px; ">
        @grid.GetHtml(
        tableStyle: "table",
        alternatingRowStyle: "alternate",
        selectedRowStyle: "selected",
        headerStyle: "header",
        columns: grid.Columns
        (
            grid.Column(null, header: "Row No", format: item => rowNum = rowNum + 1),
            grid.Column("ID", format: (item) => @Html.TextBoxFor(m => m.Students[rowNum - 1].ID, new { @class = "edit-mode" })),
            grid.Column("Name", format: (item) => @Html.TextBoxFor(m => m.Students[rowNum - 1].Name, new { @class = "edit-mode" })),

             grid.Column("Country", format: (item) =>
                  @Html.DropDownListFor(x => x.Students[rowNum - 1].CountryID,
                  new SelectList(Model.Country, "ID", "Name", item.CountryID),
                 "-- Select Countries--", new { id = "cboCountry", @class = "edit-mode" })),

            grid.Column(header: "Hobbies",
            format: @<text>
            @for (var i = 0; i < Model.Hobbies.Count; i++)
            {
                <div class="checkbox">
                    @Html.HiddenFor(m => m.Hobbies[i].ID)
                    @Html.HiddenFor(m => m.Hobbies[i].Name)
                    @Html.CheckBoxFor(m => m.Hobbies[i].Checked)
                    @Html.LabelFor(m =>m.Hobbies[i].ID, Model.Hobbies[i].Name)
                </div>
            }
            </text>)
        ))

        <input type="submit" value="Submit" />
    </div>

}

我的控制器和操作代码

public class WebGridMoreControlsController : Controller
{
    // GET: WebGridMoreControls
    public ActionResult Index()
    {
        StudentListViewModel osvm = new StudentListViewModel();
        return View(osvm);
    }

    [HttpPost]
    public ActionResult Index(StudentListViewModel oStudentListViewModel)
    {
        return View(oStudentListViewModel);
    }
}

我的ViewModel代码

public class StudentListViewModel
{
    public IList<Student> Students { get; set; }
    public List<Country> Country { get; set; }

    public IList<Hobby> Hobbies { get; set; }

    public StudentListViewModel()
    {
        Students = new List<Student>
        {
            new Student{ID=1,Name="Keith",CountryID=0},
            new Student{ID=2,Name="Paul",CountryID=2},
            new Student{ID=3,Name="Sam",CountryID=3}
        };

        Country = new List<Country>
        {
            new Country{ID=1,Name="India"},
            new Country{ID=2,Name="UK"},
            new Country{ID=3,Name="USA"}
        };

        Hobbies = new List<Hobby>
        {
            new Hobby{ID=1,Name="Football",Checked=false},
            new Hobby{ID=2,Name="Hocky",Checked=false},
            new Hobby{ID=3,Name="Cricket",Checked=false}
        };

    }
}

我的模型代码

public class Student
{
    public int ID { get; set; }
    [Required(ErrorMessage = "First Name Required")]
    public string Name { get; set; }
    //[Required(ErrorMessage = "Last Name Required")]
    //public string LastName { get; set; }

    public int CountryID { get; set; }

}

public class Country
{
    public int ID { get; set; }
    public string Name { get; set; }
}

public class Hobby
{
    public int ID { get; set; }
    public string Name { get; set; }
    public bool Checked { get; set; }
}

请帮助我，我想要实现的目标。感谢

编辑1 

    @for (var i = 0; i < Model.Hobbies.Count; i++)
    {
        <div class="checkbox">
            @Html.HiddenFor(m => m.Hobbies[i].ID)
            @Html.HiddenFor(m => m.Hobbies[i].Name)
            @Html.HiddenFor(m => m.Students[rowNum - 1].Hobbies[i].ID)
            @Html.CheckBoxFor(m => m.Students[rowNum - 1].Hobbies[i].Checked)
            @*@Html.CheckBoxFor(m => m.Hobbies[i].Checked)*@
            @Html.LabelFor(m =>m.Hobbies[i].ID, Model.Hobbies[i].Name)
        </div>
    }

enter image description here

1 个答案:

答案 0 :(得分：0)

我可以重构我的视图模型，模型和剃刀视图代码。在这里，我想提供一些正常工作的更新代码。

这样我就会在forloop中生成复选框。 

grid.Column(header: "Hobbies",
format: @<text>
@for (var i = 0; i < Model.Students.FirstOrDefault().Hobbies.Count; i++)
{
    <div class="checkbox">
        @Html.HiddenFor(m => m.Students[rowNum - 1].Hobbies[i].ID)
        @Html.HiddenFor(m => m.Students[rowNum - 1].Hobbies[i].Name)
        @Html.CheckBoxFor(m => m.Students[rowNum - 1].Hobbies[i].Checked)
        @Html.LabelFor(m => m.Students[rowNum - 1].Hobbies[i].Name, Model.Students.FirstOrDefault().Hobbies[i].Name)
    </div>
}
</text>)

查看模型和模型类代码 

public class StudentListViewModel
{
    public IList<Student> Students { get; set; }
    public List<Country> Country { get; set; }



    public StudentListViewModel()
    {
        Students = new List<Student>
        {
            new Student
            {
                ID=1,Name="Keith",CountryID=0,
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=false},
                    new Hobby{ID=2,Name="Hocky",Checked=false},
                    new Hobby{ID=3,Name="Cricket",Checked=false}
                }

            },

            new Student
            {
                ID=2,Name="Paul",CountryID=2,
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=false},
                    new Hobby{ID=2,Name="Hocky",Checked=false},
                    new Hobby{ID=3,Name="Cricket",Checked=false}
                }
            },

            new Student
            {
                ID=3,Name="Sam",CountryID=3,
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=false},
                    new Hobby{ID=2,Name="Hocky",Checked=false},
                    new Hobby{ID=3,Name="Cricket",Checked=false}
                }
            }
        };

        Country = new List<Country>
        {
            new Country{ID=1,Name="India"},
            new Country{ID=2,Name="UK"},
            new Country{ID=3,Name="USA"}
        };

    }
}

型号代码 

public class Student
{
    public int ID { get; set; }
    [Required(ErrorMessage = "First Name Required")]
    public string Name { get; set; }
    //[Required(ErrorMessage = "Last Name Required")]
    //public string LastName { get; set; }

    public int CountryID { get; set; }
    public IList<Hobby> Hobbies { get; set; }

}


public class Country
{
    public int ID { get; set; }
    public string Name { get; set; }
}

public class Hobby
{
    public int ID { get; set; }
    public string Name { get; set; }
    public bool Checked { get; set; }
}

再次以不同的方式完成

同样的UI我也用html表开发。在这里，我正在分享剃刀代码，其余的模型和模型视图代码与之前相同。

@model MVCCRUDPageList.Models.StudentListViewModel
@{
    ViewBag.Title = "Index";
}

<h2>CREATE TABULAR UI WITH HTML TABLE</h2>

@using (Html.BeginForm("Index", "HtmlTable", FormMethod.Post))
{
    <div class="form-group">
        <div class="col-md-12 table-responsive">
            <table class="table table-bordered table-hover">
                <tr>
                    <th>
                        Row No
                    </th>
                    <th>
                        ID
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Country
                    </th>
                    <th>
                        Hobbies
                    </th>
                    <th>
                        Sex
                    </th>
                </tr>
                }
                @for (int x=0; x<=Model.Students.Count-1;x++)
                {

                    <tr>
                        <td>
                            <label>@(x+1)</label>
                        </td>
                        <td>
                            @Html.TextBoxFor(m => m.Students[x].ID)
                        </td>
                        <td>
                            @Html.TextBoxFor(m => m.Students[x].Name)
                        </td>
                        <td>
                            @Html.DropDownListFor(m => m.Students[x].CountryID,
                              new SelectList(Model.Country, "ID", "Name",  Model.Students[x].CountryID),
                             "-- Select Countries--", new { id = "cboCountry", @class = "edit-mode" })
                        </td>
                        <td>
                            @for (var i = 0; i < Model.Students.FirstOrDefault().Hobbies.Count; i++)
                            {
                                <div class="checkbox">
                                    @Html.HiddenFor(m => m.Students[x].Hobbies[i].ID)
                                    @Html.HiddenFor(m => m.Students[x].Hobbies[i].Name)
                                    @Html.CheckBoxFor(m => m.Students[x].Hobbies[i].Checked)
                                    @Html.LabelFor(m => m.Students[x].Hobbies[i].Name, Model.Students[x].Hobbies[i].Name)
                                </div>
                            }

                        </td>
                        <td>
                            @for (var i = 0; i < Model.Sex.Count; i++)
                            {
                                <div class="checkbox">
                                    @Html.HiddenFor(m => Model.Sex[i].ID)
                                    @Html.HiddenFor(m => Model.Sex[i].SexName)
                                    @Html.RadioButtonFor(m => m.Students[x].SexID, Model.Sex[i].ID)
                                    @Html.LabelFor(m => m.Students[x].SexID, Model.Sex[i].SexName)
                                </div>
                            }
                        </td>
                    </tr>
                }
            </table>
        </div>

        <input type="submit" value="Submit" />
    </div>
}
  [1]: https://stackoverflow.com/users/3559349/stephen-muecke
相关问题
最新问题