0

ページをリロードせずに、MVC ページ モデル内に含まれるリストに項目を追加する方法を考えています。

下の図に示すようなフォームがあります。このページは、「連絡先」のリストを持つ「申請者」モデルから実行されます。

「アプリケーション」を実行する場合、ユーザーは複数の「連絡先」を追加できる必要があります。「プラス」記号をクリックすると、新しい「連絡先」項目がリストに追加されます。

http://i.stack.imgur.com/DUvb7.png

複数の方法 (Actionlinks など) を試しましたが、すべての方法でページがリダイレクトされるようです。

誰かがこれに光を当てるのを助けることができれば、それは大歓迎です

これは私のモデルの縮小例です

public class ApplicantMessage : PersonMessage
{
    //... Other properties here
    public virtual ICollection<ContactMessage> Contacts { get; set; }
}

これは、「連絡先」の詳細を定義する div 領域です (注: ここで @Html.TextBoxFor(..) を使用するかどうか、または使用する方法がわかりませんでした)

<!-- Other Contacts -->
<div class="row">
    <div class="span2">
        <label class="label">Other Contacts</label>
    </div>
    <div class="span4">
        <input type="text" class="new-contact-details"/>
    </div>
</div>
<div class="row">
    <div class="span2"></div>
    <div class="span4">
        @Html.DropDownList("contactMethodDropdown", default(ContactMethod).ValueList(), new{@class="dropdown-slim"})
        <input type="text" class="new-contact-contact-details"/>
        <a rel="tooltip" href="#" data-original-title="Add a contact" class="icon-plus"></a>
    </div>
</div>

これは私のコントローラーです

public class ApplicationController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult NewApplication()
    {
        var message = new ApplicantMessage();
        return View(message);
    }

    [HttpPost]
    public ActionResult NewApplication(ApplicantMessage message)
    {
        if (ModelState.IsValid)
        {
            //add to DB
        }
        return View(message);
    }

}

また、連絡先をページの右側に表示する必要があることにも注意してください。ある種の部分ビューを使用してそれが行われると思いますか?

4

1 に答える 1

1

ApplicantMessageモデルをコントローラーに投稿するときは、連絡先にインデックスを使用する必要があります。

基本的に、HTML は次のようになります。

<div class="row">
    <div class="span2"></div>
    <div class="span4">
        @Html.DropDownList("Contacts[0].ContactMethod", default(ContactMethod).ValueList(), new{@class="dropdown-slim"})
        <input type="text" name="Contacts[0].Name" class="new-contact-contact-details"/>
    </div>
    <div class="span4">
        @Html.DropDownList("Contacts[1].ContactMethod", default(ContactMethod).ValueList(), new{@class="dropdown-slim"})
        <input type="text" name="Contacts[1].Name" class="new-contact-contact-details"/>
        <a rel="tooltip" href="#" data-original-title="Add a contact" class="icon-plus"></a>
    </div>
</div>

インデクサーに注目してください。モデルバインダーは、これらに基づいて配列を自動的に作成します。JavaScript を使用して連絡先を追加する場合は、それに応じてインデックスが増加することも確認する必要があります。

詳細については、Phil Haack によるこの (古いが、非常に関連性の高い) 投稿をお読みください。

于 2013-11-06T09:08:36.957 に答える