动态创建的 jQuery 控件未添加到我的 asp.net 页面

Question

我不太确定我在这里做错了什么，我的 webforms 项目中有一个使用 jQuery 手风琴的页面。第一次加载页面时，服务器端代码会获取一些数据来填充用户控件，然后将其添加到我的页面中，如下所示。这很好用，我对此没有任何问题。

问题是，我试图在我的客户端上生成类似的东西，使用 jQuery 只需在 jQuery ajax 响应函数中创建控件，然后添加到dvProjects

ASPX 标记：

<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">

<div runat="server" id="dvProjects" class="dvAccordion">
</div>
</asp:Content>

jQuery AJAX 代码：

function AddUserProject() {
    var projectDialog = $('.dvEditExhibition');
    var projectName = projectDialog.find('.txtProjectName').val();
    var projectDescription = projectDialog.find('.txtProjectDescription').val();

    var project= JSON.stringify({
        'projectId': "00000000-0000-0000-0000-000000000000",
        'projectName': projectName,
        'projectDescription': projectDescription
    });

    $.ajax({
        type: "POST",
        url: "PresentationService.asmx/AddUserProject",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: project,
        success: function(response) {
            var data = response.d;
            console.log(data);

            var h3Title = $('<h3/>', {
                id: "h3ProjectTitle",
                text:data.Name
            });
            var divWrapper = $('<div/>', {

            });
            var dvProjectImages = $('<div/>', {
                class: "dvProjectImages"
            });

            var imgProjectImage = $('<img/>', {
                id: "imgProjectImage",
                class: "imgProjectImage"
            });

            var dvProjectDetails = $('<div/>', {
                id: "dvProjectDetails",
            });

            var pProjectDescription = $('<p/>', {
                id: "pProjectDescription",
                class: "pProjectDescription",
                text: data.Description
            });

            dvProjectImages.append(imgProjectImage);

            dvProjectDetails.append(pProjectDescription);

            divWrapper.append(dvProjectImages, dvProjectDetails);
            var dvProjects = $('#dvProjects');

            dvProjects.append(h3Title);
        },
        error: function(response) {

        }
    });
    }

我的问题是这些控件没有添加到dvProjects。

Answer 1

更新：您的 javscript 中也有错误，请参阅我的 cmets。

这是因为当您将 div 设置为 runat="server" 时，其中的每个 html 元素都会成为文字控制服务器端，并且它们会被持久保存到视图状态。

当您发布页面时，服务器端控件使用 postdata（视图状态）中的信息重建 runat="server" div。

当您使用 jQuery 添加控件时，它们不在 postData/ViewState 中，因此当服务器端代码重新创建 div 时，它不会看到您使用 jQuery 添加的控件。

要解决这个问题，您需要创建一个自定义 WebControl 并实现 IPostBackEventHandler。所以不是...

<div runat="server" id="dvProjects" class="dvAccordion">

你会有这样的东西，

<xyz:ProjectsControl runat="server" cssclass="dvAccordion" id="theProjects" />

然后要为其添加控件，您可以执行类似的操作

__doPostBack('<%= theProjects.UniqueID %>, 'someJsonStringHere');

然后在您的 IPostBackEventHandler 实现中，序列化传入的 json 字符串并使用它来确定要添加到 ProjectsControl 的服务器端控件。

WebControl 具有您可以覆盖的方法，WriteBeginTag、WriteEndTag，您可以在其中编写一个开始 div 和关闭 div，因此您的 Web 控件将呈现为一个 div。

通过向您的 web 控件添加一个名为“CssClass”的字符串属性，您可以使用它来设置类。因此，在 WriteBeginTag 中，您还可以使用 CssClass 作为值将类属性写入 div。