Question

我有一个绑定了对象的Razor页面。该对象从我的控制器发送到视图：

@model PageObjetsViewModel

在此模型中，我有一个用于在视图中显示的子对象的列表。

HTML结果：

<div id="dropcontainer" class="drop-zone ui-droppable" style="height: 670px; width: 378px;">
    <div class="ui-draggable ui-draggable-handle ui-draggable-dragging drag2 ui-resizable" style="height: 50px; position: absolute; left: 149.5px; top: 63px;" id="TempObject0">
        <img id="img_resizable" data-toggle="modal" data-target="#myModal" data-forindex="0" data-id="1" data-nom="Text Box" data-hauteur="50" data-largeur="100" data-type="TextBox" data-nomstd="" data-useinrapport="False" src="/images/Element_TextView_simple.png" class="img-responsive">
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"/>
        <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"/>
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"/>
    </div>
    <input data-val="true" name="Objets[0].ID" id="Objets_0__ID" value="0" type="hidden">
    <input data-val="true" name="Objets[0].Nom" id="Objets_0__Nom" value="Text Box" type="hidden">

    <div class="ui-draggable ui-draggable-handle ui-draggable-dragging drag2 ui-resizable" style="height: 50px; position: absolute; left: 129.5px; top: 113px;" id="TempObject1">
        <img id="img_resizable" data-toggle="modal" data-target="#myModal" data-forindex="1" data-id="1" data-nom="Text Box" data-hauteur="50" data-largeur="100" data-type="TextBox" data-nomstd="" data-useinrapport="False" src="/images/Element_TextView_simple.png" class="img-responsive">
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"/>
        <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"/>
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"/>
    </div>
    <input data-val="true" name="Objets[1].ID" id="Objets_1__ID" value="0" type="hidden">
    <input data-val="true" name="Objets[1].Nom" id="Objets_1__Nom" value="Text Box" type="hidden">

    <div class="ui-draggable ui-draggable-handle ui-draggable-dragging drag2 ui-resizable" style="height: 50px; position: absolute; left: 63.5px; top: 217px;" id="TempObject2">
        <img id="img_resizable" data-toggle="modal" data-target="#myModal" data-forindex="2" data-id="1" data-nom="Text Box" data-hauteur="50" data-largeur="100" data-type="TextBox" data-nomstd="" data-useinrapport="False" src="/images/Element_TextView_simple.png" class="img-responsive">
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"/>
        <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"/>
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"/>
    </div>
        <input data-val="true" name="Objets[2].ID" id="Objets_2__ID" value="0" type="hidden">
        <input data-val="true" name="Objets[2].Nom" id="Objets_2__Nom" value="Text Box" type="hidden">
</div>

在此视图中，我可以使用JQuery添加新项目，并且它可以在视图中显示。我使用此附加示例，例如：

$(this).append('<input type="hidden" data-val="true" name="Objets[' + n + '].ID"     id="Objets_' + n + '__ID" value="0"/>')

我可以使用按钮删除对象。删除将起作用，并且该项目将从视图中删除。我的功能：

var controlID = $('#btnDeleteControl').attr('data-forindex')
var controlName = 'TempObject' + controlID;
$('#' + controlName).remove();
$("input[id*=Objets_" + controlID + "]").remove();

我有一个带有ajax的保存功能，该功能将$（'form'）发送给我的控制器：

var formData = $("form").serialize();
$.ajax('@Url.Action("SavePage", "Pages")', {
            type: "POST",
            data: formData,
            success: function (response) {
                [...]
            },
            error: function () {
                [...]
            }
        })

保存成功，模型被发送到我的控制器。

这是我的问题：当我添加一些项目并保存它们时，我会将列表中的不同对象发送给控制器。但是，当我删除列表中的一个项目并将其保存时，我的对象已被填充，但列表中仅包含已删除项目的前一个项目，而不包含下一个项目。

例如：我按以下顺序创建3个对象：TempObject1，TempObject2和TempObject3。

如果我删除TempObject1并将其保存：我返回的列表将为空
如果删除TempObject2，则我的列表将仅包含TempObject1。
如果我删除TempObject3：我的列表将包含TempObject1和TempObject2。

我不知道在序列化表单时html和模型之间的链接是如何完成的，但似乎我的delelete函数为此破坏了一些东西。

当我删除TempObject2时在Javascript中放置一个断点时，这是我的formData：

Page.ID=1
Page.ProjetID=1
Page.PagePrecedenteID=
Page.Nom=Page1
Objets%5B0%5D.ID=0
Objets%5B0%5D.Nom=TempObject1
Objets%5B2%5D.ID=0
Objets%5B2%5D.Nom=TempObject3

如您所见，当我删除一个对象时，列表内容没有得到很好的更新，可能是因为这样我没有在控制器中得到下一个对象... formData发送Objets％5B0％5D和Objets ％5B2％5D但不是Objets％5B1％5D，它是可移除对象。

希望您能理解我的代码...为了更明确，我删除了一些部分。如果缺少某些内容，我会在以后添加。

使用JQuery删除剃须刀页面中的项目

0 个答案: