如何动态地将html元素添加到页面并在asp.net?

时间:2016-07-26 10:24:55

标签: javascript c# html asp.net visual-studio

美好的一天,

我现在已经尝试了一天以找到一种方法,使用visual studio动态添加元素到网页并访问它们的值。我要么整个事情过于复杂,我要愚蠢,要么真的没办法做我想做的事哈哈。 我正在尝试创建一个应该能够生成超过100个以下html项集的页面: 它基本上是一个创建多项选择测试的问答形式。有一个区域可以输入问题,然后可以添加其他文本框以添加多项选择。还有一个按钮可以在答案区域添加额外的2个文本框(无论它们是创建并添加到表格行中的div还是隐藏,然后在按下按钮时显示。)

[问题的文本框]

[文本框] [文本框] [文本框] [文本框] [为此行添加额外文本框的按钮(最多只增加2个)]

[确认按钮以在文本框中提交文本]

[添加上述元素的另一个副本的按钮(最多100个)]

我很想创建一个普通的表单(因为这可能是最简单的),但这需要在Web上运行。我知道跟踪所有这些内容可能是一场噩梦,但我想不出另一种选择(好吧,我想到了另一种选择,但似乎更复杂)。我尝试过以下方法: 我尝试将div添加到表格单元格中以添加文本框,但之后我无法访问div。有没有办法做到这一点?如果我可以使用innerHtml方法访问我创建的元素,我会或多或少,但我在网上找不到任何东西。

QuestionContent.InnerHtml += "<table runat=\"server\" style=\"width: 100 %; \"><tr><td> Question " + _QuestionNum + " </td></tr><tr><td class=\"auto - style1\"><div id=\"divQ"+_QuestioNum+"\"></div></td></tr></table>"; 
//Might have an issue adding an element with runat=server, but this was the only way I could think of extracting a value that is created dynamically in C#.
                    ((System.Web.UI.HtmlControls.HtmlGenericControl)mainPanel.FindControl("divQ1")).InnerHtml = "<asp:TextBox ID=\"txtChoice1\" runat=\"server\">Choice1</asp:TextBox>"; 
    //Here I try to access the div created above. Unrelated: Also tried with a normal textbox, but I realise that creating an asp textbox here might cause issues.

我似乎无法访问我在C#中创建的任何内容。有没有更好的办法?在放弃这个想法后,我尝试使用javascript创建元素。我仍然需要知道我是否可以使用javascript将值传递给C#,但我现在仍然遇到另一个问题。每当下面的代码运行时,元素就会出现,但会立即消失。这是asp.net的问题吗?谷歌的结果不是很有帮助。

function addQuestion() {
if (numQuestions == limit) {
    alert('Maximum question limit reached. Consider breaking this test up into multiple tests.');
}
else {
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', 'divQ' + numQuestions);
    newdiv.innerHTML = '<table><tr><td> Question' + numQuestions + '</td></tr><tr><td>';
    for(var i=0;i<6;i++){
        newdiv.innerHTML += "<input type=\"text\" name=\"textBox"+i+"\">";
    }
    newdiv.innerHTML += '</td></tr></table>';
    numQuestions++;
    document.getElementById('divQuestionContent').appendChild(newdiv);       
}

}

但是,如果可以,我想避免使用javascript。有没有更好的方法来创建此页面?我做错了什么?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

我认为你是mixin服务器和客户端代码。

1st)使用您的第一个已知必要字段创建html表单

2nd) Javascript部分。用户向表单添加字段(需要在Javascript,客户端完成),请检查以下答案: How add new hidden input fields to the form on submit

3rd) C#部分。在表单请求上,您需要遍历所有request.form项目,因为您无法知道它们的数量。这可以通过以下方式完成:

StringBuilder s = new StringBuilder();
foreach (string key in Request.Form.Keys)
{
    s.AppendLine(key + ": " + Request.Form[key]);
}
string formData = s.ToString();