从下拉列表“选择”标签中获取值并存储在 DB ASP.net 中

Question

所以我正在处理一个显然从用户那里获取值的表单，包括文本值和他们从下拉列表中选择的项目。我在寻找一种方法来获取从下拉列表中选择的值并将其作为参数值之一存储在我的数据库中时遇到了问题。

这是我用于创建包含 4 个项目的下拉列表的选择标记的 javascript 和 html 代码，如图所示。

    <script type="text/javascript">
        $(document).ready(function () {

            $('#packageList').change(function () {
                var value = $(this).val(); var toAppend = ''; var onePrice = 
        '$ 399';
                var threePrice = '$ 699'; var sixPrice = '$ 899'; var 
         twelvePrice = '$ 2999';

                if (value == 1) {
                    toAppend = "<input type='textbox'>"; 
    $("#container").html(onePrice); return;
                }
                if (value == 2) {
                    toAppend = "<text='$ 699'>"; 
    $("#container").html(threePrice); return;
                }
                if (value == 3) {
                    toAppend = "<text='$ 899 >"; 
    $("#container").html(sixPrice); return;

                }
                if (value == 4) {
                    toAppend = "<text='$ 2999'>"; 
   $("#container").html(twelvePrice); return;
                }
            });

        });
    </script>

这是我的表单正文中的 html 代码。

  <select id="packageList" name="D1">
    <option value="0">Select </option>
    <option value="1">1 Months </option>
    <option value="2">3 Months </option>
    <option value="3">6 Months </option>
    <option value="4">12 Months </option>
     </select> </p>
     &nbsp;<div id="container"></div>

当我的用户点击“提交”表单按钮时，输入的值将添加到我数据库中目标表中的参数中，我能够获取所有参数的值（我的表单包含文本框，和下拉列表）但是我在弄清楚如何从下拉列表中选择值并将其存储在我的数据库中时遇到了问题。请注意，上面代码中显示的下拉列表是使用标签创建的，我无法在后台的 c# 代码中查看它的变量。

非常感谢任何帮助。 谢谢。

Answer 1

乍一看，从 val() 得到的值是 typeof 字符串（虽然在 == 中可以比较 "1" 和 1，但使用 === 的最佳做法会使您的陈述错误）

在jQuery中，有一个叫$.ajax的东西，你需要它来异步发送回你的数据（任何方法，包括get、post、put等都可以在ajax中使用；HTML表单只允许get并发布，一般）

由于您没有显示其他输入文本框，我只是假设此输入的一些简单名称。

$text = $("#text");
$content = $("#content");
$packageList = $("#packageList");
var data = {
    "text": $text().val(),
    "D1": $packageList.val()
};
$.ajax({
    "url": "api-endpoint-accepting-post", // example: "/post-form", if your API endpoint is /post-form
    "type": "POST", // HTTP method, it is common to use GET, POST; and others such as PUT, DELETE, or some other WebDAV method, etc., that normally browser cannot do these method to pass request to server via HTML form
    "data": JSON.stringify(data),
    // other stuff you might need to configure
    "contentType": "application/json; charset=utf-8",
    "dataType": "json", // if you are receiving from server in json format
    //
    "success": function (result, textStatus, jqXHR) {
        console.log(result);
        // do whatever you want if post to server is a success, and server return something to you
        // maybe update another textbox
        var json = JSON.parse(result);
        $("#container").text(json["some-property-sent-back-from-server"]);
    },
    "error": function (jqXHR, textStatus, errorThrown) {
        // can also look at those parameters above for the reason
        console.error("error");
    }
});

此代码 sn-p 假定服务器需要 JSON 字符串（ajax 中的数据对象）；对于表单，您需要配置您的 ajax 选项（与数据、类型、url 等级别...）