0

複合型 (AddEventViewModel) を編集しています。

AddEventViewModel には、EventContactList という EventContacts のリストがあります。

モデル内のリスト内のすべてのアイテムの EventContact を表示する EventContactList のエディター テンプレートがあります。

AddEventViewModel が初期化されると、空の EventContact がリストに追加されます。これは、単一のエディター テンプレートが [イベントの追加] ページに表示されることを意味します。

エディター テンプレートの下に、[イベントの連絡先を追加] というボタンがあります。

このボタンで AddEventViewModel を更新し、追加の EventContact を EventContactList に追加して、ページが新しい空の EventContact のページに 2 番目のエディター テンプレートを表示するようにします。

検証ルールを起動させたくないし、ユーザーのスクロール位置を失わせたくないのですが、これは可能ですか?

4

3 に答える 3

1

回答ありがとうございます。ノックアウトまたはハンド コーディング JavaScript を使用して目的の結果を達成する可能性を検討するのに多くの時間を費やしましたが、非常に些細なことで多くの作業を行うように感じました。

この問題を可能な限り最も簡単な方法で解決しました。最初に、AJAX を使用して新しいエディター テンプレートを追加するボタンをフォームに追加しました。

@Ajax.ActionLink("Add additional contact",
                    "AddContact",
                    "Event",
                    new AjaxOptions()
                        {
                            HttpMethod = "GET",
                            InsertionMode = InsertionMode.InsertBefore,
                            UpdateTargetId = "contacts"
                        })

次に、AddContact actionresult をビューに追加して、部分ビューの結果 (編集テンプレート) を返します。

public ActionResult AddContact()
{
    return PartialView("EditorTemplates/EventContactDto", new EventContactDto());
}

これによりテンプレートがページに追加されますが、フォームが送信されたときにモデルに追加されません (ID が正しくないため、リストに追加されないため)。

この問題を解決するために、Nuget からダウンロードできる Steven Sanderson の BeginCollectionItem Helper を使用しました。

パッケージをインストールしたら、MVC の規則を使用して ID を設定するために、エディタ テンプレートに以下を追加するだけで済みました。

@using (Html.BeginCollectionItem("EventContactList"))
{
... the form ...
}

ページが送信されると、新しい連絡先がモデルに含まれ、データベースに挿入する準備が整います。

この回答が他の人を助け、私がこれを調査するのに費やした時間を節約できることを願っています!

于 2013-08-28T11:50:47.543 に答える
1

また、既存のフィールドを複製し、値をクリアして、javascript を使用して名前を変更することも検討してください。サーバーに新しい連絡先を要求する必要がないため、これは高速になります。

例：

<ul id="ContactsList">
 <li class="newContact">Contact Name :
     <input type="text" name="Contacts[0].Name" value="">
         Email : 
     <input type="text" name="Contacts[0].Email" value="">
 </li>
</ul>

jQuery は、次のようなボタン クリック イベントに追加します。

var cln = $('li.newContact:first').clone();
var nextNumber = $("#ContactsList li").size();
$("input[name]", cln).each(function() {
    var nm = $(this).attr("name").replace(/\[(.+)\]/g, "[" + nextNumber + "]") ;
    $(this).prop("name", nm);
    $(this).val("");
});
cln.appendTo('#ContactsList');
于 2013-08-28T00:51:03.027 に答える
0

挿入を行うためのコントローラーと、結果をページにレンダリングするための ajax ハンドラーが必要なだけではありませんか?

これ以上のコードがなければ、これをどのように行うべきかを正確に言うのは困難です。

ノックアウトまたはバックボーンを使用して変数を「観察」し、テンプレート HTML を更新/追加することもできます。次に、新しいビューモデルを渡すだけで、(主キーなどを使用して) 返されたビューモデルをビューにレンダリングします。

于 2013-08-27T23:19:08.567 に答える