【解決方法】HTML テーブルデータからモデルにデータを入力する

[ad_1]

ユーザーのスキル (別名機能) とスキルスコアを取得する MVC アプリケーションがあります。

ViewModel=”ScoresViewModel” であり、スキルとスコアのモデルが含まれています。

public class ScoresViewModel
    {
        public List<ScoreModel> Scores { get; set; }
        public List<CapabilitiesModel> Capabilities { get; set; }
        
    }

スコアモデル:

public class ScoreModel
    {

        public int Id { get; set; }
        public int Capability { get; set; }
        public byte Score { get; set; }

       
    }

機能モデル:

public class CapabilitiesModel
    {
        public int Id { get; set; }
        public string CapabilityName { get; set; }
        public string Description { get; set; }


    }

(Web API を使用して) スキルのリストを取得し、HTML テーブルを使用してそれらを表示することはできますが、Web UI (HTML\Blazor) でこれらの各スキルのスコアを取得する必要があります。

私のUI:

@model CapabilityTracker.ViewModels.ScoresViewModel

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

<table class="table">
    <tr>
        <th>
            Capability Name
        </th>
        <th>
            Score
        </th>
    </tr>

    @foreach (var item in Model.Capabilitites)
    {

<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Id)
        @Html.DisplayFor(modelItem => item.CapabilityName)


    </td>
   
    <td>
        <input type="number" min="0" max="5" step="1" name="txtScore" />

    </td>
    
</tr>
    }


</table>
}

テーブルからデータを抽出してScoresModelにデータを入力する方法を理解するのに苦労しています（または、テーブルからのデータを含むScoreModelsのリストをより具体的にする..

Scores モデルはページの起動時に本質的に空であり、提出物には複数のスコアモデル (各スキルが 1 つのスコアを保持する) があるため、何にもバインドできない (とは思わない) ため、リストを作成する必要があります。 HTML テーブルのデータからの ScoreModels の

皆さんが助けてくれることを願っています

私が試したこと：

問題のコードスニペットを参照してください

POST API を介してプッシュバックするスコアモデルのリストまたはコレクションを作成する方法を理解しようとして失敗しました。

解決策 1

You need to change the method to take a list.

[HttpPost]
public async Task<ActionResult<List<Score>>> PostScore(List<Score> scores)
{
    _context.Scores.AddRange(scores);
    await _context.SaveChangesAsync();

    return CreatedAtAction("GetScores", scores);
}
And change the UI code accordingly, I am not writing the complete code.

public ActionResult NewSubmission(List<ScoreModel> newScoreSubmissions)
{
    List<Score> scores = new List<Score>();
    foreach (var newScoreSubmission in newScoreSubmissions)
    {
        scores.Add(new Score
        {
            User = newScoreSubmission.User,
            SubmissionPeriod = newScoreSubmission.SubmissionPeriod,
            Capability = newScoreSubmission.Capability,
            Score1 = newScoreSubmission.Score1
        });
    }

    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri(Baseurl + "/api/Scores/PostScore");

        var postTask = client.PostAsJsonAsync<List<Score>>(client.BaseAddress, scores);
        ...
    }

    return View(newScoreSubmissions);
}