从Javascript到HTML的值不能在服务器端读取
本文关键字:不能 服务器端 读取 Javascript HTML | 更新日期: 2023-09-27 17:54:01
这是onchange
事件的函数
Javascript代码:
function optionsModel() {
var x = document.getElementById("model");
var option = document.createElement("option");
var makeValue = document.getElementById("make").value;
x.innerHTML = "";
option.text = "Model";
x.add(option);
option.innerHTML = "Model";
if (makeValue == "ALFA ROMEO") {
var opt = document.createElement('option');
opt.innerHTML = "156";
x.appendChild(opt);
}
else if (makeValue == "AUDI") {
var audi = ["A3", "A4", "TT"];
for (var i = 0; i < 3; i++) {
var opt = document.createElement('option');
opt.value = audi[i];
opt.innerHTML = audi[i];
x.appendChild(opt);
}
}
}
.aspx
+ HTML代码:
<body>
<div class="container form-group">
<div class="row">
<form runat="server">
<div class="col-md-6">
<select class="form-control" name="Make" id="make" runat="server" onchange=" return optionsModel()">
<option value="select" selected>Select Make</option>
<option value="ALFA ROMEO">ALFA ROMEO</option>
<option value="AUDI">AUDI</option>
</select></div>
<div class="col-md-6"> <select class="form-control" name="Model" id="model" runat="server">
<option value="Model">Model</option>
</select></div>
aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
string modelValue = this.model.Value;
string makeValue = this.make.Value;
}
当我在Make select标签中选择ALFA ROMEO时,模型标签将显示特定的选项,但当我按下按钮时,它将给modelValue一个"模型"。这意味着来自JS的值没有在服务器端传输。我如何在服务器端获得这些值?
有两种方法:
- 使用AJAX如果你想执行异步操作,上面的链接将是帮助(推荐):
- 使用标准的服务器客户端请求(GET),例如,当onchange页面将重定向到/index.aspx?makeval="A"&modelval="B"
ajax示例如下:
客户端(aspx)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function optionsModel() {
var x = document.getElementById("model");
var option = document.createElement("option");
var makeValue = document.getElementById("make").value;
x.innerHTML = "";
option.text = "Model";
x.add(option);
option.innerHTML = "Model";
if (makeValue == "ALFA ROMEO") {
var opt = document.createElement('option');
opt.innerHTML = "156";
x.appendChild(opt);
}
else if (makeValue == "AUDI") {
var audi = ["A3", "A4", "TT"];
for (var i = 0; i < 3; i++) {
var opt = document.createElement('option');
opt.value = audi[i];
opt.innerHTML = audi[i];
x.appendChild(opt);
}
}
}
function submit() {
var makeValue = document.getElementById("make").value
var modelValue = document.getElementById("model").value;
$.ajax({
type: "POST",
url: "MakeModel.aspx/Submit",
data: "{'make':'"+makeValue+"', 'model':'"+modelValue+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function(response) {
alert(response);
}
});
}
function OnSuccess(response) {
alert(response.d);
}
</script>
</head>
<body>
<p>
<select class="form-control" name="Make" id="make" runat="server" onchange=" return optionsModel()">
<option value="select">Select Make</option>
<option value="ALFA ROMEO">ALFA ROMEO</option>
<option value="AUDI">AUDI</option>
</select>
<select class="form-control" name="Model" id="model" runat="server">
<option value="Model">Model</option>
</select>
</p>
<p><input type="submit" value="Procced" name="submit" onclick="submit()" /></p>
</body>
</html>
服务器端(asp .cs)
[WebMethod]
public static string Submit(string make,string model)
{
return make+" "+model;
}
在客户端,重要的javascript函数是submit, url是MakeModel中的define函数。在Aspx中,data是服务器端提交函数的参数。