在 MVC 视图中显示所有数据

Question

这是我从头开始的第一个 MVC 项目，我试图在第一次加载时在视图中显示多个重复记录数据，然后允许用户在单击编辑按钮并保存时编辑同一页面上的字段该特定记录的数据。我有一些数据显示，但我觉得我做错了。

这是我的 GeneRuleViewModel.cs

    public class GeneRuleViewModel
    {

    public virtual IEnumerable<GeneRule> GeneRules { get; set; }
    public virtual IEnumerable<GeneGroup> GeneGroups { get; set; }
    public List<KeyValuePair<int, string>> RuleDataStarDesignation { get; set; }
    public List<KeyValuePair<int, IEnumerable<SelectListItem>>> RuleDataPhenotype { get; set; }
    public List<KeyValuePair<int, bool>> RuleDataClinicallySignificant { get; set; }

    [DisplayName("Star Designation:")]
    public string StarDesignation { get; set; }
    [DisplayName("Phenotype:")]
    public string SelectedPhenotype { get; set; }
    [DisplayName("ClinicallySignificant?")]
    public bool ClinicallySignificant { get; set; }
    }

我使用了 KeyValuePair，以便在遍历视图中的项目时可以知道哪个值属于特定的 GeneRule_ID

这是我在 GeneRuleController.cs 中的 Index() 方法，我从存储库中填充 KeyValuePairs

        public ActionResult Index()
    {
        var geneRules = generuleRepository.GetGeneRules();
        var geneGroups = generuleRepository.GetGeneGroups();

        List<KeyValuePair<int, string>> ruleStarDesignation = new List<KeyValuePair<int, string>>();
        List<KeyValuePair<int, IEnumerable<SelectListItem>>> rulePhenotype = new List<KeyValuePair<int, IEnumerable<SelectListItem>>>();
        List<KeyValuePair<int, bool>> ruleClinicallySignificant = new List<KeyValuePair<int, bool>>();


        foreach (var rule in geneRules)
        {
            rulePhenotype.Add(new KeyValuePair<int, IEnumerable<SelectListItem>>((int)rule.GeneRule_ID, generuleRepository.GetRulePhenotypes(rule)));
            ruleStarDesignation.Add(new KeyValuePair<int, string>((int)rule.GeneRule_ID, generuleRepository.GetRuleStarDesignation(rule)));
            ruleClinicallySignificant.Add(new KeyValuePair<int, bool>((int)rule.GeneRule_ID, generuleRepository.GetRuleClinicalSignificance(rule)));       
        }

        var generuleViewModel = new GeneRuleViewModel();
        generuleViewModel.GeneRules = geneRules;
        generuleViewModel.GeneGroups = geneGroups;
        generuleViewModel.RuleDataStarDesignation = ruleStarDesignation;
        generuleViewModel.RuleDataPhenotype = rulePhenotype;
        generuleViewModel.RuleDataClinicallySignificant = ruleClinicallySignificant;


        return View(generuleViewModel);
    }

这是我的 Index.cshtml，我在其中循环遍历每个 GeneGroups 和 GeneRules 以显示数据

    <div id="generulesgrid">
    <span class="glyphicon glyphicon-filter"></span>&nbsp;<span class="h4">Rule Filter</span>
    <div class="btn-group rulefilter">
        <button type="button" class="filter btn btn-default" data-filter="all">Show All</button>         
        @foreach (var geneGroup in Model.GeneGroups) {    
            <button type="button" class="filter btn btn-default" data-filter="@Html.DisplayFor(x => geneGroup.GeneGroup_NM)">@Html.DisplayFor(x => geneGroup.GeneGroup_NM)</button>
        }
    </div>


@foreach (var geneGroup in Model.GeneGroups) {    
    <div class="mix @Html.DisplayFor(x => geneGroup.GeneGroup_NM)">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                   <span class="glyphicon glyphicon-list"></span>&nbsp;<span class="h4">Gene Rules for <small>@Html.DisplayFor(x => geneGroup.GeneGroup_NM)</small></span>                
                </div>
            </div>
        </div>

        <div class="row">
            @foreach(var geneRule in Model.GeneRules.Where(x => x.GeneGroup_ID == geneGroup.GeneGroup_ID))
            {
                <div class="col-md-4">
                    @using (Html.BeginForm(null, "generule", FormMethod.Post, new { @class = "form-horizontal", @role = "form" }))
                    {
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                @Html.DisplayFor(x=> geneRule.GeneRule_NM) <span class="glyphicon glyphicon-edit pull-right editRule" data-toggle="tooltip" title="Edit Rule"></span>
                            </div>
                            <div class="panel-body">
                                <div class="form-group">
                                    @Html.LabelFor(x => x.StarDesignation, new { @class = "col-md-4 control-label" })
                                    <div class="col-md-8">
                                        @Html.TextBoxFor(x => x.StarDesignation, new {@Value = Model.RuleDataStarDesignation.Where(x => x.Key == geneRule.GeneRule_ID).FirstOrDefault().Value, @class = "form-control", @placeholder = "Enter Star Designation"})
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(x => x.SelectedPhenotype, new { @class = "col-md-4 control-label" })
                                    <div class="col-md-8">
                                        @Html.DropDownListFor(x=>x.SelectedPhenotype,Model.RuleDataPhenotype.Where(x => x.Key == geneRule.GeneRule_ID).FirstOrDefault().Value,"select phenotype",new {@id = "generule_" + geneRule.GeneRule_ID + "_phenotype", @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">                                    
                                    @Html.Label("Rule Definition","Rule Definition:",new { @class = "col-md-4 control-label" })
                                    <div class="col-md-8">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="checkbox">
                                        <label>                                        
                                            @Html.CheckBoxFor(x=> x.ClinicallySignificant, Model.RuleDataClinicallySignificant.Where(y => y.Key == geneRule.GeneRule_ID).FirstOrDefault().Value)

                                        </label>
                                    </div>
                                </div>

                            </div>
                        </div>
                   }
                </div>    
            } 
         </div>
     </div> 


}
</div>

正如我所说，我觉得我做错了，所以任何帮助/建议将不胜感激。

Answer 1

对我来说看起来不错，我的方法会有点不同；我会为模型中的每个子列表创建一个局部视图，这样每个局部视图都采用一个简单的强类型列表。

不过，您的方式也可以。请记住（很多 MVC 新手都会犯这个错误），当您提交更改时，您的 ViewModel 不必匹配您绑定到的模型。

如果你想更流畅，你可以使用 AJAX 并避免以后复杂的绑定（但你必须设置 AJAX，这也需要一些时间）。

编辑：如果您想要最简单的方法，请在您要编辑的每个项目旁边放置一个带有适当 ID 的编辑按钮，这样可以非常容易地找到您正在编辑的项目。

编辑 2： 这里有一些很好的例子：How to bind multiple textbox with ViewModel array string property?