从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

请尝试对您的Ajax调用进行以下更改。 还可以使用[WebMethod（）]和静态方法。

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

Answer 2

使用$('#lblRating').append(data); DOM操作 仅发生在客户端，更新span元素的内容。 （您可以使用浏览器的工具（例如Chrome的Inspect Element ）进行检查 ，其他浏览器也具有类似的功能）。

由于仅更新了“标签”，因此在使用按钮事件回发时，该值将丢失。 TextBox值持续存在的原因是因为它们包含在Form的数据中。

因此，要包括评级值，您可以尝试使用ajax进行尝试，或者与其他方法更一致，可以将评级值放在表单字段（而不是标签）中，例如另一个TextBox或HiddenField如下所示。

将您的控件添加到窗体（如果要查看它，请使用TextBox代替）：

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

返回ajax调用后，将该控件的value属性更新为选定的等级[ref： jQuery attr ]

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

然后，在您的服务器端Submit事件中，这应该可以将值添加到参数中：

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