c# - Set List property in View using MVC3

Question

Pretty new to MVC and the like. I have a class the looks like this:

public class SomeExampleModel
{
    public int Id { get; private set; }
    public string Name { get; private set;}
    public string Street { get; private set; }
    public IList<Contact> Contacts { get; private set; }
    ...
}

Where Contact looks like:

public class Contact
{
    public int Id { get; private set; }
    public int SomeExampleModelId { get; private set; }
    public ContactType Type { get; private set; }
    public string ContactValue { get; private set; }
...
}

Now the problem is, I have a Post Create action and Create.cshtml view to add new SomeExampleModel to my database. It works great for all the basic properties, but there isn't anything for the Contacts property (which is a separate table in the database).

How would I be able to add contacts (single for now, plural in the future) using forms on my view?

EDIT: I am sorry if I was not clear. The problem is not getting data to save in the database correctly. I have tested that already and it works fine if I just manually insert a SomeExampleModel record into the database with the SomeExampleContext. What I dont know is how to draft my View so that it allows users to add Contacts to the record

score 1 · Accepted Answer

を使用したアプローチの 1 つを次に示しEditorTemplateます。モデルクラスに小さな変更を加えました（これは機能しますが、これは概念を理解するためだけのものであることに注意してください。これを拡張できます）

モデル

public class SomeExampleModel
{
    public int Id { get; set; }
    public string Name { get; set;}
    public string Street { get; set; }
    public IList<Contact> Contacts { get; set; }    
}

public class Contact
{
    public int Id { get; set; }
    public int SomeExampleModelId { get; set; }
    public ContactType Type { get; set; }
    public string ContactText { get { return Type.ToString(); } }
    public string ContactValue { get; set; }
}

public enum ContactType
{
    email,
    Phone,
    mobile,
    fax
}

ContactText列挙型テキストを返すプロパティを作成したことに注意してください(表示用)。

Contact のエディターテンプレートを作成します (名前はContact.cshtml; テンプレート名はクラス名と一致する必要があります)。エディターテンプレートを配置する場所のスクリーンショットの下を見つけます。

ここに画像の説明を入力

ここにコードがありますContact.cshtml

@model Test1.Models.Contact
<table>
@Html.HiddenFor(a=>a.Type)
<tr>
 <td>@Html.Label(Model.ContactText)</td>
 <td>@Html.TextBoxFor(a => a.ContactValue)</td>
</tr>
</table>

「作成」ビューのコードは次のとおりです（ExampleCreateView.cshtml私の場合）

@model Test1.Models.SomeExampleModel

@{
    ViewBag.Title = "ExampleCreateView";
}

<h2>ExampleCreateView</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>SomeExampleModel</legend>
        @Html.HiddenFor(model=>model.Id)
        <table>
            <tr>
                <td>@Html.LabelFor(model=>model.Name)</td>
                <td>@Html.EditorFor(model=>model.Name)</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(model=>model.Street)</td>
                <td>@Html.EditorFor(model=>model.Street)</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(model=>model.Contacts)</td>
                <td>@Html.EditorFor(model=>model.Contacts)</td>
            </tr>
        </table>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

私が@Html.EditorForそのContacts物件をどのように使用したかをメモしておいてください。

Get、Post アクションは次のようになります。

    public ActionResult ExampleCreateView()
    {
        SomeExampleModel model = new SomeExampleModel();
        Contact contactEmail = new Contact();
        contactEmail.Type = ContactType.email;

        Contact contactFax = new Contact();
        contactFax.Type = ContactType.fax;

        Contact contactPhone = new Contact();
        contactPhone.Type = ContactType.Phone;

        Contact contactMobile = new Contact();
        contactMobile.Type = ContactType.mobile;

        List<Contact> contacts = new List<Contact>();

        contacts.Add(contactEmail);
        contacts.Add(contactFax);
        contacts.Add(contactPhone);
        contacts.Add(contactMobile);

        model.Contacts = contacts;

        return View(model);
    }

    [HttpPost]
    public ActionResult ExampleCreateView(SomeExampleModel model)
    {
        //Your operations
        return View(model);
    }

アプリケーションを実行します。景色はこんな感じ

ここに画像の説明を入力

POST アクションで得られるもののスクリーンショット

ここに画像の説明を入力

score 0 · Accepted Answer

私が行う方法は、2 つの別個のアクションを用意することです。1 つはの初期作成を行い、別のアクションはそのモデルにSomeExampleModelを追加します。Contact

そうすれば、作成SomeExampleModelビューには名前と通りだけが表示され、保存すると読み取り専用バージョンのSomeExampleModel. の読み取り専用バージョンでSomeExampleModelは、関連するすべての連絡先が [名前] と [番地] の下の表に一覧表示され、編集と削除のリンクがあり、表の下に [新しい連絡先を追加] リンクがあります。

例えば

<table>
@foreach (var contact in Model.Contacts)
{
    <tr>
        <td>@contact.ContactType</td>
        <td>@contact.ContactValue</td>
        <td>@Html.Action("Edit", "Edit", "Contact",  new { id = contact.Id }</td>
        <td>@Html.Action("Delete", "Delete", "Contact", { id = contact.Id }</td>
    </tr>
}
</table>
@Html.Action("Add new contact", "Add", "Contact" new { id = Model.Id }

最初は連絡先がリストされていませんが、後で複数の連絡先が表示されます。

c# - Set List property in View using MVC3

2 に答える 2

Related

Reference