I have a website where there is 4 columns where the user can select from a Selectmenu where there is 4 items of data in each column.
I have a button and when the user clicks on it, I would like to write our what the user selected in the columns (MyButton_Click). I tried a lot of ways but I do not find out how can I use the values in my program because I get an error:
CS0103 - The name 'Column1' does not exist in the current context in (MyButton_Click) code.
Can somebody help me how can I use the result of the columns in my code and point it out?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CarDatas.aspx.cs" Inherits="WebApplication2.CarDatas" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Car Datas</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: #333;
}
label {
display: block;
margin-bottom: 5px;
}
.date-input, .column-input {
width: 200px;
padding: 8px;
margin-bottom: 15px;
}
.calendar {
position: absolute;
display: none;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
z-index: 1000;
}
.custom-button {
width: 200px;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(function () {
$(".date-input").datepicker({
onSelect: function (dateText, inst) {
$(this).val(dateText);
$(".calendar").hide();
}
});
var columnOptions = '<option value=""></option>';
columnOptions +=
'<option value="make">Make</option>' +
'<option value="_owner">Owner</option>' +
'<option value="center">Center</option>' +
'<option value="subsidiary">Subsidiary</option>';
$(".column-input").html(columnOptions);
});
function showCalendar(dateTextBoxId, calendarId) {
var dateTextBox = $("#" + dateTextBoxId);
var calendar = $("#" + calendarId);
var rect = dateTextBox.offset();
calendar.css({
position: 'absolute',
left: rect.left + 'px',
top: rect.top + dateTextBox.outerHeight() + 'px'
});
if (calendar.is(":hidden")) {
$(".calendar").hide();
calendar.show();
} else {
calendar.hide();
}
}
</script>
</head>
<body>
<h2>Date and Columns Selection</h2>
<form id="form1" runat="server">
<label for="DateFromTextBox">Date From:</label>
<input type="text" id="DateFromTextBox" class="date-input" onclick="showCalendar('DateFromTextBox', 'Calendar1')">
<div id="Calendar1" class="calendar"></div>
<label for="DateToTextBox">Date To:</label>
<input type="text" id="DateToTextBox" class="date-input" onclick="showCalendar('DateToTextBox', 'Calendar2')">
<div id="Calendar2" class="calendar"></div>
<label for="Column1">Column 1:</label>
<select id="Column1" class="column-input"></select>
<label for="Column2">Column 2:</label>
<select id="Column2" class="column-input"></select>
<label for="Column3">Column 3:</label>
<select id="Column3" class="column-input"></select>
<label for="Column4">Column 4:</label>
<select id="Column4" class="column-input"></select>
<br>
<asp:Button ID="MyButton" runat="server" Text="Click Me" OnClick="MyButton_Click" CssClass="custom-button" />
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;
namespace WebApplication2
{
public partial class CarDatas : System.Web.UI.Page
{
protected void MyButton_Click(object sender, EventArgs e)
{
string selectedValueColumn1 = Column1.SelectedValue;
string selectedValueColumn2 = Column2.SelectedValue;
string selectedValueColumn3 = Column3.SelectedValue;
string selectedValueColumn4 = Column4.SelectedValue;
Response.Write($"Selected values: {selectedValueColumn1}, {selectedValueColumn2}, {selectedValueColumn3}, {selectedValueColumn4}");
}
}
}
This question can be easily solved by using ChatGPT (the free version is good enough), but since you asked here, I would like to share my 2 cents:
According to this:
You're trying to get the values from the 4 "SELECT" "Columns", but since you're not using ASP.NET Server controls (runat="server"), you're using plain HTML inputs, you need to assign the attribute "name" to each "input", in your case, the "SELECT" tag.
Assigning attribute "name" is a very basic concept and fundamental of HTML coding, which I think you haven't gone through a proper basic HTML tutorial. It's ok, not a big problem with that. I'm just pointing it out that you have missed the fundamental concept of HTML coding.
At this block:
Add the attribute of "name" to the "Select" tag, all HTML inputs ("SELECT" is one of the input) require the attribute of "name" for a POST request. Therefore, after adding the attribute of "name", it will look something like this:
Then, at your code behind, you can obtain the values like this: