在MVC 3应用程序的模型中创建对象属性的视图？ [英] Create Views for object properties in model in MVC 3 application?
问题描述
但这些外国人关键表是模型中的复杂对象，创建创建视图时，只能将简单的属性作为编辑器字段。如何设计视图或视图，以便可以填充复杂的对象？我在我心目中的图片中，简单属性是简单的字段，然后是某种控件，您可以在其中单击添加工作经验，并根据需要增加许多内容。但是我该怎么做，仍然利用模型绑定？其实我根本不知道该怎么做。 （BTW，程序和语言代表一般的软件体验和自然语言能力，而不是编程语言，如果你想知道那里的关系）。
任何想法非常感谢！
以下是默认添加View命令创建的创建视图：
@ {
ViewBag.Title =创建;
}
< h2>创建< / h2>
< script src =@ Url.Content（〜/ Scripts / jquery.validate.min.js）type =text / javascript>< / script>
< script src =@ Url.Content（〜/ Scripts / jquery.validate.unobtrusive.min.js）type =text / javascript>< / script>
@using（Html.BeginForm（））{
@ Html.ValidationSummary（true）
< fieldset>
< legend>顾问< / legend>
< div class =editor-label>
@ Html.LabelFor（model => model.FirstName）
< / div>
< div class =editor-field>
@ Html.EditorFor（model => model.FirstName）
@ Html.ValidationMessageFor（model => model.FirstName）
< / div>
< div class =editor-label>
@ Html.LabelFor（model => model.LastName）
< / div>
< div class =editor-field>
@ Html.EditorFor（model => model.LastName）
@ Html.ValidationMessageFor（model => model.LastName）
< / div>
< div class =editor-label>
@ Html.LabelFor（model => model.UserName）
< / div>
< div class =editor-field>
@ Html.EditorFor（model => model.UserName）
@ Html.ValidationMessageFor（model => model.UserName）
< / div>
< div class =editor-label>
@ Html.LabelFor（model => model.Description）
< / div>
< div class =editor-field>
@ Html.EditorFor（model => model.Description）
@ Html.ValidationMessageFor（model => model.Description）
< / div>
< p>
< input type =submitvalue =Create/>
< / p>
< / fieldset>
}
< div>
@ Html.ActionLink（返回列表，索引）
< / div>
这里是EF数据库图：
更新：
根据建议，我尝试过Steven Sanderson的博客解决方案，但是我无法使其正常工作。我在主视图中添加了这个：
< div id =editorRows>
@foreach（Model.Programs中的var项）
{
Html.RenderPartial（ProgramEditorRow，item）;
}
< / div>
< input type =buttonvalue =添加程序id =addItem/>
我还添加了javascript：
< script type =text / javascript>
var url ='@ Url.Action（BlankEditorRow，Consultant）';
$（document）.ready（function（）{
$（＃addItem）。click（function（）{
$ .ajax（{
url：url，
cache：false，
success：function（html）{
alert（html）;
$（＃editorRows）。append（html）;}
}）;
return false;
}）;
}）;
< / script>
部分视图：
@model Consultants.Models.Program
@using Consultants.Helpers
< div class =editorRow>
@ * @ using（Html.BeginCollectionItem（programs））
{* @
@ Html.TextBoxFor（model => model.Name）
@ *} * @
< / div>
控制器中的操作方法：
public ActionResult Create（）
{
顾问顾问=新顾问（）;
return查看（顾问）;
}
public ActionResult BlankEditorRow（）
{
return PartialView（ProgramEditorRow，new Program（））;
}
请注意，我在部分视图中注释了Html.BeginCollectionItem部分，因为我不能让它工作。它只给了我史蒂芬·桑德森谈论的隐藏的领域，而不是实际的文本框。所以我试着评论那部分，只是有一个文本框。那么，这让我得到了这个文本框，但是我不能在post方法中得到这个信息。我使用Consultant对象作为返回参数，但是程序属性不包含程序。也许这与我不能让BeginCollectionItem帮助器工作的事实有关，但无论如何我不明白如何做到这一点，或者如何到达该视图中添加的程序。使用简单的对象，我将在post方法中添加新对象，如_repository.AddToConsultants（顾问），当我保存到EF时，它将获得其id。但是，如何使用程序对象做同样的事情，并通过EF将其保存到数据库？
Phil Haack已经写一个伟大的博客文章，解释如何建模绑定到列表。这是MVC2特有的，但我不知道如果版本3在这方面有所改善。
在允许用户添加任意数量的项目的情况下，您可能需要使用JavaScript创建新的输入字段。史蒂文·桑德森在这里展示了如何实现：
这些资源应该让你一路走来。
I have an Asp.Net MVC 3 application with a database "Consultants", accessed by EF. Now, the Consultant table in the db has a one-to-many relationship to several other tables for CV type information (work experience, etc). So a user should be able to fill in their name etc once, but should be able to add a number of "work experiences", and so on.
But these foreign key tables are complex objects in the model, and when creating the Create View I only get the simple properties as editor fields. How do I go about designing the View or Views so that the complex objects can be filled in as well? I picture a View in my mind where the simple properties are simple fields, and then some sort of control where you can click "add work experience", and as many as needed would be added. But how would I do that and still utilize the model binding? In fact, I don't know how to go about it at all. (BTW, Program and Language stand for things like software experience in general, and natural language competence, not programming languages, in case you're wondering about the relationships there).
Any ideas greatly appreciated!
Here's the Create View created by the add View command by default:
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Consultant</legend>
<div class="editor-label">
@Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Description)
@Html.ValidationMessageFor(model => model.Description)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
And here's the EF database diagram:
Update:
According to suggestion, I tried Steven Sanderson's blog solution, but I can't get it to work properly. I added this in the main view:
<div id="editorRows">
@foreach (var item in Model.Programs)
{
Html.RenderPartial("ProgramEditorRow", item);
}
</div>
<input type="button" value="Add program" id="addItem" />
I also added the javascript:
<script type="text/javascript">
var url = '@Url.Action("BlankEditorRow", "Consultant")';
$(document).ready(function () {
$("#addItem").click(function () {
$.ajax({
url: url,
cache: false,
success: function (html) {
alert(html);
$("#editorRows").append(html); }
});
return false;
});
});
</script>
A partial view:
@model Consultants.Models.Program
@using Consultants.Helpers
<div class="editorRow">
@*@using (Html.BeginCollectionItem("programs"))
{*@
@Html.TextBoxFor(model => model.Name)
@*}*@
</div>
And action methods in the controller:
public ActionResult Create()
{
Consultant consultant = new Consultant();
return View(consultant);
}
public ActionResult BlankEditorRow()
{
return PartialView("ProgramEditorRow", new Program());
}
Note that I commented out the Html.BeginCollectionItem part in the partial view, because I can't get that to work. It only gives me the hidden field Steven Sanderson talks about, but not the actual textbox. So I tried commenting that part out and just had a textbox. Well, that gets me the textbox, but I can't get to that info in the post method. I use the Consultant object as return parameter, but the Programs property contains no Program. Perhaps this has to do with the fact that I cannot get the BeginCollectionItem helper to work, but in any case I don't understand how to do that, or how to get to the Program supposedly added in the view. With a simple object I would add the new object in the post method by something like _repository.AddToConsultants(consultant), and when I save to EF it gets its id. But how do I do the same thing with the program object and save it to the database via EF?
Phil Haack has written a great blog post which explains how to model bind to a list. It's specific to MVC2, but I'm not sure if version 3 has improved on this.
In a scenario where the user is allowed to add an arbitrary number of items, you'll probably want to create new input fields using JavaScript. Steven Sanderson shows here how to achieve that:
Editing a variable length list, ASP.NET MVC 2-style.
Those resources should get you all the way there.
这篇关于在MVC 3应用程序的模型中创建对象属性的视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
