简体   繁体   English

添加数据库填充的下拉Razor

[英]Adding a database populated dropdown Razor

just started learning to make dynamic pages with WebMatrix and have run into a road block. 刚开始学习使用WebMatrix制作动态页面,并且遇到了障碍。 (Long history of static html and some php using notepad++, but this is new to me.) (使用记事本++的静态html和某些php的悠久历史,但这对我来说是新的。)

In short: I'm trying to give people the option of creating a new team entry in the database OR joining an existing team from a html helper dropdown list populated from the database. 简而言之:我试图让人们选择在数据库中创建新的团队条目,或者从数据库中填充的html helper下拉列表中加入现有团队。 I've been trying various ways of doing this for the better part of two days and can't seem to figure it out after extensive searchers here and on ASP.net. 在过去两天的大部分时间内,我一直在尝试各种方法来完成此操作,但在这里和ASP.net上进行了大量搜索之后,似乎无法弄清楚。 I'm also hoping to figure out how to allow either the creation of a new team or joining an existing team already in the DB on the same page without getting commas inserted into the database. 我还希望弄清楚如何允许在同一页面上的数据库中创建新团队或加入现有团队,而无需在数据库中插入逗号。

I've removed all my attempts at a dropdown and am sharing what currently works without the html.dropdown: 我已经删除了所有关于下拉菜单的尝试,并分享了当前没有html.dropdown的情况:

@{
    Validation.RequireField("FName", "Your first name is required");
    Validation.RequireField("LName", "Your last name is required");
    Validation.RequireField("Team", "A team is required to play");
    Validation.RequireField("Pledge", "You must donate to play.");

    var db = Database.Open("BBBT");
    var FName = Request.Form["FName"];
    var LName = Request.Form["LName"];
    var Team = Request.Form["Team"];
    var Pledge = Request.Form["Pledge"];

    if (IsPost && Validation.IsValid()) {
        if(ModelState.IsValid) {
            var insertQuery = "INSERT INTO Players (FName, LName, Team, Pledge) " +
                "VALUES (@0, @1, @2, @3)";
            db.Execute(insertQuery, FName, LName, Team, Pledge);
            Response.Redirect("~/ListTeams");
        }

    }
}

....Snip.... ....片段...

<!DOCTYPE html>
<html>
<head>
 <title>Register</title>
</head>
<body>
 <h1>Register</h1>

 @Html.ValidationSummary("Errors with your submission:")

 <form method="post" action="">
   <fieldset>
     <legend>Join the fun!</legend>
     <div>
       <label>First Name:</label>
       <input name="FName" type="text" size="50" value="@FName" />
      </div>
      <div>
       <label>Last Name:</label>
       <input name="LName" type="text" size="50" value="@LName" />
     </div>
     <div>
       <label>Create a Team</label>
       <input name="Team" type="text" size="50" value="@Team" />
        </div>
       <div>
       <label>Or Joing an Existing Team</label>
<!-- This is where I would like to put the Dropdown list-->
        @Html.DropDownList
        </div>
     <div>
       <label>Pledge:</label>
       <input name="Pledge" type="text" size="50" value="@Pledge" />
     </div>
     <div>
       <label>&nbsp;</label>
       <input type="submit" value="Insert" class="submit" />
     </div>
   </fieldset>
 </form>
</body>
</html>

Any direction would be greatly appreciated! 任何方向将不胜感激! Thank you. 谢谢。

Your will be getting the result in two steps. 您将分两步获得结果。 First Generate the List, then display it. 首先生成列表,然后显示它。

In the code block at the top of the page add this code 在页面顶部的代码块中添加此代码

List<string> Teams = new List<string>();
foreach(var row in db.Query("SELECT DISTINCT Team FROM Players"))
{
Teams.Add(row.Team);
}

and in the place you want the dropdown populate the list 并在您想要下拉列表的地方填充列表

<select name="Team">
@foreach(string Teamname in Teams)
{
<option value="@Teamname ">@Teamname </option>
}
</select>

EDIT: 编辑:

<select name="Team" id="TeamDropdown" onchange="toggleteamcreation()">
    @foreach(string Teamname in Teams)
    {
        <option value="@Teamname ">@Teamname </option>
    }
    <option value"New">Create New Team</option>
</select>
<script>
function toggleteamcreation(){
    if(document.getElementById('TeamDropdown').value=="New"){
        document.getElementById('Create_New_Team').style.display="block";
    }
    else{
        document.getElementById('Create_New_Team').style.display="none";
    }
}
</script>
<div id="Create_New_Team" style="display:none">
   <label>Create a Team</label>
   <input name="Team" type="text" size="50" value="@Team" />
</div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM