输入类型无线电在附加到C＃stringbuilder后无法正常工作 [英] Input type radio not working properly when it is appended to C# stringbuilder

问题描述

我使用c＃stringbuilder将数据绑定到HTML表。我正在获取数据，但我有两个问题：

1）如果我有10个数据值，那么10个值绑定到HTML表但重复10次

2）我将这些值绑定到c＃asp.net Web表单应用程序中的输入类型单选按钮。这个绑定做得很完美，但我的问题是这个单选按钮是当我检查这个单选按钮它没关系但如果我点击第二个数据的单选按钮第一个数据的单选按钮被清除这是我的问题可以任何身体解决它为我



我尝试过：

i am binding the data to the HTML table using c# stringbuilder. I am getting data but i have two problems:
1) If i have the data 10 values then the 10 values binding to the HTML table but repeating 10 times
2) i am binding these values to the input type radio button in c# asp.net web form application. This binding has done perfectly but my problem with this radio button is when i check this radio button it's OK but if i click on second data's radio button first data's radio button is cleared this is my problem can any body solve it for me

What I have tried:

DataSet ds = new DataSet();
StringBuilder htmlTable = new StringBuilder();
string query = "SELECT DISTINCT * FROM Tablename ORDER BY Number ASC";
SqlDataAdapter sda = new SqlDataAdapter(query, con);
sda.Fill(ds);
htmlTable.Append("<table border='0'>");
if (!object.Equals(ds.Tables[0], null))
{
    if (ds.Tables[0].Rows.Count > 0)
    {
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            htmlTable.Append("<tr style='color:black;'>");
            htmlTable.Append("<td>" + ds.Tables[0].Rows[i]["Number"] + ')' + ' ' + ds.Tables[0].Rows[i]["Question"] + "</td>");
            htmlTable.Append("</tr>");
            htmlTable.Append("<tr style='color:black;'>");
            htmlTable.Append("<td>" + "<input type=\"radio\" id=\"rb1\" name=\"options\" />" + " A) " + "<label for='rb1'>" + ds.Tables[0].Rows[i]["ChoiceA"] + "</label>" + "</td>");
            htmlTable.Append("</tr>");
            htmlTable.Append("<tr style='color:black;'>");
            htmlTable.Append("<td>" + "<input type=\"radio\" id=\"rb2\" name=\"options\" />" + " B) " + "<label for='rb2'>" + ds.Tables[0].Rows[i]["ChoiceB"] + "</label>" + "</td>");
            htmlTable.Append("</tr>");
            htmlTable.Append("<tr style='color:black;'>");
            htmlTable.Append("<td>" + "<input type=\"radio\" id=\"rb3\" name=\"options\" />" + " C) " + "<label for='rb3'>" + ds.Tables[0].Rows[i]["ChoiceC"] + "</label>" + "</td>");
            htmlTable.Append("</tr>");
            htmlTable.Append("<tr style='color:black;'>");
            htmlTable.Append("<td>" + "<input type=\"radio\" id=\"rb4\" name=\"options\" />" + " D) " + "<label for='rb4'>" + ds.Tables[0].Rows[i]["ChoiceD"] + "</label>" + "</td>");
            htmlTable.Append("</tr>");
        }
        htmlTable.Append("</table>");
    }
    else
    {
        htmlTable.Append("<tr>");
        htmlTable.Append("<td style='text-align:center;' colspan='5'>There is No Records.</td>");
        htmlTable.Append("</tr>");
        htmlTable.Append("</table>");
    }
}

推荐答案

你的代码工作正常;你只是使用了错误的标记。

你看过这个渲染的HTML了吗？这将是有用的，以便您可以看到发生了什么。



我看到HTML将会呈现3个问题：

1-所有单选按钮具有相同的 name =options。这给你一个明显的问题，你检查问题4上的按钮，你的所有其他问题的选择都被删除。

2-你有4个选项，他们的ID为rb1..rb4 。这些ID由标签元素使用，并在单击时选择相应的按钮。后续行中使用这些相同的ID。 DOM（文档对象模型）仅允许将ID分配给1个元素。最终结果是单击问题1 的选择3可以检查问题4上的选择3。

3-单选按钮没有分配给它们的值，所以无论如何处理这个表格都不会知道检查了什么。



一个简单的问题解决方案1& 2是使用你的行迭代器 int i 作为这些元素的属性的名称/ id /的一部分。

问题3将由以下方法解决将value属性添加到input元素



如何执行此操作它实际上利用另一个StringBuilder来构建一个模块，然后再进行迭代，并使用 String.Format（）循环内的方法，使外观更整洁。



其他变化：

1-我也用DataTable替换了DataSet;因为如果结果集超过1，你只需要一个DataSet，进一步清理代码。

2-我使用字符串文字（@）来避免单引号。

3-您的原始代码在其自己的TD中有每个选项。这给你五行1列1。但是，这很好;它与1行5列的无问题结果不一致。所以我在问题和答案上删除了TR包装器



你还有一些改进空间。

1-我剥离了<每个元素都有i> color = black 。您只需要在表级执行此操作一次。您可以在页面上的STYLE块中指定它。

2-您可以在两个IF块之后关闭表并删除一行代码

Your code is working perfectly fine; you are just using the wrong markup.
Have you looked at the HTML that is rendered from this? It would be helpful so that you can see what is going on.

I see 3 issues with the HTML that would be rendered:
1- All radio buttons have the same name="options". This is giving you the visible problem that you check a button on "Question 4" and your choice for all other questions are erased.
2- You have 4 options and they have IDs of rb1..rb4. These IDs are used by the label element and will select the corresponding button when clicked. These same IDs are used in subsequent rows. The DOM (Document Object Model) only allows for an ID to be assigned to 1 element. The net result is that clicking on "Choice 3" for Question 1 could check "Choice 3" on Question 4.
3- The radio buttons have no values assigned to them, so whatever is going to process this form ain't going to know what was checked.

An easy fix to problems 1 & 2 is to use your row iterator int i as part of the name/id/for attributes of these elements.
Problem 3 would be fixed by adding the value attribute to the input element

How I would do this it actually utilize another StringBuilder to build a temple before you go through your iterations, and to utilize the String.Format() method within the loop to have a cleaner appearance.

Other things changed:
1- I also replaced the DataSet with a DataTable; as you would only need a DataSet if there was more than 1 result set, further cleaning up the code.
2- I used string literals (@) to avoid single quotes.
3- Your original code has each option in it's own TD. Which gives you five rows 1 of 1 column. This is fine, however; it does not align with the "no questions" result of being 1 row of 5 columns. So I removed the TR wrapper on the question and answers

You still have some room for improvement.
1- I stripped out the color=black on every element. You would only need to do this once, at the table level. You could assign this in the STYLE block on the page.
2- You could close the table after both IF blocks and remove a line of code

DataTable dt = new DataSet();
StringBuilder htmlTable = new StringBuilder();
string query = "SELECT DISTINCT * FROM Tablename ORDER BY Number ASC";
SqlDataAdapter sda = new SqlDataAdapter(query, con);
sda.Fill(dt);
htmlTable.Append("<table border='0'>");
if (!object.Equals(dt, null))
{
    StringBuilder sbQA = new StringBuilder();
    sbQA.AppendLine(@"<tr>");
    sbQA.AppendLine(@"<td>{0} Question</td></tr>");
    sbQA.AppendLine(@"<td><input type=""radio"" id=""rb1_{2}"" name=""options{2}"" value=""A""> A) <label for=""rb1_{2}"">{3}</label></td>");
    sbQA.AppendLine(@"<td><input type=""radio"" id=""rb2_{2}"" name=""options{2}"" value=""B""> B) <label for=""rb2_{2}"">{4}</label></td>");
    sbQA.AppendLine(@"<td><input type=""radio"" id=""rb3_{2}"" name=""options{2}"" value=""C""> C) <label for=""rb3_{2}"">{5}</label></td>");
    sbQA.AppendLine(@"<td><input type=""radio"" id=""rb4_{2}"" name=""options{2}"" value=""D""> D) <label for=""rb4_{2}"">{6}</label></td>");
    sbQA.AppendLine(@"</tr>");
    string aQuestion = sbQA.ToString();
    if (dt.Rows.Count > 0)
    {
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            htmlTable.AppendFormat(aQuestion, dt.Rows[i]["Number"], i, dt.Rows[i]["ChoiceA"], dt.Rows[i]["ChoiceB"], dt.Rows[i]["ChoiceC"], dt.Rows[i]["ChoiceD"] );
        }
        htmlTable.Append("</table>");
    }
    else
    {
        htmlTable.Append(@"<tr><td style=""text-align:center;"" colspan=""5"">There are No Records.</td></tr>");
        htmlTable.Append("</table>");
    }
}

这篇关于输入类型无线电在附加到C＃stringbuilder后无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！