0

私のページには、デフォルトで1つのテキストボックスとその横に1つの追加ボタンがあります。ユーザーが[追加]ボタンをクリックしたときに、別のテキストボックスを追加する必要があります。また、新しく追加されたテキストボックスの横に[追加]と[削除]の2つのボタンがあるはずです。同じプロセスが続きます。つまり、ユーザーは[追加]ボタンを使用してテキストボックスを追加し、[削除]ボタンを使用してテキストボックスを削除できます。

私はmvc3を初めて使用するので、進め方がわかりません。実行時にコントロールを追加できるように、asp.netのプレースホルダーのような方法はありますか？

どんな提案やアイデアも私に役立ちます

4

2 に答える 2

0

MVCは、Webフォームと比較して非常に「ハンズオフ」のフレームワークであるため、新しいテキストボックスを自由に追加できます。「コントロール」はMVCには存在しないことに注意してください。

これが私がそれをする方法です：

モデル：

class MyModel {
    public Boolean AddNewTextBox { get; set; }
    public List<String> MultipleTextBoxes { get; set; } // this stores the values of the textboxes.
}

ビュー（私はWebフォームビューエンジンが好きです。私はRazorのファンではありません）：

<% for(int i=0;i<Model.MultipleTextBoxes.Count;i++) { %>
<%= Html.TextBoxFor( m => m.MultipleTextBoxes[i] ) /* this might look like magic to you... */ %>
<% } %>
<button type="submit" name="AddNewTextbox" value="true">Add New Textbox</button>
<button type="submit">Submit form</button>

コントローラ：

[HttpPost]
public ActionResult MyAction(MyModel model) {
    if( model.AddNewTextBox ) model.MultipleTextBoxes.Add("Yet another");

    else if( ModelState.IsValid ) {
        // your regular processing
    }
}

Javascriptを使用してテキストボックスを追加することもでき、完全に正常に機能します。重要なのはHTML入力要素だけです。不可解なビューステートはありません。MVCはステートレスです。

<button type="submit">私が使用した例はInternetExplorer6-8では確実に機能しないことに注意してください（吸う、私は知っています）が、<input type="submit">悪影響なしにそれらを置き換えることができます。

于 2012-09-12T01:52:39.770 に答える
0

これにはいくつかのJavascript/JQueryが必要です...以下はスケッチのみですが、一般的なアプローチとして役立つことを願っています。

  • 削除ボタン_

独自のコンテナを削除対象にすることができるボタンをレンダリングしたいとします。これを行うには、次のようなマークアップを使用します。

<div class="item-container">
    <input type="button" onclick="removeItem(this)" />
</div>

そして、Javascript removeItem：

<script>
    function removeItem(element) {
        // get the parent element with class "item-container" and remove it from the DOM
        $(element).find(".item-container").remove();
    }
</script>
  • 追加ボタン_

Ajaxで部分ビューを使用するか、ストレートJavascriptを使用することができます。どちらが最適かは、新しいアイテムを作成するためにサーバーへのラウンドトリップが必要かどうかによって異なります。新しいIDなどを生成するためにサーバーに移動する必要があるとします。

まず、部分ビューと対応するコントローラーアクションを作成します。これには、上記の削除ボタンと、テキストボックスおよび追加ボタンが含まれている必要があります。

次に、メインページにAjaxフォームを作成します。このフォームは、[追加]をクリックすると呼び出されます。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

@using (Ajax.BeginForm("New", new AjaxOptions() { UpdateTargetId="ajaxTarget", HttpMethod = "GET" })) {
    <input type='submit' value='Add New' />
}

<div id="ajaxTarget"></div>

このコードは、（現在のコントローラーのアクションNewから）部分ビューをフェッチし、結果をajaxTarget要素に追加します。

注Ajaxフォームには控えめなAjaxが必要です。これは、NugetからインストールできますInstall-Package JQuery.Ajax.Unobtrusive。

于 2012-09-12T02:26:21.343 に答える