Question

我正在使用C＃ - .net framework 1.1构建asp.net Web应用程序。我正在尝试构建一个包含文本框的表，并且应该从服务器和客户端构建，服务器应该访问文本框内的数据。

无法上传图片，所以结构基本上是：

<table>
<row> <Cell></Cell> <Cell>add-image</Cell> <Cell></Cell>
<row> <Cell>label</Cell> <Cell>TextBox</Cell> <Cell>delete Image</Cell> </row>
<row> <Cell>label</Cell> <Cell>TextBox</Cell> <Cell>delete Image</Cell> </row>
</table>
<button> submit </button>

首先从服务器创建的表：

  private void addIntervalToTable(TimeInterval WorkingPeriod )
    {
        const string MY_NAME = "CalendarWebApp::addIntervalToTable";

        try
        {
            //extract day from WorkingPeriod
            string dayOfWeek= WorkingPeriod.Start.DayOfWeek.ToString ();

            //extract 'From' and 'To' dates
            string startTime=WorkingPeriod.Start.ToString(@"HH\:mm");
            string finishTime=WorkingPeriod.Finish.ToString(@"HH\:mm");

            //create new table row
            TableRow row=new TableRow();

            //create first cell of the row- containing the day 
            TableCell cell=new TableCell();
            //set css class name
            cell.CssClass="dayLabels";
            //set text to be the day
            cell.Controls.Add(new LiteralControl( dayOfWeek));

            //create TextBox containing the "From (date) To (date)" string
            TextBox TB1=new TextBox();


            //set css class name
            TB1.CssClass="TimeSlot";
            //set the string
            TB1.Text=string.Format("From: {0,-20} To: {1}",startTime,finishTime);

            //create second cell of the row- containing the textBox with the dates
            TableCell cell2=new TableCell();
            cell2.Controls.Add(TB1);

            //create the ImageButton control that deletes the row
            ImageButton removeBtn=new ImageButton();
            //set the image
            removeBtn.ImageUrl="images/Remove-icon.png";
            //set the function that invoked when clicking
            removeBtn.Attributes.Add("onClick","javascript:deleteRow(this)");

            //create the third cell of the row- containing the delete button
            TableCell cell3=new TableCell();
            cell3.Controls.Add(removeBtn);

            //create the ImageButton control that edits the row
            ImageButton editBtn=new ImageButton();
            editBtn.ImageUrl="images/edit-icon.png";

            //create the fourth cell of the row- containing the edit button
            TableCell cell4=new TableCell();
            cell4.Controls.Add(editBtn);

            //add all four cells to the new row
            row.Cells.Add(cell);
            row.Cells.Add(cell2);
            row.Cells.Add(cell3);
            row.Cells.Add(cell4);

            //add row to the table
            TimeIntervalsTable.Rows.Add(row);

            TimeIntervalsTable.EnableViewState=true;
            ViewState["TimeIntervalsTable"]=true;
        }

然后，当用户点击“+”符号时，他可以通过客户端添加新行：

function createNewSlot(e,MyArgs)
        {
        //add to existing table created on server
        var day=MyArgs[0];
        var table=document.getElementById("TimeIntervalsTable");
        var rowCount=table.rows.length;
        var row=table.insertRow(rowCount);
        //row.insertCell(0).innerHTML=day;
        //var newCell=row.insertCell(0).innerHTML='<class="dayLabels">';
        var newCell=row.insertCell(0);
        newCell.className="dayLabels";
        newCell.innerHTML=day;

        //document.getElementById("TimeIntervalsTable").rows[rowCount].cells[0].Text=day;
        var timeString="From: "+MyArgs[1].toString().concat(MyArgs[2].toString())+"                 To: "+ MyArgs[3].toString().concat(MyArgs[4].toString());
        row.insertCell(1).innerHTML='<input type="text" class="TimeSlot"  runat="server" >'
        document.getElementById("TimeIntervalsTable").rows[rowCount].cells[1].firstChild.value=timeString;
        row.insertCell(2).innerHTML='<input type="Image" src="images/Remove-icon.png" onClick="deleteRow(this)" >';
        row.insertCell(3).innerHTML='<input type="Image" src="images/edit-icon.png" >';
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

    }

点击“提交”后，我想访问所有文本框中的数据。

我知道有很多关于这个问题的数据，但找不到我需要的东西。谢谢。

Answer 1

你最好用服务器端代码替换javascript。例如。在按钮后面创建服务器端代码以添加服务器端控件。这样，您可以在下一个回发中检索这些新控件值。客户端创建的控件永远不会成为服务器端。

Answer 2

服务器端的控件用于生成html并显示它的任务。当然，您可以从这些控件中检索值，但由于您的控件在加载页面时显示，您可以使用javascript生成html，而在服务器端，您只需要处理逻辑。因此，您的问题的解决方案如下：

在服务器端实现代码，生成控件并显示它们（可能已完成）
在处理事件的服务器上实现API（例如+号的添加命令）
为客户端实现原型，通过AJAX将命令发送到服务器并处理服务器响应（如添加新项目时生成html）
在客户端创建事件处理程序，在客户端操作上调用原型所需的命令

从服务器和客户端创建动态控件以从服务器访问

2 个答案: