根据userID限制下拉选项

时间:2014-04-23 19:34:01

标签: javascript jquery asp.net ajax database

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

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

解决方案我想到了:

  1. 使用jQuery隐藏所有数字
  2. 使用jQuery / AJAX调用数据库,传递userID
  3. DB根据userID
  4. 返回值列表
  5. 在下拉列表中显示与从数据库返回的数字具有相同值的选项
  6. 让我们说这是我的 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没有很多经验,所以欢迎任何有助于我实现最终目标的建议。

    编辑/注意:这听起来很愚蠢....安全在这里并不是一件大事。这将在公司内部网站上使用,如果用户觉得需要黑客攻击并选择不同的号码,那么这真的不重要。我也没有预见到公司的任何员工有希望/需要/想要选择不同于他们允许的选项。

    此外,列表 必须 预先填充,然后隐藏数字。它是我正在使用的平台的设置方式,因此我必须使用show / hide或类似的东西。

8 个答案:

答案 0 :(得分:5)

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

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

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

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

总之这样做:

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

答案 1 :(得分:2)

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

这里我们继续编码。我将尝试解释我在写什么以及我是如何写作的;因为你是新手: - )

HTML代码

您的工作的HTML代码很简单,因为

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

获取UserId

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

的jQuery

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

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

现在,使用jQuery可以获得此输入的值。这将是

的代码
var userId = $('#userId').val();

ASP.NET

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

WebSecurity.CurrentUserId;

它会给你一个整数值。哪个是当前登录用户的userId。

WebSecurity

的用法

WebSecurity如下面的链接所述,是一类数据。可以在您的应用程序中使用,以减少代码并帮助您以更好的速度获得用户的属性。

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

以下是使用WebSecurity的示例。就像你在jQuery中创建一个变量并获得它的价值一样。您可以使用此方法获取值。

jQuery方法

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的链接中学习Class和其他内容的语法。 : - )

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
  }
});

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

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

从数据库获取数据。

如果你是数据库和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

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

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

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

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

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

P.S发出响应的其他方法(实际方法),使用Actuall HttpResponse类,然后给它赋值。喜欢这个

Response.Write("Hello World!");

如果你写上面一行,它会把这个字符串添加到你的select语句中(虽然非法),但这会让你理解它的用法。

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

答案 2 :(得分:1)

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

  

列表将预先填充客户端(来自我无法访问/修改的服务器)然后AJAX调用另一个DB(简单,两列)然后将值返回到原始AJAX调用,其中然后JS隐藏未返回的值(或显示返回的值,如果它们最初被隐藏的话。)

为什么不创建一个&#34;统一&#34;服务(在服务器上),以便您只进行一次AJAX调用(来自客户端)?

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

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

更多信息:

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

最简单的事情是:

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

答案 3 :(得分:1)

我认为一个好方法就是为所有用户使用JSON。 为具有选项的用户准备json数组,并根据用户对其进行渲染以填充选项。 例如

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

答案 4 :(得分:1)

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

例如当一个按钮点击一个ajax发送命令到服务器端语言(php),并且php proccess那个命令并显示一个合适的响应:

$("#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();';
}
}

?>

答案 5 :(得分:1)

直截了当的问题。我会尝试以你想象的方式回答。

<强> 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调用数据库,传递用户ID&amp; 第3。 DB根据userID

返回值列表
<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>

答案 6 :(得分:1)

既然你这样说 - 你已经预先填充了参赛作品,我会采用这种方法 -

  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]);
                            }
                        }
                    }
    
                }
            });
    

答案 7 :(得分:1)

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

示例:

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所以尝试转换这个