價值爲HTML不會在服務器端讀取

這是我對onchange事件價值爲HTML不會在服務器端讀取

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時，Model標籤將顯示特定的選項，但是當我按下按鈕時，它會給modelValue一個「Model」。這意味着來自JS的值不會被傳送服務器端。我怎樣才能在服務器端獲得這些值？

來源

2015-06-08 Rigel Kent Carbonel

您正在混合服務器和客戶端代碼，就好像他們知道對方在做什麼一樣。您在客戶端JavaScript上做的任何更改，您沒有專門發送到服務器都會丟失。也許看看AJAX並在服務器上執行所有選項邏輯。 –

這就是爲什麼。我應該使用AJAX先生嗎？因爲我不知道如何做AJAX。即時通訊只是在這種語言的新。 @AnthonyHorne –

開始使用非常容易，尤其是在視覺工作室中。搜索Ajax.Net和updatepanel。有很多很多的例子。您只需在頁面頂部添加一個腳本管理器，然後在控件周圍添加一個更新面板。然後對像dropdown_change（）等正常事件進行操作。由於它部分提交，它通常很快，用戶通常不知道服務器旅程正在發生。當你這樣做的時候還要看進度條。 –

有兩種方式：

使用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的實施例是象下面這樣：

客戶端側（CSS）

<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>

服務器端（Aspx.cs）

[WebMethod] 
public static string Submit(string make,string model) 
{ 
    return make+" "+model; 
}

在客戶端側上的重要javascript函數提交時，url是MakeModel.aspx中的定義函數，data是服務器端提交函數的參數。

我希望它能幫助你理解ajax。

來源

2015-06-08 07:46:28

你能幫我爲我的代碼構建ajax嗎？即時通訊如此困惑的阿賈克斯和jQuery。謝謝。@DikaArtaKarunia –

我會盡量爲你做代碼示例 –

謝謝，你幫了我很多，現在我明白ajax有點謝謝。 @Dika Arta Karunia –

價值爲HTML不會在服務器端讀取

回答

相關問題