从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的值没有在服务器端传输。我如何在服务器端获得这些值?

从Javascript到HTML的值不能在服务器端读取

有两种方法:

  1. 使用AJAX如果你想执行异步操作，上面的链接将是帮助(推荐):
http://www.c-sharpcorner.com/UploadFile/dacca2/understand-jquery-ajax-function-call-code-behind-C-Sharp-method/

  • 使用标准的服务器客户端请求(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是服务器端提交函数的参数。

    相关文章：