how to make HTML form submit-CodePudding

I'm building a web app in .NET using the MVC framework. Never done this and I'm pretty new to this kind of software developing.

I'm creating an HTML form, with an input field in it. As I understand, the default 'submit' will be the return button. I'm trying to let it send an id to the controller but it won't parse anything after the '?'. The form is at the top under the header.

whole page:

@model Web_App.Models.CAN_Waterium_Frame
@using System.Collections.Generic;
@{
    ViewData["Title"] = "Data";
}

<h2>Raw Data</h2>

<form id="searchBar" action="/Data/RawData" method="GET">
<input type="text" placeholder="Search id.." id="id">
</form>

<ul>
    @{
        var list = (List<CAN_Waterium_Frame>)ViewData["data"];
    }
    @foreach (var item in @list)
    {
        System.DateTime dtDateTime = new DateTime(1970,1,1,0,0,0,0,System.DateTimeKind.Utc);
        dtDateTime = dtDateTime.AddSeconds(item.time).ToLocalTime();
        <li>ID: @item.id
                data length: @item.dlc
                raw data: @System.Text.Json.JsonSerializer.Serialize(item.data) 
                time: @dtDateTime.ToString("dddd, dd MMMM yyyy HH:mm:ss") </li>
    }

</ul>

Now, can anybody help me understand what I'm doing wrong here and how to fix it? Is my understanding that after hitting return, this form should do a request to:

https://url/Data/RawData?id=x

but it does:

https://url/Data/RawData?

It does register my hitting of the return button as i see the URL change. Help me understand please.

CodePudding user response：

Your input element doesn't have a name attribute:

<input type="text" placeholder="Search id.." id="id">

The browser uses that attribute to define the "keys" for the key/value pairs that are submitted with form data. So you have a value, but no key. Add your key:

<input type="text" placeholder="Search id.." id="id" name="id">

CodePudding user response：

You should specify the name of the control, in order for it to be sent with the form.

<input type="text" placeholder="Search id.." name="id" />

From: https://www.w3schools.com/tags/att_form_method.asp

Definition and Usage

[...]

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

Notes on GET:

Appends form-data into the URL in name/value pairs

[...]

CodePudding user response：

You need to add a submit type button in the form as follows

<input type=“submit” value=“Submit” />

CodePudding user response：

the form will be submitted based on the names of the fields inside

for example

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <form id="searchBar" action="/" method="GET">
        <input
          name="id"
          value="some value"
          type="text"
          placeholder="Search id.."
          id="id"
        />
      </form>
    </div>
  </body>
</html>

on enter, you should see /?id=some value this values at the URL

you are not getting anything because you have missed the name attribute to the input