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

Question

I am not quite sure what I am doing wrong here, I have a page in my webforms project which uses jQuery accordion. When the page is loaded for the first time, the server side code fetches some data to populate a user control which is then added to my page as shown below. This works fine and I have no problem with this.

The problem is, I am trying to generate a similar thing on my client, using jQuery by simply creating the controls in jQuery ajax response function and then add to dvProjects

ASPX markup:

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

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

jQuery AJAX code:

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) {

        }
    });
    }

My problem is these controls are not added to dvProjects .

Answer 1

Update: you had a bug in your javscript too, refer to my comments.

That's because when you set a div to runat="server" every html element in it, becomes a Literal Control server side and they are persisted to view state.

When you post the page, the server side control rebuilds the runat="server" div with information in the postdata (view state).

When you add controls with jQuery they are not in the postData/ViewState, so when the server side code revuilds the div, it doesn't see the ones you added with jQuery.

To fix that, you would need to create a custom WebControl and implement IPostBackEventHandler. So instead of...

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

You would have something like this,

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

Then to add a control to it, you would do something like

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

Then in your IPostBackEventHandler implementation, you serialize the json string coming in and use that to determine what server side controls to add to the ProjectsControl.

WebControl has methods you can override, WriteBeginTag, WriteEndTag, and there you could write an opening div and closing div, so your web control would render as a div.

By adding a string property calledd "CssClass" to your webcontrol, you can use that to set the class. So in WriteBeginTag you would also write out the class attribute to the div using CssClass as the value.