c# - 从 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 调用返回时，将该控件的 value 属性更新为所选的评级 [ref: jQuery attr ]

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

然后，在服务器端提交事件中，应该可以将值添加到参数中:

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