从ASP.NET获取动态创建的标记(jQuery)

时间:2009-09-01 17:03:01

标签: asp.net jquery

我在ASP.NET中有网页。我用jQuery创建了Tree View控件。我从树中拖动项目并放入div元素。

<div id="rows" runat="server" class="droppable">
</div>

我使用jQuery中的.append函数向该div添加项目。

$(".droppable").append(event.originalTarget.innerHTML);

它的工作方式与我想要的一样。但现在我想从ASP.NET代码中获取所有被删除的项目。我使用以下代码:

protected void Button2_Click(object sender, EventArgs e)
{
    HtmlGenericControl control = (HtmlGenericControl)Page.FindControl("rows");
    Label1.Text = control.InnerHtml;
}

但它不起作用。我也试过InnerText函数,但仍然没有。我还将按钮和标签控件放入UpdatePanel,这样页面就不会刷新,而且我删除的项目仍然是div元素。

如何从ASP.NET代码中动态添加项目。

的Lukas

3 个答案:

答案 0 :(得分:6)

您的append()调用只会更改DOM结构。 ASP.NET不知道你这样做了。

您需要将更改存储在页面上隐藏的“状态”字段中,然后在代码隐藏中将其删除。

var droppedItem = event.originalTarget;
$(".droppable").append(droppedItem.innerHTML);
$("#myHiddenStateField").get(0).value += "," + droppedItem.id;

代码背后:

string[] droppedItemIds = myHiddenStateField.Value.Split(",");

答案 1 :(得分:1)

ASP.NET只能使用表单元素。

因此,如果这些行是例如(输入[type = text]),您可以这样做:

Request.Form["rows"]

修改

当用户拖动元素时,为什么不创建新的隐藏输入并将相关值放在其中。这样可以很容易地从上面使用的示例中获取服务器中的值。

答案 2 :(得分:1)

更好的是,为什么不在droppable的成功事件中使用jquery的ajax并通过asp.net的PageMethod记录每一滴,然后你就不必在你的droppable元素中处理解析html。

这应该让你开始

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

这是我使用的实际例子

          $('.droppable').droppable({
            accept: '#dragList > li, .columnRight li',
            activeClass: 'ui-state-highlight',
            hoverClass: 'hoverBorder',
            drop: function(ev, ui) {
                $.ajax({
                    type: "POST",
                    url: "yourPage.aspx/AddDroppable",
                    data: "{'id':'" + ui.draggable.context.id + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                        $("#Result").html(msg.d);
                    }
                });
            }
        });