0

クライアントが望む特定の方法で、ユーザーがリスト内のオブジェクトを追加および削除できるビューを作成しています。ユーザーは、送信する前にページで複数のフォームを追加または削除できる必要があります。ページが投稿されると、リストに既に含まれているものを表示し、各項目を削除するオプションがあり、ユーザーが再度送信する前にオブジェクトを追加/削除できるようにする必要があります。

JQuery と部分ビューを使用して、ユーザーが送信前に新しいフォームを追加または削除できるようにしました。私が理解できないのは、以前の送信からリストに既にあるオブジェクトを削除するボタンを提供する方法です。

誰でもこれで私を助けることができますか? それは大歓迎です。

これが私がこれまでに理解したものです。私からしてみれば：

@using (Html.BeginForm())
{
    <div id="recipients">
        @foreach (var p in Model)
        {
            @Html.Partial("_Recipient", p)
        }

        <div id="recipients0"></div>
    </div>
    <button id="add" type="button">Add</button>
    <button id="remove" type="button">Remove</button>
    <input type="submit" value="Save" />
}

<script type="text/javascript">
    $('#add').click(function () {
        var url = '@Url.Action("Recipient")';
        var div = $('#recipients');
        var divlast = $('div[id^="recipients"]:last');

        var num = parseInt(divlast.prop("id").match(/\d+/g), 10) + 1;


        var newdiv = $(document.createElement('div')).attr('id', 'recipients' + num)//rest of code

        $.get(url, function (response) {
            div.append(newdiv);
            newdiv.append(response);
        });
    })
    $('#remove').click(function () {
        var div = $('#recipients');
        var divlast = $('div[id^="recipients"]:last');
        var num = parseInt(divlast.prop("id").match(/\d+/g), 10);
        alert("div[id='recipients" + num + "']");
        $("div[id='recipients" + num + "']").remove();
        //div.remove('div[id^="recipients' + num + '"]');
    })

新しいオブジェクトにデータを追加するためのフォームを含む部分ビュー:

@using (Html.BeginCollectionItem("recipients"))
{
    @Html.HiddenFor(m => m.ID)
    @Html.LabelFor(m => m.Recipient)
    @Html.TextBoxFor(m => m.Recipient)
    @Html.ValidationMessageFor(m => m.Recipient)
    <br />
    @Html.LabelFor(m => m.Amount)
    @Html.TextBoxFor(m => m.Amount)
    @Html.ValidationMessageFor(m => m.Amount)


}
<td>
    @Ajax.ActionLink(
        "Remove",
        "Remove",
        "CashRecipients",

        new AjaxOptions
        {
            HttpMethod = "POST",
            OnSuccess = "onDeleteSuccess"
        }
    )
</td>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

<script>
    var onDeleteSuccess = function (result) {
        alert('Howdy');
    };
</script>

私のコントローラー：

    public PartialViewResult Recipient()
    {
        return PartialView("_Recipient", new CashRecipientViewModel());
    }

    // GET: 
    public ActionResult Create()
    {
        List<CashRecipientViewModel> model = new List<CashRecipientViewModel>();

        return View(model);
    }

    // POST: CashRecipients/Create
    [HttpPost]
    public ActionResult Create([Bind(Include = "ID,Amount,Recipient")] IEnumerable<CashRecipientViewModel> recipients)
    {

        return View(recipients);

    }

私のビューモデル:

public class CashRecipientViewModel
{
    public int? ID { get; set; }
    public decimal Amount { get; set; }
    [Required(ErrorMessage = "Please enter the name of the recipient")]
    public string Recipient { get; set; }
}
4

1 に答える 1

1

単一の「削除」ボタンは意味がなく、コレクション内の各アイテムに関連付けられた「削除」が必要です。さらに、要素idから属性を削除し、相対セレクターを使用します。<div>

パーシャルをに変更します

@using (Html.BeginCollectionItem("recipients"))
{
    <div class="item" data-id="@Model.ID"> // add an enclosing element
        @Html.HiddenFor(m => m.ID)
        @Html.LabelFor(m => m.Recipient)
        @Html.TextBoxFor(m => m.Recipient)
        @Html.ValidationMessageFor(m => m.Recipient)
        @Html.LabelFor(m => m.Amount)
        @Html.TextBoxFor(m => m.Amount)
        @Html.ValidationMessageFor(m => m.Amount)
        <button type="button" class="remove">Remove</button> // add button
    </div>
}

メインビューでは、スクリプトは

var url = '@Url.Action("Recipient")';
var recipients = $('#recipients');
$('#add').click(function () {
    $.get(url, function (response) {
        recipients.append(response);
    });
});
$('#recipients').on('click', '.remove', (function() {
    var container = $(this).closest('.item');
    var id = container.data('id');
    if (!id) {
        container.remove();
    } else {
        // see notes below
    }
}

ビューに追加されたアイテムの場合、プロパティの値は にIDなりnull、ブロック内のコードifはアイテムをビューから削除します。ただし、編集する可能性のある既存の項目 ( にID値がある場合) については、データベースから削除する方法を検討する必要があります。オプションには以下が含まれます

  1. ビューモデル（たとえば）に追加のプロパティを追加し、public bool IsDeleted { get; set; }そのパーシャルに非表示の入力を含めます。true次に、送信時にすべてを削除できるように設定できますrecipients.Where(x => x.IsDeleted);

    @Html.HiddenFor(m => m.IsDeleted, new { @class = "flag" })

} else {
    container.find('.flag').val('true');
}

  2. データベースから項目を削除するサーバー メソッドへの ajax 呼び出しを行い、成功した場合は関連するコンテナーを DOM から削除します。

    } else {
    $.post(yourDeleteUrl, { id: id }, function(response) {
        if(response) {
            container.remove()
        } else {
            // oops, something went wrong
        }
    });
}
于 2016-11-13T10:01:47.337 に答える