根据用户 ID 限制下拉选项

Limiting dropdown options based on userID

本文关键字:选项 用户 ID      更新时间:2023-09-26

我问这个问题是因为我不确定解决问题的最佳方法。

问题:我有一个预填充的下拉列表,其中包含 1,000 个左右的数字。我需要根据使用下拉列表的用户来限制下拉列表中显示的数字。

我想到的解决方案:

  1. 使用 jQuery 隐藏所有数字
  2. 使用 jQuery/AJAX 调用数据库,传递用户 ID
  3. DB 返回基于用户 ID 的值列表
  4. 在下拉列表中显示与从数据库返回的数字具有相同值的选项

假设这是我的 HTML

<select>
<option>Please Select..</option>
<option value="101"> CC 101 </option>
<option value="102"> CC 102 </option>
<option value="103"> CC 103 </option>
<option value="104"> CC 104 </option>
<option value="105"> CC 105 </option>
<option value="106"> CC 106 </option>
</select> 

这是我的数据库表

=======================
|   User1    |  101   |
|   User2    |  101   |
|   User2    |  102   |
|   User2    |  103   |
|   User3    |  103   |
=======================

例如,我需要弄清楚如何传递 user2 然后返回 101,102,103。

我只知道基本的js/jQuery,而且我对DB不是很有经验,所以欢迎任何可以帮助我实现最终目标的建议。

编辑/注意:听起来很愚蠢....安全性在这里不是什么大问题。这将用于公司内部网站,如果用户觉得有必要四处走动并选择不同的号码,那真的没有那么重要。我也不认为公司的任何员工有愿望/需要/想要选择与他们允许的不同选项。

此外,列表必须预先填充,然后隐藏数字。这是我使用的平台的设置方式,所以我必须使用显示/隐藏或类似的东西。

我只会按照你方法的第2-3步;但是,我不会以你显示的方式存储数字。更好的方法是将它们存储在名为 user_value 的表中 - 或类似的东西 - :

user_id  |  value
---------+-------
user1    |  101
user1    |  102
user2    |  101

仅仅因为您将来可以轻松添加/删除/更新值,而不必解析逗号分隔的值。

我会避免使用jQuery来简单地"隐藏"东西,因为Javascript可以被用户禁用,他最终可能会提交他想要的任何值(可见或不可见( - 永远不要相信用户输入。

总之,这样做:

  1. 使用 jQuery/AJAX 调用数据库,传递用户 ID
  2. DB 返回基于用户 ID 的值列表
  3. 使用从数据库返回的值填充下拉列表。
  4. 服务器端验证表单,以确保提交的值存在于user_value表中。

如果这是示例数据库表和 Select 元素的示例。然后我认为最好的方法是不要自己写任何东西,只是让数据库选择要共享的内容和共享的位置。

在这里,我们进行编码。我将尝试解释我在写什么以及我是如何写的;因为你是新手:-(

适合您的 HTML 代码

您的工作的HTML代码将如此简单

<select name="someName">
  <!-- No options please! -->
</select>

获取用户标识

现在,一旦用户登录。尝试通过以下任一方法获取用户 ID。

jQuery

要使用jQuery,您需要使用服务器的生成值,因为jQuery不能干扰服务器请求和代码。因此,您可以创建一个简单的隐藏输入,并为其提供当前登录用户的值。这是示例

<input type="hidden" id="userId" value="@WebSecurity.CurrentUserId" />

现在,使用 jQuery,您可以获取此输入的值。这将是代码

var userId = $('#userId').val();

ASP.NET

要使用 ASP.NET,你什么都不做。您要做的就是将 ASP.NET 的内置方法用作

WebSecurity.CurrentUserId;

它会给你一个整数值。这将是当前登录用户的用户 ID。

WebSecurity的使用

如以下链接所述,网络安全是一类数据。它可以在您的应用程序中使用,以减少代码并帮助您以更好的速率获取用户的属性。

此类用作变量的值或参数。此方法将返回特定用户的属性。例如,您可以获取用户的 UserId、他的用户名、他的 CreateDate,或者您可以使用 WebSecurity 登录用户或注销用户。

下面是使用网络安全的示例。就像你在jQuery中创建变量并获取其值的方式一样。使用此方法并获取值。

j查询方法

var userId = $('someElement').val(); 
/* get the value of some element as userId */

WebSecurity.CurrentUserId 方法

var userId = WebSecurity.CurrentUserId;

然后,您可以在数据库查询中使用它,

db.Query("SELECT * FROM UserProfile WHERE UserId =@0", userId);

或者,将其写在文档中

Response.Write(userId);

或者做你想做的事。您可以在MSDN的链接中学习类的语法和其他内容。:-)

http://msdn.microsoft.com/en-us/library/webmatrix.webdata.websecurity(v=vs.111(.aspx

发送 Ajax 请求

现在发送 Ajax 请求。如果你知道,那就太好了!如果没有,那么这里是要发送的 Ajax 请求的示例

$.ajax({
  url: 'page_url',
  data: 'userId=' + userId, // userId that you got from input
  success: function (data) { // note the data parameter
    /* write in the select statement */
    $('select').html(data); // usage of data parameter
  }
});

一旦完成。它将更新选择元素的选项。但是等等,它会增加什么?

是你,谁也控制它。将服务器端代码编辑为以下内容。

从数据库获取数据。

如果您是数据库和 ASP.NET 的新手,则需要先学习一些知识。

http://www.asp.net/web-pages/tutorials/data/5-working-with-data

好的,你也可以稍后再学。我仍然会向你解释我的所有代码。:-)

因此,对于数据库,

您首先需要创建与数据库的连接,然后可以搜索其表和其他内容。这是代码

var db = Database.Open("databaseName"); // Open a connection
var userId = Request.QueryString["userId"]; // get userid from ?userId=int
var selectQuery = "SELECT * FROM table_name WHERE UserId =@0"; // Query
var results = db.Query(selectQuery, userId); // Get data in a variable

获取所有这些值后,您需要做的就是创建一个响应,以发送到客户端。

我希望,您正在使用网页技术。好!你在这里比其他人安全一步。

只需按向下翻页并向下移动到最后几行并创建一个新的 Div 元素

<div>
  <!--empty div element -->
</div>

现在,在其中编写一个 if else 语句并创建一个将添加到 select 元素中的响应。

P.S 给出响应的另一种方法(实际方法(是使用 Actuall HttpResponse 类,然后给它值。喜欢这个

Response.Write("Hello World!");

如果你写上面的行,它会把这个字符串添加到你的选择语句中(虽然是非法的(,但这将使你理解它的用法。

http://msdn.microsoft.com/en-us/library/system.web.httpresponse.aspx

我仍然对您的约束感到有些困惑,但根据您的评论:

该列表将在客户端预填充(从我无法访问/修改的服务器(然后对不同的数据库(简单,两列(进行 AJAX 调用,然后将值返回到原始 AJAX 调用,其中 THEN JS 隐藏未返回的值(或显示返回的值,如果它们最初是隐藏的。

为什么不创建一个"统一"服务(在服务器上(,以便只进行一次 AJAX 调用(从客户端(?

http://MySite/MyService.aspx/GetOptionsForUser(101)

此服务将使对两个数据库的调用返回给定用户 ID 的允许选项列表。这让服务器可以完成大部分繁重的工作,并大大减少客户端上的jQuery数量。

更多信息:

URL 是 jQuery 用来进行 AJAX 调用的。

最简单的做法是:

  1. 创建一个名为http://mySite/MyService.aspx的网页
  2. 添加一个名为 GetOptionsForUser(( 的公共方法,该方法接受整数并返回数字列表。这是查询两个数据库的"统一"逻辑。通过添加 WebMethod 属性使方法 AJAX 可调用。
  3. 在要填充下拉列表的现有网页中,对http://MySite/MyService.aspx/GetOptionsForUser进行 AJAX 调用,并将用户 ID 作为 AJAX 参数传递。

我认为一个好方法是对所有用户使用 JSON。为具有选项的用户准备一个 JSON 数组,并根据用户呈现它以填充选项。例如。

var user1 = '["101","102","103"]';

这是一个示例,显示了 jquery ajax 和 php 如何收集:

例如,当一个按钮单击Ajax时,向服务器端语言(PHP(发送订单,PHP处理该订单并显示合适的响应:

$("#button").click(function(){
 $.ajax({
            type:"POST",
            url:"ajax/alertMe.php",
            data:({alert:"yes"}),
       // The alert  ^^  is the name of $_POST variable in php
            success:function(data){
                //this data can be some javascript and HTML codes or a text and ...
               evel(data);
            }
        });
})

这是名为 alertMe.php 的 php 代码:

<?php
if(isset($_POST['alert']) && $_POST['alert']!=""){
if($_POST['alert']=="yes"){
  echo 'alert("the condition says I should alert!");';
}else{
   echo '$(this).fadeOut();';
}
}
?>

既然你这么说 - 你有预先填充的条目,我会采用这种方法 -

  1. 首先在页面加载时将所有项目保存在JS数组中-

             var alloptions = $("select").find("option").get();
    
  2. 然后,对于获取项目列表后的每个用户 ID,显示和隐藏它们,如下所示 -

            //getting the id of the user and passing to AJAX call
            $.ajax({
                url: '',
                dataType: 'json',
                type: 'GET',
                success:function(data){
                    // other codes
                    var userItemList = []; //list of items for this user [102,103, etc]
                    $("select").empty();
                    $("select").append(alloptions[0]) //the first one since it is the null one
                    for(var i = 0; i < userItemList.length; i++){
                        for(var j = 0; j < alloptions.length; j++){
                            if (parseInt($(alloptions[j]).val()) == userItemList[i]){
                                $("select").append(alloptions[j]);
                            }
                        }
                    }
                }
            });
    

如果您只需要在第一页加载时填充一次,这是我的最佳选择

例:

HTML:
<select id="auto-populated">
    <?php
        //Next three lines you need if you dont have the user_id stored before in your code
        require('db.php');
        session_start();
        $user_id = $_SESSION['user_id'];
        //Selecting only the needed options to put here
        $sql = "SELECT dropdown_value, dropdown_option FROM tbl_dropdown WHERE dropdown_number='your-filter-kriteria-here'";
        $result = mysql_query($sql, $db) or die(mysql_error().': '.$sql);
        //After you got the filtered results from database, print them in the <select>
        echo "<option value=' '>Please select one...</option>";
        while ($item = mysql_fetch_assoc($result)) {
            echo "<option value='".$item['dropdown_value']."'>".$item['dropdown_option']."</option>";
        }
    ?>
</select>

编辑:我看到你需要 asp.net 所以尝试转换这个

简单的问题。我会尝试用你自己想到的方式回答。

0. 您现有的 HTML 代码

Choose your Value:
<select id="dropDown">
    <option>Please Select..</option>
    <option value="101"> CC 101 </option>
    <option value="102"> CC 102 </option>
    <option value="103"> CC 103 </option>
    <option value="104"> CC 104 </option>
    <option value="105"> CC 105 </option>
    <option value="106"> CC 106 </option>
</select>

1. 使用 jQuery 隐藏所有数字

<script>
    $("#dropDown").html("<option>Please Select..</option>");
</script>

2. 使用 jQuery/AJAX 调用数据库,传递 userID 和3.DB 返回基于用户 ID 的值列表

<script>
    $(function()
    {
        var userId = 1; <!--  Read & store the userId here  -->
        $.ajax({
            type: 'POST',
            url: 'server.php', <!--server.pl, server.js, server.asp, server.py whatever-->
            dataType: "json",
            data: {'userId': userId},
            success: function (returnData) //Returns "[101, 102, 103]"
            {          

4. 在下拉列表中显示与从数据库返回的数字具有相同值的选项

                for (var i=0; i<returnData.length; i++)
                {
                    $("#dropDown").append("<option value='"+returnData[i]+"'> CC "+returnData[i]+" </option>");
                }
            }
        });
    });
</script>