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

  • 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>




    Sunday, June 9, 2019 8:37 AM

Answers

  • 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. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 10, 2019 3:30 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 7:49 AM

All replies

  • User475983607 posted

    Do you have a question?

    Sunday, June 9, 2019 1:49 PM
  • 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 ?

    Monday, June 10, 2019 5:09 AM
  • 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

    Monday, June 10, 2019 8:31 AM
  • 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

    Monday, June 10, 2019 8:40 AM
  • 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 ? 

    Monday, June 10, 2019 8:43 AM
  • 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);
    } 

    Monday, June 10, 2019 9:56 AM
  • 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

    Monday, June 10, 2019 10:01 AM
  • 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. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 10, 2019 3:30 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 7:49 AM