Answered by:
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>
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