[英]Dynamically created JavaScript code from Code behind not working on javascript
我為我的問題進行了大量搜索，但找不到任何合適的解決方案。 我有一個具有html select語句的JavaScript代碼，我想在后面的代碼中添加選項
JavaScript功能
function addMoreRows()
{
rowCount++;
var recRow = "";
recRow += '<tr id="rowCount' + rowCount + '">';
recRow += '<td style="margin: 0px; padding: 0px;">';
recRow += '<select style="height: 25px; border:0; width:250px; margin: 0px; padding: 0px;" id="ddl_grid_productList" onchange="addrowswithselect()" data-placeholder="Choose a State...">';
<%=options%>
recRow += '</select>';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="field_one" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="Qty' + rowCount + '" onchange="add(' + rowCount + ')" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" id="Rate' + rowCount + '" onchange="add(' + rowCount + ')" style="height: 25px;border:0px; margin: 0px; padding: 0px" class="col-xs-10 col-sm-12" />';
recRow += '</td><td class="hidden-480" style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input id="total' + rowCount + '" type="text" onblur="totalamout(),addrows(this.value);" style="height: 25px;border:0px; padding: 0px; margin: 0px;" class="col-xs-10 col-sm-12" readonly />';
recRow += '</td></tr>';
jQuery('#<%=tbdy_addedRows.ClientID%>').append(recRow);
}
Aspx代碼隱藏
public string options;
var pro = (from m in db.products select m).ToList();
foreach (var item in pro)
{
ListItem list = new ListItem();
list.Value = item.code.Trim();
list.Text = item.name.Trim();
options += "recRow += '<option value=\"" + item.code.Trim() + "\">" + item.name.Trim() + "</option>';\n";
}
有什么標准的方法可以執行此操作，因為源視圖顯示選項可以正確提取，但JavaScript不能正常工作。
在文件后面的代碼中創建[WebMethod] ，該文件將建立選擇選項列表，並使用$.ajax從javascript調用它。
后面的代碼：
[System.Web.Services.WebMethod]
public static string GetOptions()
{
string options = "<option value='Option1'>Option 1</option><option value='Option2'>Option 2</option>";
return options;
}
.ASPX：
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
var rowCount = 0;
$("#btnAddRow").click(function () {
$.ajax({
type: "POST",
url: "AddRowsInJquery.aspx/GetOptions",
contentType: "application/json;charset=utf-8",
success: function (data) {
var options = data.d;
addMoreRows(options);
},
error: function (errordata) {
alert(errordata);
}
});
});
function addMoreRows(options) {
rowCount++;
var recRow = "";
recRow += '<tr id="rowCount' + rowCount + '">';
recRow += '<td style="margin: 0px; padding: 0px;">';
recRow += '<select style="height: 25px; border:0; width:250px; margin: 0px; padding: 0px;" id="ddl_grid_productList" onchange="addrowswithselect()" data-placeholder="Choose a State...">';
recRow += options;
recRow += '</select>';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="field_one" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="Qty' + rowCount + '" onchange="add(' + rowCount + ')" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" id="Rate' + rowCount + '" onchange="add(' + rowCount + ')" style="height: 25px;border:0px; margin: 0px; padding: 0px" class="col-xs-10 col-sm-12" />';
recRow += '</td><td class="hidden-480" style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input id="total' + rowCount + '" type="text" onblur="totalamout(),addrows(this.value);" style="height: 25px;border:0px; padding: 0px; margin: 0px;" class="col-xs-10 col-sm-12" readonly />';
recRow += '</td></tr>';
jQuery('#<%: Table1.ClientID%>').append(recRow);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="Add Row" id="btnAddRow" />
<asp:Table ID="Table1" runat="server">
<asp:TableHeaderRow>
<asp:TableCell>Column 1</asp:TableCell>
<asp:TableCell>Column 2</asp:TableCell>
<asp:TableCell>Column 3</asp:TableCell>
<asp:TableCell>Column 4</asp:TableCell>
<asp:TableCell>Column 5</asp:TableCell>
</asp:TableHeaderRow>
</asp:Table>
</form>
</body>
經過審查您的問題。 我可以建議使用unbind＆bind事件進行動態控制。 它將再次綁定您的事件，並且動態控件的事件將觸發。
$("#mycontrol").bind("click", (function () { $('span').text(" Clicked"); }));
如何使用JavaScript在文件背后的代碼中找到動態創建的元素
[英]How to find a dynamically created element in the code behind file by using JavaScript
從背后的代碼動態創建aspx頁面中的JavaScript塊的一部分
[英]Dynamically create part of JavaScript block in aspx page from code behind
JavaScript：不從背后的代碼調用javascript函數
[英]JavaScript: Not calling javascript function from the code behind
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.