3

ユーザーがjavascriptを使用してキーワードを追加できるように、FuelUXを使用してピルボックスを作成しています。Javascriptはテキストボックスからデータを取得し、順序付けされていないリストに追加します。これらのキーワードに加えて、POCOにラップしてサーバーに投稿したいいくつかのフィールドを追加したいと思います。明らかに、これらのキーワードをPOCOと一緒に投稿するか、これらのキーワードをPOCO（この場合はDummyClass）にラップします。

誰かがこれを行う方法を教えてもらえますか？

これは、キーワードとタイトルで達成したいことを視覚的に表したものです。 ここに画像の説明を入力してください

私のコントローラーコード：

public ActionResult Create()
{
    return View();
}

[HttpPost]
public ActionResult Create(DummyClass obj)
{
   // PROCESS OBJECT & LIST OF DATA OUT OF MY <UL>-control
}

マイビューコード：

@using System.Web.Optimization

@model Test.DummyClass

@{
    ViewBag.Title = "Index";
}

@section content
{
    <div class="editor-label">
        @Html.LabelFor(model => model.Title)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)
    </div>

    <div id="MyPillbox" class="pillbox">
        <ul>
            <li data-value="foo">Item One</li>
            <li class="status-success">Item Two</li>
            <li class="status-warning">Item Three</li>
            <li class="status-important">Item Four</li>
            <li class="status-info">Item Five</li>
            <li class="status-success">Item Six</li>
            <li>Item Seven</li>
        </ul>
    </div>

    <input type="text" id="newTag" value="test"/>
    <input type="button" value="Add" id="btnAddTag"/>    

    <input type="submit"/>
}

@section scripts
{
    @Styles.Render("~/Scripts/fuelUX")

    <script>
        $(function() {

            $('#btnAddTag').click(function () {
                $('#MyPillbox ul').append('<li class="status-info">' + $('#newTag').val() + '</li>');
            });

        });
    </script>
4

2 に答える 2

4

すべてのピルに非表示のHTMLフィールドを追加できる場合は、次のようにしてください。

    $(function() {
        $('#btnAddTag').click(function () {
            $('#MyPillbox ul').append('<li class="status-info">' + $('#newTag').val() + '<input type="hidden" name="Tags" value="' + $('#newTag').val() + '" /></li>');
        });
    });

コントローラでは、アクションメソッドに次のモデルを使用できます。

public class SomeModel {
    public string Title { get; set; }
    public string[] Tags { get; set; }
}
于 2012-12-31T08:44:01.260 に答える
0

同じボタンにイベントをアタッチして、jquery ajaxを使用してコントローラーで特定のアクションを呼び出し、サーバー側でPOCOに変換してそこで操作できるオブジェクトのjson表現を渡すことができます。以下のリンクは、投稿を行うための洞察を与えるかもしれません。

また、レコードがまだ作成されていない可能性があるため、各ピルに投稿したくない場合は、上記のイベントハンドラーを使用して、送信ボタンに投稿できる非表示フィールドにjsonオブジェクトを追加（または削除）できます。 jqueryまたは特定のルートへの直接投稿。

jQueryポスト配列-ASP.NetMVC4

于 2012-12-30T19:03:05.907 に答える