I have created a UserControl called AutoCorrect. It contains gridview in it and then I have 100 pages in the application so it will be difficult for me to add that Usercontrol for each page.
I have though about another way of doing it by jQuery/JavaScript.
So far I have written the below script :
$(document).ready(function () {
let OldTextArea = document.querySelectorAll("textarea");
if (OldTextArea == null)
return;
for (let i = 0; i < OldTextArea.length; i++) {
OldTextArea[i].appendChild(); // how I put UserControl in appendchild ?
}
});
Now I am struggling to find a way to add the AutoCorrect UserControl in the appendChild of Text Area. Can someone please suggest how can I achieve this ?
Following are the properties I want to set for UserControl :
<uc1:AutoCorrect id=AutoCorrect runat=server ShowTimeOut=false ShowMenu=false>
</uc1:AutoCorrect>
The below script works fine and returns all input from textarea. I want to append the usercontrol as child of this textarea.
document.querySelectorAll('textarea').forEach((input) => {console.log(input.value);});
I tried another route of implementing this by
$(document).ready(function () {
//dom is ready
let OldTextArea = document.querySelectorAll("textarea");
if (OldTextArea == null)
return;
const content = `<div id="myDropdown">
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="Red" runat="server"
AutoGenerateColumns="false"
OnDataBound="OnDataBound">
<Columns>
<asp:BoundField
DataField="Shortcode"
HeaderText="Shortcode"
ItemStyle-Width="30" />
<asp:BoundField DataField="ReplaceText"
HeaderText="Replace Text"
ItemStyle-Width="100" />
</Columns>
</asp:GridView>
</div>`;
Instead of having Usercontrol create it on the fly and append it to textarea as child. However with this I am getting below error :
So, in place of adding the user control, you going to add code to each page? Hum? The problem is that js runs after the page has rendered, and there is BOATLOAD of automatic wiring up of events, and settings and things like ViewState etc. that have to be EXACTLY correctly loaded, setup, and rendered LONG before any js code can run.
You could consider trying to add from code behind, but even then, what happens if you add the control two times - then OFTEN all of the "ID's" for each instance of the control are now also going to change - it becomes a real mess real fast. The server will append a previx, and often a suffix to the control. So, trying at client side - will not even close to work here.
You might even be better off to create a control that has the text area and this whatever extra stuff. So, now you just find the text area, and change that to the user control?
There is as noted a huge boatload of things that have to correctly occur for a control in the markup behind. It is pre-processed, converted into HTML, but the viewstate, event code and oh so much more is required to get such controls working. The rendered page does not have, nor render that control, but is converted into HTML - and that occurs LONG before the page ever makes the trip down to the client side.
Try this:
Take a single page with that control. View it in the browser, and now hit f12 for browser debug tools - look at the html generated - it will look nothing like your original markup.
I suppose this requirement and example is one advantage of using a client side framework, as it is far more able then to accept injection of such controls - but they not going to be asp.net controls anymore.
I been at this for some time, and while I often think it is compelling to inject controls? Doing it the asp.net way, it truly rare - very rare that this approach is required.
I mean for some text box popup or edit helper? I would probably make a right click - insert and display the list of choices - as such, this type of UI would be far better done with a client side control - not a server side one anyway. And then like most jQuery selectors etc., then yes, with great ease you could attach a ui action to existing text boxes, or whatever, and such selecting can be done by control ID, or even by class type.
However, you MAY very well be able to use a jQuery.UI dialog. They are able to load another page - and display it in a dialog. so, perhaps let jquery.UI dialog do this loading. So, if you have 2, or say 8 text boxes that need the UI popup, then have one js routine, and it could popup the dialog with selections. So, while most jQuery.UI dialogs are div, you can load a whole web page into that div - and thus while you ARE loading in a 2nd page, it does run, does render, and jQuery.UI dialog can display that page.
