ASP.NET Create textbox on fly using javascript - c#

I want to create a textbox on the fly (in the comment section im creating). Now I would like your opinion on whats the best solution. I was thinking about using a webmethod and add a textbox control dynamically, but since this requires a call to the server I'm not sure if that's the best option. Or can i also spawn a textbox using plain old javascript and still getting it's value on postback?
Thanks again guys
Kind regards,
Mark

Put the TextBox using ordinary HTML input element on page and set its visibility property to collapsed using style tag then in code behind make it visible.
HTML Tag:
<input id="myTextBox" type="text" style="visibility: collapse;" />
Javascript:
var txt = document.getElementById("myTextBox");
txt.style.visibility = "visible";
Hope this helps!

You can create a new element using plain old JavaScript:
var textbox = document.createElement("textarea");
textbox.className = "my-textarea"; //Styling with CSS
document.getElementById("myelement").appendChild(textbox);

Related

updating textbox value

I have an input tag having some text in it. Now I would like that onclick of a button the text will be changed.
For some reason it is not being changed.
This is the input tag:
<input id="network_table" type="text" value="oldValue" runat="server"/>
the following is the way I am trying to change the value of the input tag:
network_table.Value = "newValue";
network_table.Text = "newValue";
Bind the "onclick" event and apply this these methods:
In jQuery :
$('#network_table').val("your val");
http://docs.jquery.com/Val
Javascript
document.getElementById('network_table').value = "your val";
you can do it serverside with "OnClick" event on button, assuming your controls are defined with runat="server" attribute
http://msdn.microsoft.com/fr-fr/library/system.web.ui.webcontrols.button.onclick(v=VS.80).aspx
You could try and assign some meaningless class to the input and use that as a reference point to get in hold of the input field.
<input id="network_table" type="text" value="oldValue" runat="server" class="myInputField"/>
$('.myInputField').val('newValue');
Using the id will not work because you are using the 'runat=server' and it makes the id unavailable on client side and you would need to get the unique id first to be able to get in hold of it. This is a lot cleaner way but you need to make sure not to use the class elsewhere to avoid ambiguous results.
Here is a jsfiddle example which does what you want but on load.
http://jsfiddle.net/yX5ze/

How to append a WebControl immediately after a WebControl in CodeBehind

Now that i've been MVCing for quite sometime i decide to pop some classic C# .Net into my 8 track and have gotten the following issue:
I have a TextBox WebControl on my aspx page that in the code behind i want to simply append a LiteralControl after it.
This doesn't work:
TextBoxAge.Controls.Add(new LiteralControl("Invalid Age."));
This works but all the way at the bottom:
TextBoxAge.Controls.Parent.Add(new LiteralControl("Invalid Age."));
Can you help me!?
For example the HTML will show:
<div>
<input name="TextBoxAge" type="text" id="TextBoxAge" class="Age">
Invalid Age.
</div>
This should be purely dynamic and relative to the control at hand.
Solution:
TextBoxAge.Parent.Controls.AddAt(TextBoxAge.Parent.Controls.IndexOf(T‌​extBoxAge),new LiteralControl("<span>Invalid Age.</span>"));
Maybe you can try something like this. (Don't remember if AddAt will replace the control at the specified index )
var textBoxAgeIndex = TextBoxAge.Parent.Controls.IndexOf(TextBoxAge);
TextBoxAge.Parent.Controls.AddAt(textBoxAgeIndex +1, new LiteralControl("Invalid Age."));
Hope this will help
The best way is to use an a PlaceHolder
From MSDN: Use the PlaceHolder control as a container to store server
controls that are dynamically added to the Web page.
PlaceHolder.Controls.Add(new LiteralControl("Invalid Age."));

How it is possible to clear the textbox in the web page using html element

I am trying to write email on a web page. But, I want to clear the textbox boefore writing on page. Because, if any other email is there in the textbox, the below code is not working.
How it is possible to clear the textbox in the web page using html element?
HtmlElement ele = webBrowser.Document.GetElementById("email");
if (ele != null)
ele.InnerText = "myacc#gmail.com";
try using the value attribute for clearing it
hmm... if you mean textfield & javascript code:
<input type="text" id="email">
then you can use simply smth like this:
document.getElementById('email').value = 'myacc#gmail.com';
or i am misunderstanding your question.
P.S. Oops. It seems not like javascript, sry.
Try this:
ele.SetAttribute("value", "");
Another option is to use Document.InvokeScript to call a Javascript function that clears the text box.

Dynamically create controls using stringbuilder

i have been trying to create controls dynamically on my web page using the StringBuilder class..and i dont quite seem to get through...
any help would be appreciated.
i am trying to do this...
StringBuilder sbTest = new StringBuilder(string.Empty);
sbTest.Append("<input type=\"text\" id=\"txt1\" runat=\"server\" />");
Response.Write(sbTest.ToString());
The page for sure displays a TextBox on the browser which is easily accessible through JavaScript...but what i want is the control to be available on the Server Side too...so that when the page is posted back to the server i can easliy obtain the value that has been entered by the user into the textbox.
Can any 1 please help me with this....
thank you so much....
Like Torbjörn Hansson says, if you just add a name attribute (and maybe remove runat="server" from your original snippet) you'll be able to access the submitted value but you'll only have a client-side HTML <input /> element.
If you are wanting to dynamically create server-side controls then you'll have to do something like this:
TextBox textbox = new TextBox {
/* take care to create unique ID's if you're adding more than 1 TextBox */
ID = "foo",
Text = "bar"
};
Controls.Add(textbox);
In an answer almost about the something I answered this
You should do the things properly and not trying to reinvent the wheel.
Creating controls Dynamically you can choose 2 ways, the .NET way, or the Javascript way
Both are seen by any of the other, in other words, creating controls using the .NET way, javascript can see and use it and vice versa.
.NET way
in your HTML file add something like
<body>
<form id="form" runat="server">
<asp:PlaceHolder id="ph" runat="server" />
</form>
</body>
in your script part
TextBox txt = new TextBox();
txt.ID = "myTxt";
ph.Controls.Add(txt);
you can easily get that TextBox in javascript using:
var myTxtValue = $("#myText").value();
Javascript Way
var txt = $("<input />", {
id : "myTxt"
});
txt.AppendTo("body");
in .NET you get the value using
string value = Request["myTxt"];
NOTE All javascript lines uses jQuery for simplify results
Provide a name-attribute and access it with:
Request.Form["txt1"]
You can get the value from
Request["txt1"]

How to set value of <input type="hidden"> in asp .net page_load without using runat="server"

i need to do the following two things...
i want to set value of in asp .net page_load. the problem is that i dont want to use runat="server". i have tried this the following but it does not work:
HtmlInputHidden hiddenControl = (HtmlInputHidden) FindControl("a");
is there a way to access in asp .net page_load without using runat="server"? ? ?
i can do this if i use but in this case i cannot access it in master page's javascript function. i have tried this but it does not work...
var hdnField = document.getElementById('<%= hdnIdentity.ClientId%>');
var hdnField = document.getElementById("hdnIdentity").getAttribute("value");
var hdnField = document.getElementById("hdnIdentity").value
what i need... i want to access content page's hidden field value in javascript in master page. is there a way ? ? ? thnx in advance regards Haroon haroon426#yahoo.com
I sometimes do the following, especially when I want control over my ids (especially when using jquery).
<asp:literal id="literal1" runat="server"><input type="hidden" id="someid" value="{0}"/></asp:literal>
Then, in codebehind you can set the value with the following:
literal1.Text = string.Format(literal1.Text, "somevalue");
This doesn't really get around using runat="server", but you haven't specified why you don't want to do that. Also, you'd have to get the value with a request.form
Update
In .net 4.0 you have much more control over your IDs. See this for more information:
http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx
IIRC, you need to look in the HttpRequest.Forms, somewhere in there.
If the value is part of a POST form then you want to check Request.Forms or Request.QueryString if it's a GET form.
ad 1) in aspx file just write <input type="hidden" value="<%=GetHiddenValue%>" />. And in your code behind define protected property
public class MyPage : Page {
protected GetHiddenValue { get { /*...*/ } }
You can use it in your master page javascript how ever the control name is not what you expect it to be you'd need to use ClientID to get that. If you do not apply runat=server you can only get a hold of the control as text by either traversing the .aspx file or as some one mentioned embedding it in a named tag and then doing string manipulation on the inner HTML. That is for setting it. If you need to get the value use Request[tagName] or similar
ad 2) You can use simple html code in your content page with specified id <input type="hidden" id="myHiddenField" />. Then in master page javascript use document.getElementById('myHiddenField').

Categories

Resources