角度编辑按钮的 ASP.NET POST 方法

如何解决角度编辑按钮的 ASP.NET POST 方法

我正在为我的 Angular 应用程序创建和编辑按钮。我正在尝试使我的变量（日期、温度 C、温度 F 和我选择的特定行的摘要出现在我为我的组件制作的表单中。应该选择该行并根据 ID 填写表单行。但是，按“编辑”后，我在 API 控制器中收到此错误。

'The parameterized query '(@Date int,@TemperatureC int,@TemperatureF int,@Summary nvarchar' expects the parameter '@Summary'

我相信这是因为我的 ID 变量不可为空。但是，我不确定如何解决这个问题。

EDIT SERVICE 在这里，我创建了我的编辑服务，设置了我的 post 语句并传递了 ID 变量。

 editWeatherList(val: any) {
    return this.http.post(this.baseURL + '/?ID = +',val)
  }

EDIT TS FILE 接下来，我在一个数组中设置我的变量，以便在按下按钮后传递给我的 editWeatherList 服务。

editData(item) {
    var val = { ID: item.ID,Date: item.Date,TemperatureC: item.TemperatureC,TemperatureF: item.TemperatureF,Summary: item.Summary };
    this.service.editWeatherList(val).subscribe(res => {
      alert(res.toString());
    });

编辑 HTML 文件

table class='table table-striped' aria-labelledby="tableLabel">
  <thead>
    <tr>
      <th>
        <button [routerLinkActive]="['link-active']" [routerLink]="['/weatherpage']">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
          </svg>
        </button>
        <button (click)="refreshWeatherList()" style="margin:5px;">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
          </svg>
        </button>
      </th>
      <th>ID</th>
      <th>Date</th>
      <th>Temp. (C)</th>
      <th>Temp. (F)</th>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let forecast of forecasts">
      <td>
        <button type="submit" button (click)="showDiv.element = !showDiv.element; editData(item) ">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
          </svg>
        </button>
        <button type="submit" (click)="deleteData(forecast)" style="margin:5px;">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
          </svg>
        </button>
      </td>
      <td>{{forecast.ID}}</td>
      <td>{{ forecast.Date }}</td>
      <td>{{ forecast.TemperatureC }}</td>
      <td>{{ forecast.TemperatureF }}</td>
      <td>{{ forecast.Summary }}</td>
    </tr>
  </tbody>
</table>


<div *ngIf="showDiv.element; ID">
  <form [formGroup]="weatherForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="form-group">
      <label for="inputDate">Date</label>
      <input type="text" class="form-control" id="inputDate" formControlName="Date" [(ngModel)]="Date">
    </div>
    <div class="form-group">
      <label for="inputTemp">Temperature C</label>
      <input type="text" class="form-control" id="inputTemp" formControlName="TemperatureC" [(ngModel)]="TemperatureC">
    </div>
    <div class="form-group">
      <label for="inputTemp2">Temperature F</label>
      <input type="text" class="form-control" id="inputTemp2" formControlName="TemperatureF" [(ngModel)]="TemperatureF">
    </div>
    <div class="form-group">
      <label for="inputSummary">Summary</label>
      <input type="text" class="form-control" id="inputSummary" formControlName="Summary" [(ngModel)]="Summary">
    </div>
    <button type="submit" class="btn btn-primary" (click)="editData()">Save Changes</button>
  </form>
</div>

HTTP POST 这是我收到的错误。在这一行：myReader = myCommand.ExecuteReader();

[HttpPost]
        public JsonResult Post(int date,int temperatureC,int temperatureF,string summary)
        {
            string query = @"INSERT INTO dbo.WeatherForecast(Date,TemperatureC,TemperatureF,Summary) VALUES(@Date,@TemperatureC,@TemperatureF,@Summary)";

            DataTable table = new DataTable();
            string sqlDataSource = _configuration.GetConnectionString("WeatherAppCon");
            SqlDataReader myReader;
            using (SqlConnection myCon = new SqlConnection(sqlDataSource))
            {
                myCon.Open();
                using (System.Data.SqlClient.SqlCommand myCommand = new SqlCommand(query,myCon))
                {
                   
                    myCommand.Parameters.AddWithValue("@Date",date);
                    myCommand.Parameters.AddWithValue("@TemperatureC",temperatureC);
                    myCommand.Parameters.AddWithValue("@TemperatureF",temperatureF);
                    myCommand.Parameters.AddWithValue("@Summary",summary);

                    myReader = myCommand.ExecuteReader();
                    table.Load(myReader);

                    myReader.Close();
                    myCon.Close();
                }
            }

            return new JsonResult("Success");

        }