htmlとスクリプトで選択されたデータを配列に格納したい

Question

またおせわになります。

【やりたいこと】
やりたいことはRazor Pages がレンダリングした結果の html の select 要素とか input 要素に対して JavaScript, jQuery, Knockout.js を使って
①テキストボックスにコードを入れるとリストで該当コードの選択値が自動に選択される
②追加ボタンを押すと①で選択された選択値が変数に格納され、さらにリスト下に追加される
ようにしたいですが、うまくいきません。
(削除ボタン左側が追加されたもの)

【開発環境】
Visual　Studio 2015
EntityFramework version="5.0.0"
jQuery version="1.7.1.1"
knockoutjs version="2.1.0"
AspNet.Mvc version="4.0.20710.0"
AspNet.Razor version="2.0.20710.0"

public class SelectListItem
{
public SelectListItem();
public bool Selected { get; set; }
public string Text { get; set; }
public string Value { get; set; }
}
List<SelectListItem> emptyList = new List<SelectListItem>();
リストAは下記のように入っています。
{
{code:"001", name:"事業所A", longName:"001:事業所A"},
{code:"002", name:"事業所B", longName:"002:事業所B"},
{code:"003", name:"事業所C", longName:"003:事業所C"},
{code:"004", name:"事業所D", longName:"004:事業所D"}
}
リストは下記のように入っています。
{
{code:"003", name:"事業所C", longName:"003:事業所C"},
{code:"004", name:"事業所D", longName:"004:事業所D"}
}
```ここに言語を入力

function ViewModel() {
self.masters = { company: リストA };
self.currentDatas = { company: ko.observable() };
self.attendDatas = ｛ company: リストB }
self.addData = function () {
var addItem = self.currentDatas"company";
self.attendDatas[type].push(addItem);
}
}

@Html.DropDownList("CompanyCode", emptyList, new { data_bind = "options: masters.division, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
<input type="button" class="small-width" value="追加" data-bind="click: addCompany" />

</td>

Comments

[退会済みユーザー]

以下をお願いします。(1) ～ (3) の追加情報は質問欄を編集して追記願います。

(1) 何を作っているか書きましょう（コードからは ASP.NET MVC のように見えますが、閲覧者がコードを見てなくても分かるように、質問の一行目に）

(2) 開発環境を書きましょう。（OS, Visual Studio のバージョン, .NET Framework or Core どっちなのかとそのバージョンなど）

(3) ソース部分とは何なのか (JavaScript? knockout.js?) 　定義不明な変数が多々あるがそれらは何なのか分かるように書きましょう。

(4) コードは ``` と ``` で囲ってください（``` はバッククォート 3 つ）。インデントされて見やすくなるので。

(5) ASP.NET の話であれば ASP.NET のタグをつけてください。

[退会済みユーザー]

上のコメントで依頼した (4) のみやったようですが、他は無視ですか？　無視なら私は撤退します。他の人のレスに期待してください。

[koko5899]

申し訳ありません。
まだC#に詳しくなくて、どう回答していいかわからない部分が多かったため、修正がうまくできておりませんでした。もう少し修正してみました。よろしくお願いします。

[退会済みユーザー]

Web アプリは ASP.NET MVC か Razor Pages のようですが、このスレッドの問題・課題の範囲に限っては関係ないようですね。

クライアント側だけの話で、ASP.NET がレンダリングした結果の html の select 要素とか input 要素に対して JavaScript, jQuery, Knockout.js を使って「下記選択リストから選択されたデータを変数に格納し、下に追加していきたい」という話と理解しています。

であれば、タグの C#, Razor は関係ないので外してください。

質問文もそのように書き直すことをお勧めします。タグの C#, Razor、表題と質問文の DropDownList という用語、C# のコードなどを見ただけでスルーする人も多いはず。html とスクリプトの話にすれば得意な人が多いようなので見てくれてレスを返してくれる人が多いと思います。

[koko5899]

何度もありがとうございます。修正しました。

[退会済みユーザー]

ASP.NET がサーバーのコード @Html.TextBox(...), @Html.DropDownList(...) からレンダリングする html ソースも記載することをお勧めします。html が分からないとピンポイントな答えは出てこないと思いますが、ASP.NET を知らない人には html がどうなるかは分かりませんので。（自分は Knockout.js は分かりせんので回答できませんが）

[koko5899]

ありがとうございます。全体的に直してみました。

Answer 1

エラーメッセージはちゃんと読んでいますか？

Cannot read property 'code' of undefined ということで、codeプロパティを読みだそうとしている元のオブジェクトがundefinedになっているということです。

365行目（かどうかは質問文からは確定できないが）の item.code == addItem.code でcodeプロパティを参照しています。 item か addItem のどちらかが、または両方が undefined の可能性があります。
まずはそこから調べてみましょう。

Comments

[koko5899]

回答ありがとうございます。おっしゃる通りitem.code == addItem.code で失敗していて、addItemが取れてないようですが、原因がわからずでいます。

[hope_mucci]

SurferOnWwwさんの仰る通り、レンダリング後のHTMLを添付してくれないと他者が現象を再現することができません。レンダリング後のHTMLを本文に追記してください。
また、添付のコード上にはEmployeeModelをコールしている個所がありません。つまり記載外の何かに問題がある可能性があるということです。記載外の内容については回答者側は全く分からないので、ご自分で調べてください。そのobserverは本当に期待通り機能していますか？

[koko5899]

何度もありがとうございます。全体的に直してみました。

[hope_mucci]

全体的に直してみた結果、どのような動作になりましたか。
「うまくいかなかった」だけでは何も伝わりません。
修正した結果、具体的にどのような動作、状態、出力になったのかを見ず知らずの相手にわかるように書きましょう。検証ツールで、consoleに何が出力されたか、も大変重要です。
あと、私も他の方も再三「レンダリング後のHTMLを追記してください」と書かれていますが、どういうわけかrazor記法のみの記載になっています。レンダリング後のHTMLを出せないのか、出したくないのか、どちらなのでしょうか。

またこれは個人的見解ですが、knockout.jsで実装する必要がある機能なのでしょうか。asp.net側だけで実装できる機能なのでは？
それに、knockout.jsをどうしても使わなかければならないのであれば、asp.netからいったん離れて簡単なチュートリアルから使い方を覚えたほうが良いのではないでしょうか。現状のコードからは最低限の使い方も学習されている気配がありません。(applyBindingsとかちゃんと書いていますか？ViewModel関数内のselfが何を表しているかちゃんと知っていますか？)

Answer 2

自分で解決しました。下記部分で選択されたらvalueに格納される想定でしたが、optionsValueとvalueを同時に使用した関係でoptionsValueの値がvalueの値になってしまい、しかも想定通りの形ではなかったためできなかったようです。
なので、valueを取り、別のプログラム上でリストで選択された値を変数に格納するよう処理して解消しました。
@Html.DropDownList("CompanyCode", emptyList, new { data_bind = "options: masters.division, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })

わかりにくい説明に何度も回答下さった方々ありがとうございました。