Develop Reference

How to create and insert HTML at run time?

Would someone give a code example how to create and insert HTML at run time?
The HTML is like this:
<div class="row">
<div class="col-md-3">
<img src="example.png" class="profileImage" /> <br />
<span class="name">Name</span>
<div class="ver"></div>
<img class="flag ver" src="star.png" />
<div class="horizontalBar"></div>
</div>
</div>
The close I get was:
public partial class MyPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Header.DataBind();
ContentPlaceHolder contents = Page.Master.FindControl("MainContent") as ContentPlaceHolder;
Panel row = new Panel() { CssClass = "row" };
Panel col = new Panel() { CssClass = "col-md-3" };
Image profile = new Image()
{
CssClass = "profileImage",
ImageUrl = "example.jpg"
};
row.Controls.Add(col);
col.Controls.Add(profile);
contents.Controls.Add(row);
}
}
It doesn't work (see below error) and isn't full code, for example, what class is equivalent to generate <span>?
I get this error:
The Controls collection cannot be modified because the control
contains code blocks
What's the reason of that error? which are those code blocks and how do I fix this?

I've tested the code here and it's working.
The control equivalent to span is Label, but I think there must be better ways of doing this.
If you really need to dynamically insert HTML code, you can inject it using the LiteralControl, like this:
var html = new LiteralControl(#"<div class=""row"">
<div class=""col-md-3"">
<img src=""example.png"" class=""profileImage"" />
<br />
<span class=""name"">Name</span>
<div class=""ver""></div>
<img class=""flag ver"" src=""star.png"" />
<div class=""horizontalBar""></div>
</div>
</div>");
contents.Controls.Add(html);

Delete button sending the value of another form

I have the following code that creates multiple different forms within a for loop to delete the different values in a database:
#foreach (var item in Model.value)
{
<script>var temp = {'value' : '#item.name'}</script>
<form class="formStyle" id="allCurrentNames_#item.name" method="post" action="">
<input type="hidden" id="part_name_#item.name" value="#item.name"/>
<button class="partDelete" onclick="deletePart(temp);return false;">Delete</button>
</form>
}
The following is the deletePart(temp) function:
function deletePart(temp) {
var personName = $("input#part_num_"+temp.value).val();
var dataString = 'partnumber=' + partnumber;
$.ajax({
AJAX STUFF
})
}
Assuming I will have something like the following:
Person Name1 [DELETE]
Person Name2 [DELETE]
Person Name3 [DELETE]
Person Name4 [DELETE]
Person Name5 [DELETE]
Person Name6 [DELETE]
If I click Person Name3 it sends in the value of Person Name6 always no matter which Delete button I click.
Any help is much appreciated!
Thank you for your time!

Remove your javascript from html
#foreach (var item in Model.value)
{
<form class="formStyle" id="allCurrentNames_#item.name" method="post" action="">
<input type="hidden" id="part_name_#item.name" value="#item.name"/>
<button class="partDelete">Delete</button>
</form>
}
And change your javascript code like this
$('.partDelete').click(function(){
var $this = $(this);
var partnumber = $this.parent().find('input').val();
var dataString = 'partnumber=' + partnumber;
//ajax
return false;
});
$('.partDelete').click(function(){
var $this = $(this);
var partnumber = $this.parent().find('input').val();
var dataString = 'partnumber=' + partnumber;
alert(dataString)
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="formStyle" id="allCurrentNames_1" method="post" action="" onsubmit="return false;">
<input type="hidden" class="part_name" value="1"/>
<button class="partDelete">Delete</button>
</form>
<form class="formStyle" id="allCurrentNames_2" method="post" action="" onsubmit="return false;">
<input type="hidden" class="part_name" value="2"/>
<button class="partDelete">Delete</button>
</form>
<form class="formStyle" id="allCurrentNames_2" method="post" action="" onsubmit="return false;">
<input type="hidden" class="part_name" value="2"/>
<button class="partDelete">Delete</button>
</form>

A much simpler action could be setting a unique id to each person's name. You'll just need to replace two lines of code.
When building your forms, replace:
<input type="hidden" id="part_name" value="#item.name"/>
<button class="partDelete" onclick="deletePart();return false;">Delete</button>
with this:
<input type="hidden" id="part_name_#item.name" value="#item.name"/>
<button class="partDelete" onclick="deletePart(#item.name);return false;">Delete</button>
And in the deletePart js, replace:
function deletePart() {
var personName = $("input#part_num").val();
with this:
function deletePart(id) {
var personName = $("input#part_name" + id).val();

Your problem is in your javascript on this line:
var personName = $("input#part_num").val();
Since you are rendering these forms in a loop, you will have multiple input fields with part_num as the id. JQuery is going to give you the first instance found which matches your selector, which is why you are always posting the value of the first person.
You can easily fix this by figuring out which form the event came from and then selecting the correct part_num.
var personName = $('#correct_form_id #part_num').val();
Hope this helps!
EDIT: Adding some sample code
One approach could be to capture your form submit and handle it yourself. For instance:
$( "form" ).submit(function( event ) {
var personName = $(this).find('#part_num').val();
// Do what you want with this information
// prevents the form from posting, if that is desired
event.preventDefault();
});
Now you may have other forms on your page that you don't want to be caught by this handler, so you could add a class to the forms you are generating in your loop to verify that you are only capturing the correct events. Then your definition would look like:
$('form.some_class').submit(function(event)) {
...
});

How to Parse an input type in HTML form using C# HtmlAgilityPack

I have these HTML form in which am trying to get the input value
<form action="/checkout/cart" method="POST" class="update-qty-form">
<div class="quantity num-selector">
<input type="tel" value="1" name="qty" maxlength="3" class="quantity-increment">
</div>
</form>
With the Code it doesn't work
var Quantity = items
.Elements("form").First()
.Elements("div").First()
.Elements("input").First().Attributes["value"].Value;
Debug.WriteLine("The Quantity is : " + Quantity);

We recently used this bit of code to extract data from an attribute:
var htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(#"<form action='/checkout/cart' method='POST' class='update-qty-form'><div class='quantity num-selector'><input type='tel' value='1' name='qty' maxlength='3' class='quantity-increment'></div></form>");
var value = htmlDoc.DocumentNode.SelectSingleNode("//input").Attributes["value"].Value;
Hope it helps

How to get the "ID" of element by the name with asp.net

I have a generic code that create a loop on the post values. and i need to get the id of the element that posted the data.
For Example, if the Html source is:
<form id="form1" runat="server">
<input id="Name" type="text" name="Full Name" runat="server" />
<input id="Email" type="text" name="Email Address" runat="server" />
<input id="Phone" type="text" name="Phone Number" runat="server" />
</form>
C# code:
for (int i = 1; i < Request.Form.Count; ++i)
{
string Value = Request.Form[i];
if (Value != "")
{
string ControlName = Request.Form.Keys[i];
string ControlId = ""; // Here I need to find the Id
}
}
If the ControlName is: "Full Name", In ControlId I need to get: "Name" etc.
Any advice is welcome.

Request.Form just returns NameValueCollection.
If you want to retrieve controls inside the form as Server controls, you need to use Page.Form.
foreach (var control in Page.Form.Controls)
{
if (control is HtmlInputControl)
{
var htmlInputControl = control as HtmlInputControl;
string controlName = htmlInputControl.Name;
string controlId = htmlInputControl.ID;
}
}

checkbox list -javascript

In my aspx page i am having a checkbox list ..It has binded values from a table..
I need to validate the checkbox list ..I tried the following script
var checkBoxCount = 0;
var elements = document.getElementById('<%=ChkBoxList.ClientID%>');
for(i=0; i<elements.length;i++)
{
if(elements[i].checked)
checkBoxCount++;
}
if (checkBoxCount == 0)
{
alert("Please choose atleast one");
return false;
}
But I can't get the required output, it requires to select all the values in the checkbox list ..My need is atleast only one item must be selected from the checkbox list.. Using javascript
Thanks in advance...

function readListControl()
{
var tableBody = document.getElementById('CheckBoxList1').childNodes[0];
for (var i=0;i<tableBody.childNodes.length; i++)
{
var currentTd = tableBody.childNodes[i].childNodes[0];
var listControl = currentTd.childNodes[0];
if ( listControl.checked == true )
alert('#' + i + ': is checked');
}
}

document.getElementById returns an element, not an array.
One way to do this would be to get the container and iterate through the inputs, like so:
var container = document.getElementById('<%=ChkBoxList.ClientID%>').parentNode;
var inputs = container.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) {
if (typeof inputs[i] = "checkbox") {
// statements
}
}
You may also want to qualify the inputs with more conditional statements. This just gives you the broad brush strokes.

You will have to show us your generated html.
However, here is a working example:
<html>
<body><form name="myform" method="POST" action="" onsubmit="return validate();">
<input type="checkbox" name="mybox" value="1" /> 1
<input type="checkbox" name="mybox" value="2" /> 2
<input type="checkbox" name="mybox" value="3" /> 3
<input type="checkbox" name="mybox" value="4" /> 4
<input type="checkbox" name="mybox" value="5" /> 5
<input type="submit" value="Submit Form" />
</form>
<script type = "text/javascript">
function validate() {
var checkBoxCount = 0;
for (var i = 0; i< 5; i++) {
if(document.myform["mybox"][i].checked){
checkBoxCount ++;
}
}
if (checkBoxCount == 0) {
alert ("Tick a box!");
return false;
}
return true;
}
</script>
</body>
</html>

var k=0;
var ControlRef = document.getElementById('ChkBoxList');
var CheckBoxListArray = ControlRef.getElementsByTagName('input');
for (var i=0; i