Javascript 如何在PageMethod函数中向页面动态添加web控件
我在页面上有一个列表视图，用户将在其中输入他们希望订购的每个产品的QTY。在页面的右侧，我希望在输入数据时动态更新/显示他们正在排序的项目 Listview中的textbox控件正在OnChange事件中调用javascript函数，到目前为止没有任何问题：Javascript 如何在PageMethod函数中向页面动态添加web控件,javascript,asp.net,vb.net,pagemethods,Javascript,Asp.net,Vb.net,Pagemethods,我在页面上有一个列表视图，用户将在其中输入他们希望订购的每个产品的QTY。在页面的右侧，我希望在输入数据时动态更新/显示他们正在排序的项目 Listview中的textbox控件正在OnChange事件中调用javascript函数，到目前为止没有任何问题： function CalculateCost(idofCell) { var parts = idofCell.split("_") var totalQty = 0 var totalCost = 0 va
function CalculateCost(idofCell) {
var parts = idofCell.split("_")
var totalQty = 0
var totalCost = 0
var ProductCost = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_ProductCostLabel_" + parts[5]).innerHTML)
var ProductName = (document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_ProductNameLabel_" + parts[5]).innerHTML)
var MonQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_MondayQuantityText_" + parts[5]).value)
var TuesQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_TuesdayQuantityText_" + parts[5]).value)
var WedQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_WednesdayQuantityText_" + parts[5]).value)
var ThursQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_ThursdayQuantityText_" + parts[5]).value)
var FriQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_FridayQuantityText_" + parts[5]).value)
var SatQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_SaturdayQuantityText_" + parts[5]).value)
var SunQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_SundayQuantityText_" + parts[5]).value)
totalQty = (MonQty + TuesQty + WedQty + ThursQty + FriQty + SatQty + SunQty)
totalCost = (MonQty + TuesQty + WedQty + ThursQty + FriQty + SatQty + SunQty) * ProductCost
document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_TotalCostText_" + parts[5]).value = totalCost
document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_TotalQtyText_" + parts[5]).value = totalQty
PageMethods.displayOrder(ProductName, totalQty, totalCost)
}
<System.Web.Services.WebMethod()> _
Public Shared Sub displayOrder(ByVal ProductName As String, ByVal totalQty As Double, ByVal totalCost As Double)
List.Add(ProductName)
total = totalQty + totalCost
'Dim label1 As Global.System.Web.UI.WebControls.Label
Dim label1 As New Label()
Dim mainTable As New Table
Dim textBox As TextBox = New TextBox()
textBox.ID = "myTextBox"
Dim PlaceHolder1 As PlaceHolder = Panel2.FindControl("myPlaceHolder")
PlaceHolder1.Controls.Add(textBox)
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
int count = 0;
if (ViewState["Count"] != null)
{
count = (int)ViewState["Count"];
for (int i = 0; i < count; i++)
{
PanelControls.Controls.Add(new TextBox { Text = "Textbox " + i.ToString() });
}
}
}
}
protected void btnAdd_Click(object sender, EventArgs e)
{
int count = 0;
if (ViewState["Count"] != null)
{
count = (int)ViewState["Count"];
}
count++;
PanelControls.Controls.Add(new TextBox { Text = "Textbox " + count.ToString() });
ViewState["Count"] = count;
}
_
公共共享子显示顺序（ByVal ProductName为字符串，ByVal totalQty为双精度，ByVal totalCost为双精度）
列表。添加（ProductName）
总计=总计数量+总计成本
'Dim label1作为Global.System.Web.UI.WebControl.Label
尺寸标签1作为新标签（）
将主表变暗为新表
Dim textBox As textBox=新建textBox（）
textBox.ID=“myTextBox”
Dim占位符1作为占位符=面板2.FindControl（“myPlaceHolder”）
占位符1.控件.添加（文本框）
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="NewOrder.aspx.vb" Inherits="CafeteriaStock.NewOrder" %>
<%@ Register Assembly="AjaxControlToolkit, Version=4.1.51116.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<script src="~/Scripts/Extension.min.js" type="text/javascript"></script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="" cssClass="pnl1">
<div id="div1" style="text-align:left;width:100%;" >
<asp:Label ID="lblUnit" runat="server" Text="Please Select a Unit:" cssClass="lbl1"></asp:Label>
<asp:DropDownList ID="ddnUnits" runat="server" DataSourceID="sqlGetUnits"
DataTextField="Description" DataValueField="UnitID"
AppendDataBoundItems="True" AutoPostBack="True">
<asp:ListItem Value="0">Please Select Unit</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lblWeekOf" runat="server" Text="Please Select a Week:" style="padding: 3%;"></asp:Label>
<asp:TextBox ID="tbWeekOf" runat="server" CssClass="disable_past_dates"></asp:TextBox>
<asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="tbWeekOf" Mask="99/99/9999" MaskType="Date">
</asp:MaskedEditExtender>
<asp:ImageButton runat="Server" ID="btnCalendarImage" ImageAlign="Middle" ImageUrl="~/Images/CalendarSmallIcon.png" AlternateText="Click to display calendar" />
<asp:CalendarExtender ID="calCalendarExtender" runat="server" Enabled="True" TargetControlID="tbWeekOf" PopupButtonID="btnCalendarImage">
</asp:CalendarExtender>
<asp:Label ID="Label12" runat="server" Text="Label"></asp:Label>
<hr />
<br />
</div>
</asp:Panel>
<br />
<asp:Panel ID="Panel2" runat="server" GroupingText="" cssClass="pnl1">
<table id="mainTable" width="100%" align="center">
<tr>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
<td style="width:10%">
</td>
</tr>
<tr>
<td colspan="5">
<asp:ListView ID="ListView1" runat="server" DataSourceID="LinqDataSource2" >
<LayoutTemplate>
<table bgcolor="#FFFFCC" id="items">
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="row" runat="server" style="background-color: #CCFFCC">
<td>
<img alt="Images/plus.png" src="Images/plus.png" onclick="toggleGroup(this, '<%# Eval("count") %>');" />
</td>
<td colspan="1" >
<%#Eval("Category")%>
</td>
</tr>
<asp:ListView ID="ListView3" runat="server" DataSource='<%# Eval("cafItems") %>' >
<LayoutTemplate>
<tr class="hidden"style="width:50%;">
<td width="5%">
 
</td>
<td width="25%">
<asp:Label ID="Label10" runat="server" Text="Product"></asp:Label>
</td>
<td width="5%">
<asp:Label ID="Label9" runat="server" Text="Cost"></asp:Label>
</td>
<td width="5%">
<asp:Label ID="Label98" runat="server" Text="Sun"></asp:Label>
</td>
<td width="5%">
<asp:Label ID="Label1" runat="server" Text="Mon"></asp:Label>
</td>
<td width="5%">
<asp:Label ID="Label2" runat="server" Text="Tue"></asp:Label>
</td>
<td width="5%">
<asp:Label ID="Label3" runat="server" Text="Wed"></asp:Label>
</td>
<td width="5%">
<asp:Label ID="Label4" runat="server" Text="Thu"></asp:Label>
</td>
<td width="5%">
<asp:Label ID="Label5" runat="server" Text="Fri"></asp:Label>
</td>
<td width="5%">
<asp:Label ID="Label6" runat="server" Text="Sat"></asp:Label>
</td>
<td width="15%">
<asp:Label ID="Label7" runat="server" Text="Qty Ordered"></asp:Label>
</td>
<td width="15%">
<asp:Label ID="Label8" runat="server" Text="Total Cost"></asp:Label>
</td>
</tr>
<tr ID="itemPlaceholder" runat="server" >
</tr>
</LayoutTemplate>
<ItemTemplate>
<tr id="row" runat="server" class="hidden" >
<td width="5%">
 
</td>
<td width="25%">
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("Description") %>' />
</td>
<td width="5%">
<asp:Label ID="ProductCostLabel" runat="server" Text='<%# Eval("Cost") %>' />
</td>
<td width="5%">
<asp:TextBox ID="SundayQuantityText" runat="server" Width="30px" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
</td>
<td width="5%">
<asp:TextBox ID="MondayQuantityText" runat="server" Width="30px" OnChange="CalculateCost(this.id)"></asp:TextBox>
</td>
<td width="5%">
<asp:TextBox ID="TuesdayQuantityText" runat="server" Width="30px" OnChange="CalculateCost(this.id)"></asp:TextBox>
</td>
<td width="5%">
<asp:TextBox ID="WednesdayQuantityText" runat="server" Width="30px" OnChange="CalculateCost(this.id)"></asp:TextBox>
</td>
<td width="5%">
<asp:TextBox ID="ThursdayQuantityText" runat="server" Width="30px" OnChange="CalculateCost(this.id)"></asp:TextBox>
</td>
<td width="5%">
<asp:TextBox ID="FridayQuantityText" runat="server" Width="30px" OnChange="CalculateCost(this.id)"></asp:TextBox>
</td>
<td width="5%">
<asp:TextBox ID="SaturdayQuantityText" runat="server" Width="30px" OnChange="CalculateCost(this.id)"></asp:TextBox>
</td>
<td width="15%">
<asp:TextBox ID="TotalQtyText" enabled="false" runat="server" Width="90px"></asp:TextBox>
</td>
<td width="15%">
<asp:TextBox ID="TotalCostText" enabled="false" runat="server" Width="90px"></asp:TextBox>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</ItemTemplate>
<EmptyDataTemplate>
<table>
<tr>
<td>
No data was returned.
</td>
</tr>
</table>
</EmptyDataTemplate>
</asp:ListView>
</td>
<td colspan="5">
<asp:PlaceHolder runat="server" ID="myPlaceHolder"></asp:PlaceHolder>
</td>
</tr>
</table>
</asp:Panel>
<asp:Table ID="tblOverall" runat="server" BorderStyle="none" CellPadding="0" CellSpacing="0" Width="100%">
<asp:TableRow ID="TableRow1" runat="server" BorderStyle="none">
<asp:TableCell ID="TableCell1" runat="server" HorizontalAlign="left" Width="95%">
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
function toggleGroup(img, numberOfRows) {
// get a reference to the row and table
var tr = img.parentNode.parentNode;
var table = $get('items');
var src = img.src;
// do some simple match to determine how many
// rows we need to hide/show
var startIndex = tr.rowIndex + 1;
var stopIndex = startIndex + parseInt(numberOfRows);
//var startIndex = 1;
//var stopIndex = startIndex + parseInt(numberOfRows);
//If the img src ends with plus, then we are expanding the
// rows. Go ahead and remove the hidden class from the rows
// and update the image src
if (src.endsWith('plus.png')) {
for (var i = startIndex; i < stopIndex; i++) {
Sys.UI.DomElement.removeCssClass(table.rows[i], 'hidden');
}
src = src.replace('plus.png', 'minus.png');
}
else {
for (var i = startIndex; i < stopIndex; i++) {
Sys.UI.DomElement.addCssClass(table.rows[i], 'hidden');
}
src = src.replace('minus.png', 'plus.png');
}
//update the src with the new value
img.src = src;
}
function CalculateCost(idofCell) {
var parts = idofCell.split("_")
var totalQty = 0
var totalCost = 0
var ProductCost = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_ProductCostLabel_" + parts[5]).innerHTML)
var ProductName = (document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_ProductNameLabel_" + parts[5]).innerHTML)
var MonQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_MondayQuantityText_" + parts[5]).value)
var TuesQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_TuesdayQuantityText_" + parts[5]).value)
var WedQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_WednesdayQuantityText_" + parts[5]).value)
var ThursQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_ThursdayQuantityText_" + parts[5]).value)
var FriQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_FridayQuantityText_" + parts[5]).value)
var SatQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_SaturdayQuantityText_" + parts[5]).value)
var SunQty = Number(document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_SundayQuantityText_" + parts[5]).value)
totalQty = (MonQty + TuesQty + WedQty + ThursQty + FriQty + SatQty + SunQty)
totalCost = (MonQty + TuesQty + WedQty + ThursQty + FriQty + SatQty + SunQty) * ProductCost
document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_TotalCostText_" + parts[5]).value = totalCost
document.getElementById(parts[0] + "_" + parts[1] + "_" + parts[2] + "_" + parts[3] + "_TotalQtyText_" + parts[5]).value = totalQty
PageMethods.displayOrder(ProductName, totalQty, totalCost)
}
</script>
</asp:Content>
请选择单位
');" />
没有返回任何数据。
<asp:UpdatePanel ID="Panel1" runat="server">
<ContentTemplate>
<asp:Panel ID="PanelControls" runat="server">
</asp:Panel>
<p>
<asp:Button ID="btnAdd" Text="Add" OnClick="btnAdd_Click" runat="server" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
int count = 0;
if (ViewState["Count"] != null)
{
count = (int)ViewState["Count"];
for (int i = 0; i < count; i++)
{
PanelControls.Controls.Add(new TextBox { Text = "Textbox " + i.ToString() });
}
}
}
}
protected void btnAdd_Click(object sender, EventArgs e)
{
int count = 0;
if (ViewState["Count"] != null)
{
count = (int)ViewState["Count"];
}
count++;
PanelControls.Controls.Add(new TextBox { Text = "Textbox " + count.ToString() });
ViewState["Count"] = count;
}