0

我正在尝试更新select列表，具体取决于另一个select. 在调用服务器时。有没有办法在没有 JSON 的情况下做到这一点。我不介意做一个完整Postback的网站，但更喜欢另一种解决方案。

我使用 csHTML 和 jQuery。

编码：

<form action="" method="post">
    <select name="SelectProductGroup" id="SelectProductGroup">
        <option value="0" disabled selected>
            select group
        </option>

        @{
            foreach (ProductGroup vg in productGroupList)
            {
                <option value="@vg.id">
                    @vg.name
                </option>
            }
       }
    </select>

    <select name="UpdateProduct" id="UpdateProduct">
        <option value="0" disabled selected>
            select product
        </option>
    </select>

    <input type="submit" name="btn" value="updateProduct" />
</form>


<script>
    $().ready(function () {
        $('#SelectProductGroup').on('change', function () {
            var options = {
                @{
                    int temp_ID = 0;
                    if(Request["SelectProductGroup"] != null)
                    {
                        temp_ID = int.Parse(Request["SelectProductGroup"]);
                    }
                    int counter = 0;
                    List<Product> productList = Product.getListBy_ProductGroup(temp_ID, connection);
                    string result = "";

                    foreach(Product v in productList)
                    {
                        result += "val" + v.id + " : " + v.name;

                        if(counter < productList.Count())
                        {
                            result += ",";
                        }
                    }

                    <text>
                        @result
                    </text>
                }
            };

            $.each(options, function (val, text) {
                $('UpdateProduct').append(
                        $('<option></option>').val(val).html(text)
                    );
            });
        });
    });
</script>

JSON 应该是一个很好的解决方案。只是似乎无法理解它。因此，我正在寻找 JSON 解决方案的替代方案^^

4

2 回答 2

2

JSON 只是一种序列化数据以在（通常）Web 服务器和 Web 浏览器之间传输的方式。为了让您以大多数网站的方式利用它，您必须执行以下操作：

  1. 拥有一个将 getListBy_ProductGroup() 函数实现为 AJAX 方法的服务器网页，该方法返回 List 结果的 JSON 编码。看到您正在使用 MVC，您将为此使用 WebAPI，也许将其实现为http://myserver.com/api/products?id=XXX（有一整套思想称为 REST 致力于组织您的 web api） .

  2. 在 Web 浏览器上，您将连接一个 JavaScript 事件处理程序，以便当第一个下拉列表的值更改时，向 WebAPI 页面发出 AJAX 请求，将选定的下拉值作为参数传递。

  3. 当收到对 AJAX 请求的响应时，您将有更多的 JavaScript 将第二个下拉列表的内容替换为一组新的 HTML 元素。

有很多库可以帮助您实现 (2) 和 (3)，我会推荐 jQuery。

抱歉，这不是更详细，但这是一个很大的问题！

于 2013-04-04T13:03:10.757 回答
1

jQuery 有一个.load方法，允许您发出 AJAX 请求并将响应添加到包含元素中。

例如：

$('#UpdateProduct').load('http://myserver.com/getProductsAsHtml?id=XXX');

只要确保网页只返回应该进入元素内部的<select>内容，例如：

<option>Product 1</option>
<option>Product 2</option>

您可以在 SelectProductGroup 元素的更改事件处理程序中使用它：

$('#SelectProductGroup').on('change', function() {
  var id=$(this).val();
  $('#UpdateProduct').load('http://myserver.com/getProductsAsHtml?id=' + id);
});
于 2013-04-08T20:37:25.737 回答