Отображение всех данных в представлении MVC
Это мой первый проект 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
Это мой метод Index() в GeneRuleController.cs, где я заполняю KeyValuePair s из хранилища.
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> <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> <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>
Как я уже сказал, я чувствую, что поступаю неправильно, поэтому любая помощь / совет будет принята с благодарностью.
1 ответ
Это выглядит прилично для меня, мой подход был бы немного другим; Я бы создал частичное представление для каждого подсписка в модели таким образом, чтобы каждое частичное представление занимало простой строго типизированный список.
Тем не менее, ваш путь также может работать. Имейте в виду (многие новички MVC совершают эту ошибку), ваша ViewModel не обязательно должна соответствовать модели, с которой вы связываетесь при отправке изменений.
Если вы хотите быть еще более привлекательным, вы можете использовать AJAX и избежать сложной привязки позже (но вам придется настроить AJAX, что также займет некоторое время).
Редактировать: если вы хотите самый простой подход, поместите кнопку редактирования с правильным идентификатором рядом с каждым элементом, который вы хотите редактировать, это позволяет очень легко найти элемент, который вы редактируете.
Редактировать 2: Вот хороший пример: Как связать несколько текстовых полей со свойством строки массива ViewModel?