從jQuery/JavaScript/AJAX檢索值添加到數據庫（ASP.NET/C＃）

Question

我想創建一個帶有一些文本框的簡單表單以及五星評級功能（http://rateit.codeplex.com/）。當點擊提交按鈕時，字段中的數據應該被添加到數據庫中。

該文本框不是一個問題，但我無法從星級評分中「檢索」該值。

我嘗試了一種解決方法，即一旦選擇了評分，就將值輸出到標籤中，但是，在寫入數據庫時​​，不會發送任何值。

HTML： 您的評價：

<div id="products"> 
     <div style="float: right; width: 350px; border: 1px solid #ccc; padding: 1em;"> 
      <strong>Server response:</strong> 
      <ul id="response"> 
      </ul> 
     </div> 
     <div data-productid="653" class="rateit"></div> 
    </div> 

    <asp:Label ID="lblRating" runat="server" Text=""></asp:Label> 
    <br /> 
    What was the best aspect of your experience? 
    <br /> 
    <asp:TextBox ID="txtBest" TextMode="multiline" runat="server" Height="105px" Width="301px"></asp:TextBox> 
    <br /> 
    What was the worst aspect of your experience? 
    <br /> 
    <asp:TextBox ID="txtWorse" TextMode="multiline" runat="server" Height="105px" Width="301px"></asp:TextBox> 
    <br /> 
    Do you have any suggestions? 
    <br /> 
    <asp:TextBox ID="txtSuggestions" TextMode="multiline" runat="server" Height="105px" Width="301px"></asp:TextBox> 
    <br /> 
    Would you recommend this service to your friend or family? 
    <br /> 
    <asp:RadioButtonList ID="rblRecommend" runat="server"> 
     <asp:ListItem Value="N">No</asp:ListItem> 
     <asp:ListItem Value="Y">Yes</asp:ListItem> 
    </asp:RadioButtonList> 
    <p></p> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> 
    <asp:Label ID="lblError" runat="server" Text="Label"></asp:Label> 
    <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click1" /> 
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
</div> 
</form> 

ASP.NET C＃：

protected void btnSubmit_Click(object sender, EventArgs e) 
{ 
    ... 
    try 
    { 
     connection.Open(); 

     string cmdText = "INSERT INTO feedback (stars, best, worse, suggestions, recommend) VALUES (?stars, ?best, ?worse, ?suggestions, ?recommend);"; 
     MySqlCommand cmd = new MySqlCommand(cmdText, connection); 

     cmd.CommandType = CommandType.Text; 
     cmd.Parameters.Add("?stars", MySqlDbType.VarChar).Value = **lblRating.Text**; 
     cmd.Parameters.Add("?best", MySqlDbType.VarChar).Value = txtBest.Text; 
     cmd.Parameters.Add("?worse", MySqlDbType.VarChar).Value = txtWorse.Text; 
     cmd.Parameters.Add("?suggestions", MySqlDbType.VarChar).Value = txtSuggestions.Text; 
     cmd.Parameters.Add("?recommend", MySqlDbType.VarChar).Value = rblRecommend.SelectedValue; 

     int result = cmd.ExecuteNonQuery(); 
     lblError.Text = "Data Saved"; 
    } 
    ... 

編輯： 這個JavaScript使用戶能夠選擇的評級，輸出會顯示在lblRating：

 <script type ="text/javascript"> 
     //we bind only to the rateit controls within the products div 
     $('#products .rateit').bind('rated reset', function (e) { 
      var ri = $(this); 

      //if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null . 
      var value = ri.rateit('value'); 
      var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val() 

      //maybe we want to disable voting? 
      ri.rateit('readonly', true); 

      $.ajax({ 
       url: 'rateit.aspx', //your server side script 
       data: { id: productID, value: value }, //our data 
       type: 'POST', 
       success: function (data) { 
        $('#response').append('<li>' + data + '</li>'); 
        $('#lblRating').append(data); 
       }, 
       error: function (jxhr, msg, err) { 
        $('#response').append('<li style="color:red">' + msg + '</li>'); 
       } 
      }); 
     }); 
    </script> 

爲什麼下面的ASP.NET C＃代碼不輸出任何內容？

protected void Button2_Click1(object sender, EventArgs e) 
{ 
    Label1.Text = lblRating.Text; 
} 

Answer 1

使用

$('#lblRating').append(data);僅的DOM操作發生客戶端，更新span元素的內容。 （你可以使用瀏覽器的工具來檢查它，例如Chrome的Inspect Element--其他瀏覽器也有類似的功能）。

由於您只更新了'標籤'，因此當您使用按鈕事件回發時，該值會丟失。 TextBox值持續存在的原因是因爲它們包含在表單的數據中。因此，要包含評分值，您可以嘗試使用ajax，或者與您的其他方法更一致，您可以將評分值放在表單字段（而不是標籤）中，例如，另一個TextBox或HiddenField，如下所示。

添加控件到窗體（如果你想看到它，使用TextBox代替）：

<form id="form1" runat="server"> 
    ... 
    <asp:HiddenField ID="hidRating" runat="server" /> 
</form> 

在你的Ajax調用的返回，更新控制來選擇的等級，屬性的值[參考：jQuery attr]

success: function (data) { 
    $('#response').append('<li>' + data + '</li>'); 
    $('#hidRating').attr('value', value); 
    }, 

然後，在你的服務器端提交事件，這應該是提供給值添加到參數：

cmd.Parameters.Add("?stars", MySqlDbType.VarChar).Value = hidRating.Value; 

Answer 2

嘗試對您的ajax調用進行以下更改。同時使用[WebMethod（）]和一個靜態方法。

$.ajax({ 
    url: 'rateit.aspx', 
    type: "POST", 
    contentType: 'application/json', 
    data: JSON.stringify({id: productID, value: value}), 
    dataType: "json", 
    }).success(function()