从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()