Javascript 使用asp.net从更新面板中的noUiSlider设置并获取值
我在Asp.net网络表单中使用Javascript 使用asp.net从更新面板中的noUiSlider设置并获取值,javascript,c#,asp.net,updatepanel,nouislider,Javascript,C#,Asp.net,Updatepanel,Nouislider,我在Asp.net网络表单中使用noUiSlider来设置和获取一些数字范围。 这是我的aspx代码，用于创建和初始化uiSlider： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>UiSlider</title> <link rel="stylesheet" href="User/
noUiSlider这是我的
aspxuiSlider<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>UiSlider</title>
<link rel="stylesheet" href="User/css/assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="User/css/assets/vendor_components/bootstrap/dist/css/bootstrap-extend.css">
<link rel="stylesheet" href="User/css/master_style.css">
<link rel="stylesheet" href="User/css/skins/_all-skins.css">
<link href="Content/css/RezaModal.css" rel="stylesheet" />
<link href="Content/css/RezaStyle.css" rel="stylesheet" />
<script src="Scripts/jquery.sweet-alert.custom.js"></script>
<script src="Scripts/custom.js"></script>
<link href="Content/fontawesome-5.12.0-web/css/all.css" rel="stylesheet" />
<script src="Scripts/wNumb.min.js"></script>
<link href="Content/nouislider.min.css" rel="stylesheet" />
<script src="Scripts/nouislider.min.js"></script>
<style>
#input-select,
#input-number {
padding: 7px;
margin: 15px 5px 5px;
width: 70px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="col-12">
<div class="form-group">
<div class="row">
<div class="col-12">
<div id="range"></div>
</div>
<div class="col-6">
<div class="box-body">
<div class="contact-page-aside">
<ul class="list-style-none">
<li>
<input type="number" min="-20" max="40" step="1" name="txt" id="input-number">
<select id="input-select"></select>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="btn_Refresh" type="submit" runat="server" onserverclick="btn_ServerClick">send to server </button>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script src="User/css/assets/vendor_components/jquery/dist/jquery.min.js"></script>
<script src="User/css/assets/vendor_components/popper/dist/popper.min.js"></script>
<script src="User/css/assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
var select = document.getElementById('input-select');
// Append the option elements
for (var i = -20; i <= 40; i++) {
var option = document.createElement("option");
option.text = i;
option.value = i;
select.appendChild(option);
}
var html5Slider = document.getElementById('range');
noUiSlider.create(html5Slider, {
start: [10, 30],
connect: true,
range: {
'min': -20,
'max': 40
}
});
var inputNumber = document.getElementById('input-number');
html5Slider.noUiSlider.on('update', function (values, handle) {
var value = values[handle];
if (handle) {
inputNumber.value = value;
} else {
select.value = Math.round(value);
}
});
select.addEventListener('change', function () {
html5Slider.noUiSlider.set([this.value, null]);
});
inputNumber.addEventListener('change', function () {
html5Slider.noUiSlider.set([null, this.value]);
});
</script>
</body>
</html>
chrome控制台上显示的错误如下：
MicrosoftAjaxWebForms.js:6未捕获类型错误：无法读取属性 在处未定义的“PRM_ParserErrorDetails” Sys.WebForms.PageRequestManager.\u （MicrosoftAjaxWebForms.js:6）在 Sys.WebForms.PageRequestManager.\u onFormSubmitCompleted （MicrosoftAjaxWebForms.js:6）在数组中。（MicrosoftAjax.js:6） 在MicrosoftAjax.js:6处的Sys.Net.WebRequest.completed （MicrosoftAjax.js:6）在XMLHttpRequest上 （MicrosoftAjax.js:6） 模拟项目
aspx<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<input id="lblmaxNum" name="lblmaxNum" runat="server" />
<button id="btn_Refresh" type="submit" runat="server"
onserverclick="btn_Refresh_ServerClick">Refresh</button>
</ContentTemplate>
</asp:UpdatePanel>
<script>
function test(val) {
var lblmaxNum = document.getElementById('lblmaxNum');
lblmaxNum.value = val;
}
</script>
</form>
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn_Refresh_ServerClick(object sender, EventArgs e)
{
if (IsPostBack)
{
string script = "test('11111');";
ScriptManager.RegisterStartupScript(this, GetType(), "hg", script, true);
Response.Write(Request["lblmaxNum"]);
}
}
查看生成的HTML代码以查看输入的生成id。还可以使用标准ASP.NET服务器控件
lblmaxNum.Text=“Some value”asp:TextBox protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn_Refresh_ServerClick(object sender, EventArgs e)
{
if (IsPostBack)
{
string script = "test('11111');";
ScriptManager.RegisterStartupScript(this, GetType(), "hg", script, true);
Response.Write(Request["lblmaxNum"]);
}
}