ASP.NET Core 2.2 disappear dynamic controls on page post backs

Question

User1518508822 posted

As we are creating the control dynamically they disappears when page post backs so we also need to take care of this condition and we need to re create the controls when page post

function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextbox("");
    document.getElementById("divCont").appendChild(div);
}

function GetDynamicTextbox(value) {
    return '<div id="frd" class="form-row">' +
        '<div id = "fr" class="col-md-7 mb-3" >' +
        '<input type="text" name="txttest" class="form-control" /></div >' +
        '<div ="cd" class="col-md-3 mb-3" > <input type="button" onclick="RemoveTextBox(this)" value="Remove" class="btn btn-primary" /></div ></div > ';
}

function RemoveTextBox(div) {
    document.getElementById("divCont").removeChild(div.parentNode.parentNode.parentNode);
} 

<form method="post" enctype="multipart/form-data">
<div class="col-md-10">
        <label asp-for="Person.Contacts" class=""></label>
        <div class="form-row">
            <div class="col-md-7 mb-3">
                <input type="text" name="txtContacts" asp-for="Person.Contacts" class="form-control" />
            </div>
            <div class="col-md-3 mb-3">
                <input type="button" class="btn btn-primary" onclick="AddTextBox()" value="Add More" />
            </div>
        </div>
    </div>
    <div id="divCont" class="col-md-10">
    </div><br />
<div class="form-group">
        <div class="col-md-10">
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </div>
</form>

Answer 1

User475983607 posted

Do you have a question?

Answer 2

User1518508822 posted

I don't want to disappear dynamic controls when user click the button. it should be visible until server response. how can we apply this in asp.net core razor pages ?

Answer 3

User-1038772411 posted

Hello michale.p,

All you need to do is to re-instantiate / reinitialize dynamic controls before or within page load event each and every time during postback and add this control to page / forms / placeholders. Then, the posted data will automatically be assigned to the control by calling the LoadPostData method by the parent control.

check the article and how to write code for dynamic control - How to maintain dynamic control events, data during postback in asp.net

Thank you

Answer 4

User-854763662 posted

Hi michale.p ,

What have you tried ?  It would be better that if you share the more details that can reproduce the issue , in currently , we could not reproduce it based on provided code.

Best Regards ,

Sherry

Answer 5

User753101303 posted

Hi,

I don't want to disappear dynamic controls when user click the button.

It seems what you asked for ie you add this to a div and remove from even higher level nodes when the button is clicked so it seems to be just what you asked for ? You want to remove child nodes rather than parent nodes maybe ? Or what are you really trying to do ? 

Answer 6

User1518508822 posted

<form method="post" enctype="multipart/form-data">
<div class="col-md-10">
        <label asp-for="Person.Contacts" class=""></label>
        <div class="form-row">
            <div class="col-md-7 mb-3">
                <input type="text" name="txtContacts" asp-for="Person.Contacts" class="form-control" />
            </div>
            <div class="col-md-3 mb-3">
                <input type="button" class="btn btn-primary" onclick="AddTextBox()" value="Add More" />
            </div>
        </div>
    </div>
    <div id="divCont" class="col-md-10">
    </div><br />
<div class="form-group">
        <div class="col-md-10">
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </div>
</form>

function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextbox("");
    document.getElementById("divCont").appendChild(div);
}

function GetDynamicTextbox(value) {
    return '<div id="frd" class="form-row">' +
        '<div id = "fr" class="col-md-7 mb-3" >' +
        '<input type="text" name="txtContacts" class="form-control" /></div >' +
        '<div ="cd" class="col-md-3 mb-3" > <input type="button" onclick="RemoveTextBox(this)" value="Remove" class="btn btn-primary" /></div ></div > ';
}

function RemoveTextBox(div) {
    document.getElementById("divCont").removeChild(div.parentNode.parentNode.parentNode);
} 

Answer 7

User1518508822 posted

Hi AddWeb Solution,

There are practices for .net framework. But i am asking for .Net Core 2.2 Razor pages. It is something like different. What is the solution for Razor pages ?

Thanks,

Michale.P

Answer 8

User-474980206 posted

if you postback, you lose all javascript context. mixing server rendering and client rendering requires you determining how to maintain the dynamic state.  your post needs to include enough information that the server can redo the work the client did, or you render a client model, and the client redoes its work after the post back. you could also do an ajax post, instead of a form post.

nowadays, for your scenario, it more typical to use a client framework, and do the rendering on the client, rather than doing server rendering. 

Answer 9

User1518508822 posted

if you postback, you lose all javascript context. mixing server rendering and client rendering requires you determining how to maintain the dynamic state.  your post needs to include enough information that the server can redo the work the client did, or you render a client model, and the client redoes its work after the post back. you could also do an ajax post, instead of a form post.

nowadays, for your scenario, it more typical to use a client framework, and do the rendering on the client, rather than doing server rendering. 

Hi bruce,

Yeah, Thanks bruce for guiding for it. using ajax post we can do it.

<div class="col-md-10">
            <label asp-for="Input.Contacts" class=""></label>
            <div class="form-row">
                <div class="col-md-7 mb-3">
                    <input type="text" name="txttest" asp-for="Input.Contacts" class="form-control" />
                </div>
                <div class="col-md-3 mb-3">
                    <input type="button" class="btn btn-primary" onclick="AddTextBox()" value="Add More" />
                </div>
            </div>
        </div>
        <div id="divCont" class="col-md-10">
        </div><br />
        <div class="form-group row">

            <div class="col-sm-7 offset-sm-3">
                <button class="btn btn-primary" id="submit">Submit</button>
            </div>
        </div>

$(function () {
            $('#submit').on('click', function (evt) {
                evt.preventDefault();
                $.post('', $('form').serialize(), function () {
                    alert('Posted using jQuery');
                });
            });
        });

Thanks,

Michale.P