ASP.NET MVC 中使用数据库实现动态下拉列表绑定

• 下载 team_statistics.rar - 9.2 MB
• 下载 team_statistics.zip - 10.1 MB

引言

这是我的第二个技巧/窍门，这个技巧/窍门是关于如何在 ASP .NET MVC 中创建一个动态下拉列表。在 MVC 中，大多数用户发现很难将数据绑定到控件。所以在这里我将展示一个简单的应用程序演示，其中我们将从数据库中运行时将数据绑定到下拉列表。

背景

这个演示应用程序包含 javascript 和 ADO.NET 的简单逻辑。只需了解一点 ASP.NET MVC 和 javascript 的概念就足以理解这个演示。

设计

目的 - 现在我的目标是创建一个包含 3 个下拉列表的应用程序 team_statistics。

第一个下拉列表 - 它将包含比赛类型，这些数据将来自数据库。

第二个下拉列表 - 从第一个下拉列表中选择比赛类型后，第二个下拉列表应自动从数据库生成队伍。

第三个下拉列表 - 从第二个下拉列表中选择队伍类型后，第三个下拉列表应生成球员姓名。

因此，要创建这个应用程序，我们需要三个表。

以下是创建应用程序的步骤

1. 打开 Visual Studio 并选择新项目。
2. 在 Web 模板中，选择具有空模板的 ASP.NET MVC4 WEB 应用程序。
3. 现在添加一个 Home Controller 和一个用于 Index Action Method 的视图页面。
4. 现在在您的项目中添加一个数据库文件 .mdf 文件。可以通过右键单击 App_data 文件夹并添加数据库文件来添加它。
5. 在数据库文件中，添加 3 个表，名称分别为 Player、Team、TounamentType。
6. 下图给出了关于数据库的完整概念。

.

使用代码

这是从数据库中获取数据并将数据传递到 UI 的完整代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
using System.Data.Sql;


namespace team_statistics.Controllers
{

   public class HomeController : Controller    
    {
       string connection = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; 
       List<selectlistitem> team = new List<selectlistitem>();             
       List<selectlistitem> player = new List<selectlistitem>();      //declare the 3 list object
       List<selectlistitem> tournament = new List<selectlistitem>();
       public ActionResult Index()
       {
          ViewBag.var1 = GetOptions();   //first request come and move to this method
          ViewBag.var2 = team;  
           ViewBag.var3 = player;
           return View();
       }     
                      //var1,var2,var3 are the objects to pass the data from controller to index
          
       
 private SelectList GetOptions()           //fetch the tournament type details from the table
  {
    using (SqlConnection conn = new SqlConnection(connection))
      {
         conn.Open();
          SqlDataReader myReader = null;
          SqlCommand myCommand = new SqlCommand("SELECT Id, Tournament FROM TounamentType", conn);
           myReader = myCommand.ExecuteReader();
            while (myReader.Read())
             {

            tournament.Add(new SelectListItem { Text = myReader["Tournament"].ToString(), Value =             myReader["Id"].ToString() });
             }
      
              conn.Close();
              return new SelectList(tournament, "Value", "Text", "id");  //return the list objects
               
            }
        }

   
     
        
 public JsonResult Team(string name)  //fetch the team details from database
     {
       using (SqlConnection conn = new SqlConnection(connection))
         {
            conn.Open();
            SqlDataReader myReader = null;
            SqlCommand myCommand = new SqlCommand("select Team,Id from Team where Tournament =                 '" + name + "' ", conn);
            myReader = myCommand.ExecuteReader();
            while (myReader.Read())
             {
               team.Add(new SelectListItem { Text = myReader["Team"].ToString(), Value =                         myReader["Id"].ToString() });
             }
            }
           return Json(team, JsonRequestBehavior.AllowGet); //return the list objects in json form
        }


   public JsonResult Player(string name) // fetch the details of player from database
        {
           using (SqlConnection conn = new SqlConnection(connection))
            {   
                conn.Open();
                SqlDataReader myReader = null;
                SqlCommand myCommand = new SqlCommand("select Player,Id from Player where Team =                  '" + name + "' ", conn);
                myReader = myCommand.ExecuteReader();
                while (myReader.Read())
                {
                 player.Add(new SelectListItem { Text = myReader["Player"].ToString(), Value =                     myReader["Id"].ToString() });
                }
            }
            
         return Json(player, JsonRequestBehavior.AllowGet); //return the list objects in json form

        }
        }

       
    }

现在我将展示此应用程序的 UI。

 <h2>Index</h2>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script src="../../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>

Tournament    @Html.DropDownList("var1","Choose tournament")
Team          @Html.DropDownList("var2","Choose team")  
Player        @Html.DropDownList("var3", "Choose player")
                                   //dropdown with name var1, var2,var3 and with viewbag object
<script type="text/javascript">    //initial var2, var3 are empty 
                                  //dropdownlist name and viewbag object name must be same

$(function () {     
      $("#var1").change(function () {             
           var name = $("#var1 :selected").text();  //if user select the tournament 
           var url = 'Home/Team'; 
            var data1 = { "name": name };
       $.post(url, data1, function (data) {    //ajax call
           var items = [];
           items.push("<option value=" + 0 + ">" + "Choose team" + "</option>"); //first item
           for (var i = 0; i < data.length; i++) {
           items.push("<option value=" + data[i].Value + ">" + data[i].Text + "</option>"); 
          }                                         //all data from the team table push into array
            $("#var2").html(items.join(' '));  
      })                                            //array object bind to dropdown list
   }); 

    $("#var2").change(function () {                  //same logic for 3rd dropdown list
          var name = $("#var2 :selected").text();

          var url = 'Home/Player';  
           var data1 = { "name": name };
      $.post(url, data1, function (data) { 
             var items = [];
             items.push("<option value=" + 0 + ">" + "Choose Player" + "</option>"); 
             for (var i = 0; i < data.length; i++) {
        items.push("<option value=" + data[i].Value + ">" + data[i].Text + "</option>");
            }
       $("#var3").html(items.join(' '));  
       }) 
   }); 

});

</script>

<input type="submit" value="submit" />

结果

这是我们的最终 UI 页面，它将显示结果。

在我们的最终页面中，我们可以看到有三个下拉列表。因此，如果用户从下拉列表中选择比赛，则将根据比赛显示队伍，如果我们从下拉列表中选择队伍，则将根据队伍显示球员。

为了获得完整的概念，您可以下载并调试该应用程序。

运行此应用程序的重要要点

在 Web.Config 文件中更改连接字符串。

 <connectionStrings>
 <add name="DBCS" connectionString="Data Source=.\SQLEXPRESS; 
 AttachDbFilename=E:\team_statistics\team_statistics\App_Data\Team.mdf;
 Integrated Security=True; User Instance=True"/>
   </connectionStrings>  // change the connection string

步骤 1：要更改连接字符串，请右键单击 mdf 文件 -> 属性 -> 复制地址并替换 attachDbfilename。

现在，在此应用程序中，您可以修改并添加一些额外的功能，例如保存用户数据、在下拉列表中添加新数据等。

我希望您喜欢它，并从这篇文章中了解了使用 JavaScript 进行动态下拉列表绑定的概念。下次我将发布一些新的技巧/窍门，直到那时享受...:)

如果存在一些错误或错误的概念，请在下面评论，因为它对我有所帮助。