【问题标题】:ASP.NET/HTML - How would I update an SQLDataSource with a <select><option>?ASP.NET/HTML - 如何使用 <select><option> 更新 SQLDataSource?
【发布时间】:2021-12-27 14:57:45
【问题描述】:

我有一个 ASP.NET HTML 网站,我想在其中使用下拉菜单更新我的 SQLDataSource SELECT 命令。用户可以选择按日期、持续时间或播放器排序,GridView 将更新显示来自我的 mdf 数据库的新排序结果。我真的不知道如何处理这个问题,因为我对 ASP.NET 还很陌生。我可以做一些关于如何去做的指针,以及使用什么方法。我可以谷歌教程,问题是知道谷歌什么。任何建议都非常感谢:) 我的代码:

    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="RunsData">
            <Columns>
                <asp:BoundField DataField="PlayerId" HeaderText="PlayerId" SortExpression="PlayerId" />
                <asp:BoundField DataField="Duration" HeaderText="Duration" SortExpression="Duration" />
                <asp:BoundField DataField="VersionId" HeaderText="VersionId" SortExpression="VersionId" />
                <asp:BoundField DataField="DateUploaded" HeaderText="DateUploaded" SortExpression="DateUploaded" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="RunsData" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [PlayerId], [Duration], [VersionId], [DateUploaded] FROM [Run] ORDER BY [Duration]"></asp:SqlDataSource>
    </form>
    <div>
        <label class="label" for="version">Version: </label>
        <select name="version" id="version">
            <option value="lev1">Level 1</option>
            <option value="lev1to3">Level 1-3</option>
            <option value="lev8">Level 8</option>
            <option value="lev17">Level 17</option>
        </select>
        <label class="label" for="sortby">Sort By: </label>
        <select name="sortby" id="sortby">
            <option value="duration">Duration</option>
            <option value="date">Date</option>
            <option value="player">Player</option>
        </select>
    </div>
</div>

【问题讨论】:

  • 用 asp:DropDownList 替换选择列表,然后您可以在服务器上创建一个在索引更改时触发的方法,以更新/修改 RunsData 中用于填充 GridView1 的选择命令
  • 您可以使用服务器控件执行此操作。 但是如果您这样做,则页面将需要从头开始重新加载,并且每次用户更改排序顺序时您都需要重新运行查询。相反,我希望通过 javascript 来做到这一点。它将帮助您的 Web 服务器更好地扩展,并使页面更具响应性。

标签: html sql asp.net


【解决方案1】:

好的,首先,我认为最好将过滤器放在网格的顶部(上方)而不是下方? (只是一个想法)。

事实上,更好的办法是将两个组合框直接放入网格标题中 - 更好!!!

但是,让我们一步一步来。

首先,我建议我们在网页中转储(删除)数据源。可以很方便,向导会生成它们-非常感谢-一切都很好。然而,即使我经常使用向导来创建 GV,我也会炸掉数据源并使用代码。什么时候使用代码来填充 GV 是个好主意?

为什么当然要过滤它!!!

那么,让我们这样做:

删除/移除 Sqldata 源 - 我们不会使用它。

从 GV 中删除它 - DataSourceID="RunsData"

另外,您清楚地使用向导来创建和设置该 GV,但现在使用选择 html?为什么不使用下拉列表?向导不仅可以为您构建它们(与 GV 一样,它们还具有丰富的 .net 事件模型。而且您可以像 GV 一样推动、驱动下拉列表(它们对数据源友好)。

所以,我们现在假设这个标记:

    <div style="float:left">
    <label class="label" for="version">Version: </label>
        <asp:DropDownList ID="cboVersion" runat="server" Width="150px">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem Value="1">Level 1</asp:ListItem>
            <asp:ListItem Value="1-3">Level  1-3</asp:ListItem>
            <asp:ListItem Value="8">Level 8</asp:ListItem>
            <asp:ListItem Value="17">Level 17</asp:ListItem>
        </asp:DropDownList>
    </div>

    <div style="float:left;padding-left:25px">

        <label class="label" for="sortby">Sort By:</label>
        <asp:DropDownList ID="cboSortBy" runat="server" Width="150px">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem Value="duration">Duration</asp:ListItem>
            <asp:ListItem Value="DateUploaded">Date</asp:ListItem>
            <asp:ListItem>Player</asp:ListItem>
        </asp:DropDownList>

    </div>
    <div style="clear:both;height:10px"></div>  <%-- Start new line for grid --%>

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="RunsData">
        <Columns>
            <asp:BoundField DataField="PlayerId"     HeaderText="PlayerId"  />
            <asp:BoundField DataField="Duration"     HeaderText="Duration"  />
            <asp:BoundField DataField="VersionId"    HeaderText="VersionId"  />
            <asp:BoundField DataField="DateUploaded" HeaderText="DateUploaded" />
        </Columns>
    </asp:GridView>
</form>

所以,请注意,就像 GV 一样,将下拉列表作为编辑项选项,如下所示:

然后你得到这个:

另外,当您想要级别说 1-3 时,该列是数字类型吗?

如上所述,我将过滤器放在网格的顶部。由于您将文件管理器放置在网格下方?你必须解释这个目标——大约 20 年来没有在网格底部看到过滤器——也许是一些桌面应用程序?但超级罕见。既然这个选择是超级稀有的?那么您可能有充分的理由,但我将过滤器放在了顶部。事实上,我们会/可以考虑将下拉菜单放在 GV 的标题中(这是允许的!!!)。但是,嘿,一步一步。

我也不懂,看到页面需要两个表格吗? (同样,这可能是一个原因,但你最好有一个很好的选择的理由)。

所以,我们现在有了这个:

    <div style="float:left">
    <label class="label" for="version">Version: </label>
        <asp:DropDownList ID="cboVersion" runat="server" Width="150px" AutoPostBack="true"> 
            <asp:ListItem></asp:ListItem>
            <asp:ListItem Value="1">Level 1</asp:ListItem>
            <asp:ListItem Value="1,3">Level  1-3</asp:ListItem>
            <asp:ListItem Value="8">Level 8</asp:ListItem>
            <asp:ListItem Value="17">Level 17</asp:ListItem>
        </asp:DropDownList>
    </div>

    <div style="float:left;padding-left:25px">

        <label class="label" for="sortby">Sort By:</label>
        <asp:DropDownList ID="cboSortBy" runat="server" Width="150px" AutoPostBack="true" >
            <asp:ListItem></asp:ListItem>
            <asp:ListItem Value="duration">Duration</asp:ListItem>
            <asp:ListItem Value="DateUploaded">Date</asp:ListItem>
            <asp:ListItem>Player</asp:ListItem>
        </asp:DropDownList>

    </div>
    <div style="clear:both;height:10px"></div>  <%-- Start new line for grid --%>

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        Width="30%" CssClass="table">
        <Columns>
            <asp:BoundField DataField="PlayerId"     HeaderText="PlayerId"  />
            <asp:BoundField DataField="Duration"     HeaderText="Duration"  />
            <asp:BoundField DataField="VersionId"    HeaderText="VersionId"  />
            <asp:BoundField DataField="DateUploaded" HeaderText="DateUploaded" />
        </Columns>
    </asp:GridView>

请注意,我们为两个组合框添加/允许/有一个空白选项。

好的,现在我们的代码像这样加载网格:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        loadgrid()
    End If

End Sub
Sub loadgrid()

    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand("SELECT PlayerId, Duration, VersionId, DateUploaded FROM [Run]", conn)

            ' add filter
            Dim strWhere As String = ""
            If cboVersion.Text <> "" Then

                If InStr(cboVersion.SelectedItem.Value, "-") = 0 Then
                    ' one value
                    cmdSQL.CommandText &= " WHERE VersionID = @id"
                    cmdSQL.Parameters.Add("@id", SqlDbType.Int).Value = cboVersion.SelectedItem.Value
                Else
                    ' we have  range
                    Dim MyRnage() As String = Split(cboVersion.SelectedItem.Value, "-")
                    cmdSQL.CommandText &= " WHERE VersionID is between @lower and @upper"
                    cmdSQL.Parameters.Add("@lower", SqlDbType.Int).Value = MyRnage(0)
                    cmdSQL.Parameters.Add("@upper", SqlDbType.Int).Value = MyRnage(1)
                End If

            End If


            ' add order by
            If cboSortBy.Text = "" Then
                cmdSQL.CommandText &= " ORDER BY Duration"
            Else
                cmdSQL.CommandText &= " ORDER BY " & cboSortBy.SelectedItem.Value
            End If

            Dim rstData As New DataTable
            conn.Open
            rstData.Load(cmdSQL.ExecuteReader)
            GridView1.DataSource = rstData
            GridView1.DataBind()

        End Using
    End Using

End Sub

因为我们有自动回发,那么对于排序方式组合,过滤方式,我们这里有两个事件存根。

Protected Sub cboVersion_SelectedIndexChanged(sender As Object, e As EventArgs) Handles cboVersion.SelectedIndexChanged
    loadgrid()
End Sub

Protected Sub cboSortBy_SelectedIndexChanged(sender As Object, e As EventArgs) Handles cboSortBy.SelectedIndexChanged
    loadgrid()
End Sub

编辑:

接下来的问题是 TEST4 是从哪里来的?为什么当然是我自己的设置。

从VS菜单,项目->“我的项目”->设置。

我们去设置,然后这样做:

然后在上面点击 [...] 并获得连接字符串生成器。

我的意思是,您可以手动编辑网络配置,但这是一种人类的折磨,而且使用上述设置非常容易。因此对于应用程序设置,您可以使用上述内容为您的应用程序创建设置。说公司名称,或连接字符串,或其他任何东西。这些设置为您放置在 web.config 中。因此,您不仅限于连接字符串,而是各种常量设置,例如公司名称,可能是公司地址等。

【讨论】:

  • 这太好了,非常感谢。我有 1 个错误,即 Using conn As New SqlConnection(My.Settings.TEST4) 行,TEST4 是否意味着可能被替换?错误是TEST4 Is not a Member of 'MySettings'
  • 好吧,假设您以前创建和使用过应用程序设置?查看我的编辑 - 是的,我创建了一个名为 TEST4 的连接字符串。我会假设您会选择一个更好的名称 - 请参阅上面的编辑。使用应用程序设置可以追溯到很长一段时间 - 假设是使用 Visual Studio 的基本技能。但是,请参阅上述帖子末尾的我的新编辑 - 我展示了我创建该设置的方式和位置。因此,与您为变量选择名称并没有太大区别,您可以选择在代码中的所有内容附近使用什么名称
  • 感谢您的解释,您可能会说我对 ASP 相当陌生。经过一些调试,代码在最初启动时似乎可以工作。它调用第一个loadgrid() 并成功地将gridview 排序为我使用的任何SQL 命令,但是我之后在菜单中选择的任何内容似乎都没有再次调用loadgrid。这是我的代码,因为很可能我把东西放在了错误的地方pastebin.com/HvVkGAXJ,这是我的调试输出pastebin.com/iNdz8BJW
  • 您可以在此处粘贴代码 - 让许多读者更容易看到问题。请记住,我没有您的数据 - 所以该代码“不在顶部”或所谓的“空中代码”。我确实注意到我使用了 1,3 作为值,但我检查/测试了“-”并基于“-”进行拆分。因此,下拉列表中的 1,3 值需要为 1-3 才能使该选择起作用。您拥有的大多数代码看起来都不错 - 并且适合在一些调试写入行中使用 - 对您有好处!!!我会仔细检查我用于排序的字段名称 - 它们可能输入错误。因此,该代码看起来相当不错。检查下拉列表中的列名
猜你喜欢
  • 2012-12-05
  • 1970-01-01
  • 2019-05-03
  • 2021-10-24
  • 1970-01-01
  • 1970-01-01
  • 2020-03-10
  • 1970-01-01
  • 2020-08-11
相关资源
最近更新 更多