常連

**質問**
Modelと連結したViewの値について、int型の値を値に応じてstring型の異なる値で表示することはできないのだろうか、と思い質問投稿しました。

**現在の状況**
Modelを作成しデータベースと接続。その後、Scaffolding機能を用いてViewとModelを作成しました。

以下、具体的に質問内容を記します。
例えば、Viewに記された次の行について、(modelItem => item.AreaId)の値がModelで定義したデータモデルクラスAreaでデータベーステーブルに保存したIdと合致したAreaNameを表示するように変更したいです。

図をもって説明すると、現在「地域」「カテゴリー」「ユーザー名」で表示されているこれらの項目について、地域(1=>福岡)、カテゴリー(2=>車)、ユーザー名(高坂京介)のような感じで表示したいです。

![![イメージ説明](6a2e44041f7236c30062811d4569caa2.png)](c3085d4817b301e93b2462f21f4cbf02.png)

```C#
@Html.DisplayFor(modelItem => item.AreaId)
```

```C#
   public class Area
    {
        public int Id { get; set; }
        public int AreaName { get; set; }
    }
```



Modelの全体は以下の様に定義してあります。
```C#
using System.ComponentModel.DataAnnotations;
using System.Data.Entity;

namespace ForumMVC.Models.Forum
{
    class ForumModels
    {
    }

    public class Area
    {
        public int Id { get; set; }
        public int AreaName { get; set; }
    }

    public class Topic
    {
        public int Id { get; set; }
        [Required]
        [Display(Name = "地域")]
        public int AreaId { get; set; }
        [Required]
        [Display(Name = "カテゴリー")]
        public int CategoryId { get; set; }
        [Required]
        [Display(Name = "タイトル")]
        public string Title { get; set; }
        [Required]
        [Display(Name = "本文")]
        public string Contents { get; set; }
        [Required]
        [Display(Name = "ユーザー名")]
        public int TopicOwnerId { get; set; }
    }

    public class ForumConnection : DbContext
    {
        public DbSet<Topic> Topics { get; set; }
    }
}
```

Viewの全体は以下の様に定義してあります。
```C#
@model IEnumerable<ForumMVC.Models.Forum.Topic>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.AreaId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CategoryId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Contents)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TopicOwnerId)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.AreaId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Contents)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TopicOwnerId)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>
```

Controllerは以下の様に定義してあります。(必要そうな所だけ抜粋)
```C#
        // GET: NewTopic
        public ActionResult Index()
        {
            return View(db.Topics.ToList());
        }
```


自分でも解決を試みようとは思ったのですが、データセットクラスを複数のテーブルから作成するなどで対処するのではないかと考えたのですが、手が付けられない状態です。
長文の質問投稿になり申し訳ありませんが、宜しくお願いします。


**使用環境等**
Windows7
VS2017
ASP.NET MVC5
Net Framework 4.6.1

ASP.NET で Razor 記述部において表示と値を異なるものにする方法について

###### 環境
.Core3.1　
C#

###### 現象
Ajax の Post でクライアントからJsonデータを送り、サーバー側のWebAPIコントローラーでそのJsonデータを受け取りたいのですが、データがnullになって困っています。

同様の質問を確認して試行錯誤しているのですが成功しないため、どなたかお知恵をお借りしたいです。



###### クライアントからの送信データ
```ここに言語を入力
{ str : "ABC" }
```

下記にあるようにプログラムし、
Getメソッドでは、サーバー側で値の取得に成功しましたが、
Postメソッドでは、サーバー側メソッドの引数がnullになってしまいます。



## ためしたプログラム（サーバー側）

```C#
[Route("api/Test")]
[ApiController]
public class TestController : ControllerBase
{
    [HttpGet("get1")]
    public string GetData([FromQuery] string str)
    {
        Debug.WriteLine(str);
        return "";
    }

    [HttpPost("post1")]
    public void PostData(string str)
    {
        Debug.WriteLine(str);
    }
}
```

## ためしたプログラム（クライアント側）
```C#
/* テスト用Getメソッド */
function button_get_click() {
    var pUrl = "/api/Test/get1";

    $.ajax({
        type: "GET",
        url: pUrl,
        cache: false,
        dataType: "json",
        data: { str : "ABC" },
        async: false,
        success: function (data) {
            console.log("success");
        }
    });
};

/* テスト用Postメソッド */
function button_post_click() {
    var pUrl = "/api/Test/post1";

    $.ajax({
        type: "POST",
        url: pUrl,
        cache: false,
        contentType: 'application/json',
        dataType: "json",
        data: JSON.stringify({ str: "ABC" }),
        //data: { str: "ABC" } ←これでもやはりnullでした
        async: false,
        success: function (data) {
            console.log("success");
        }
    });
};
```

◆Postもサーバー側には到達しているのですが、引数がnullになってしまいます。

◆ブラウザ(Edge)でF12を押し、ネットワークの要求本文には「{"str":"ABC"}」が設定されていることを確認しました。


よろしくお願いいたします。

(Ajax)Postでdataを送っていますが、サーバーのコントローラーで受け取ることができない

ASP.NET MVCの学習で検索機能を作成しています。検索条件モデルSearchCondListをビューからコントローラーへPOSTし条件にあったデータをDBから抽出したいのですが、タイトルの現象を修正できずこちらを利用させて頂きました。
コントローラーの[HttpPost]側の処理を通っていることはブレークポイントで確認できており、また_modelのRegNoの値がNULLとなっていることを確認できたので、ビューからコントローラーへパラメータを受け渡すモデルの記述が正しくないのかと考えています。よろしくお願い致します。


### 該当のソースコード
####Model  


```ここに言語を入力
public class SearchListModels
    {
        /// <summary> コンストラクタ </summary>
        public SearchListModels() { }
       
        // 参加者リスト
        public List<SearchViewModel> SearchList { get; set; } = new List<SearchViewModel>();

　　// 検索条件リスト
        public SearchCondModel SearchCondList { get; set; } = new SearchCondModel();

    }

    //参加者モデル
    public class SearchViewModel     {
        /// ID </summary>
        public string Id { get; set; }

        /// <summary> 参加者番号 </summary>
        public string RegNo { get; set; }
　　・
　　（以下検索条件モデルと同じ）
　　・
　　・
　　｝


    　//検索条件モデル
    　public class SearchCondModel
    　{
        /// <summary> ID </summary>
        public string Id { get; set; }

        /// <summary> 参加者番号 </summary>
        public string RegNo { get; set; }
　　・
　　（以下参加者モデルと同じ）
　　・
　　・
　　｝

```

---

###Controller
```ここに言語を入力
    public class SearchController : Controller
    {
        // 初期化
        ISearchService _service;

        // コンストラクタ－
        public SearchController()
        {
            _service = new SearchService();
        }

　　//画面起動時
        public ActionResult Index()
        {
            SearchCondModel _model = new SearchCondModel();
            _model.Id = ViewBag.Id;

            // SearchServiceのDBContextにアクセスしデータ抽出
            return View(_service.GetList(_model));
        }

　　//ポスト時処理
        [HttpPost]
        [ValidateAntiFoeryToken]
        public ActionResult Index(SearchCondModel _model)
　　（ここで_modelのRegNoはNULLとなっており、ビューから検索条件をうけとれていない。）
        {
            _model.Id = ViewBag.Id;

            // SearchServiceのDBContextにアクセスしデータ抽出
            return View(_service.GetList(_model));
　　（ここで検索条件なしの場合のデータを取得している。）
　　
        }
    }


```
---

###View
```ここに言語を入力
Index.cshtml

           @*検索条件入力テキストボックス*@
            @using (Html.BeginForm("Index", "Search", FormMethod.Post))
            {
                @Html.AntiForgeryToken()
                @Html.TextBoxFor(x => x.SearchCondList.RegNo)
　　　　（ここでコントローラー側にRegNoを渡せていない。）
            }
 　　　・
 　　　・
 　　　・
 　　　@*検索結果一覧*@
            <table>
                @foreach (var item in Model.SearchList)　
                {
                    <tr><td>
                            @Html.DisplayFor(modelItem => item.RegNo)
　　　　　　　（ここで条件なしの検索結果は取得できている。）
                    </td></tr>
 　　　   ・
 　　　   ・
 　　　   ・
            　}
            </table>

```

### 試したこと

@Html.TextBoxFor(x => x.SearchCondList.RegNo)を@Html.TextBoxFor(Model => Model.SearchCondList.RegNo)とした場合は、検索結果一覧の@foreach (var item in Model.SearchList)と競合したので、xとしています。






### 開発環境（追記しました。）
windows 10 pro
VisualStudio 2015 Update3
ASP .NET MVC 5
.NET FrameWork 4.6.1
EntityFramework 6.0
C# 6.0
DB:SQLServer 2017

ASP.NET MVC POST時に引数でModelの値をアクションメソッドに渡せない。

### ビュー・ヘルパーFor型(TextBoxFor)使用時に、nameを指定したい

**__前提・実現したいこと__**
TextBoxForで、modelに紐づいた?nameではなく、@Html.TextBoxを使用する際に指定したnameを<input>タグに付けたい

**__環境__**
ASP.NETMVC5
VisualStudio2013
c#

**__発生している問題・エラーメッセージ
該当のソースコード__**

↓↓↓求めている形↓↓↓
**<input class="form-control input-information" id="hoge" name="ABC" type="text" value="ほげ">**

@Html.TextBoxForを用いて、上記の形で出力したい。

@Html.TextBoxFor(m => item.MEMBER.NAME, new { @class = "form-control input-information" ,name = "ABC" })
↑上記でnameをABCと明示しても、nameがABCとならず、

<input class="form-control input-information" id="item.MEMBER.NAME" name="item.MEMBER.NAME" type="text">
のような感じで出力されます。

@Html.TextBoxForではなく、
@Html.TextBox("ABC",item.MEMBER.NAME, new { @class = "form-control input-information"})とすれば、
求めている形で出力されます。


**__試したこと__**
下記サイトの内容を試してみても、自分で指定したnameがつかないです。
https://code.i-harness.com/ja/q/5c6f89

**__補足__**
nameの箇所以外、不必要そうなところは削除していますので「こういうhtmlにはならない、おかしい」と思われるかもしれませんが、そこはスルーしてください。
知りたいことは、htmlヘルパー(TextBoxFor)を使用した際にnameを指定することが可能なのか、もし可能ならその方法を知りたい、ということです。
よろしくお願いします。

**__画面イメージ__**
![イメージ説明](04995550e6760ae8bf8ecea29c37f178.png)
![イメージ説明](418466dc1087b480f2015c86e4f3c45e.png)

**__追記__**
>  ＞EditorFor を利用すると、モデルのプロパティの型によってレンダリングされる html 要素が適切に選ばれる

EditorForがモデルに紐づいたフォームを作るというのは理解していたのですが、
テキストボックスならTextBoxFor、
チェックボックスならCheckBoxFor、
という風に、ソース上で明示した方がわかりやすいんじゃ？
と、思うことがあり、EditorForの優位性をあまり実感できていないというのが現状です……。

> ＞TextBoxFor の方は、ダメだったような・・・（定かではないです） 

数字入力のみのフォームに、文字を入力した際、
モデルのErrorMessageが表示されるのは確認しました。

> ＞idを指定しないと、「.」「[」「]」が「_」に変換されてしまうみたいで？

の件ですが、
Viewのコード↓

```View

@Html.EditorFor(m => m.MEMBER[num].BOSS.NAME)
```

をchromeの開発者ツールで確認してみたところ、下記のように表記されていて、
```html
<input class="text-box single-line" id="m_MEMBER_0___BOSS_NAME" name="m.MEMBER[0].BOSS.NAME" type="text" value="安藤">
```

internet explorerの開発者ツールで確認してみても、

```html
<input class="text-box single-line" id="m_MEMBER_0___BOSS_NAME" name="m.MEMBER[0].BOSS.NAME" type="text" value="安藤" />
```

と同様のコードが表示されており、id属性値もエンコード???が起きてしまってます(TextBoxForでも同じ状況です)。
modelの書き方が原因な気もしてきましたが、
SurferOnWwwさんにこれ以上お手数をおかけするわけにもいかないので、
この部分は気にしないでください。

> それも紹介した記事「コレクションのデータアノテーション検証」に例が出ていますが、以下のようにすれば良いはずですけど・・・
> 私のレスをきちんと読んでもらっているでしょうか？　読んだけど意味不明だったということでしょうか？

いや読んではいるのですが、
```View
@Html.ValidationMessageFor(m => m.CountryList[i].Name)
```
に、クラス属性を与えたく、
```View
@Html.ValidationMessageFor(m => m.CountryList[i].Name,new{@class="text-danger"})
```
と、するとエラーが出てしまい、
クラスの付与の仕方がわからず、困り果てコメントのコードに達しました。

最終的には、
```View
@Html.ValidationMessageFor(m => m.CountryList[i].Name,"",new{@class="text-danger"})
```
との形にすれば、class属性を付与できると発見しました。

ビュー・ヘルパーFor型(TextBoxFor)使用時に、nameを指定したい

###前提・実現したいこと
ASP.NET MVC5にて簡易な入力画面と蓄積したデータの一覧画面を開発しています。
ASP.NET 4.5.2のMVCテンプレートを利用しています。
モデル定義後、「Entity Frameworkを使用した、ビューがあるMVC5コントローラー」を利用し、コントローラとビューを自動生成しています。

実現したいこと：ラジオボタンでチェックされた項目の値を取りたい。


###発生している問題・エラーメッセージ
画面上でラジオボタン「B」を選択しても、取得した値が想定と異なり「A」となる。
※一覧画面上でも、デバッグモードでも同様に、一つ目の選択肢の値が取得されてしまう。
###追記###
上記動作を確認した手順は以下の通りです。
Controllerの下記行にブレークポイントを設定し、デバックを実行(F5)しました。入力画面にてラジオボタン「B」を選択し、DBへの保存処理を実行したところで変数に設定された値を確認したところ「A」がセットされていた。

!![イメージ説明](5a70940948165a9f4674153e788e88f1.jpeg)



###該当のソースコード
```C#
View
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
<div class="form-horizontal">
<div class="form-group">
                @Html.LabelFor(model => model.TEST, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="radio-inline">
                        @Html.RadioButtonFor(model => model.TEST, "A", new { tabindex = 1 })A
                    </div>
                    <div class="radio-inline">
                        @Html.RadioButtonFor(model => model.TEST, "B", new { tabindex = 2 })B
                    </div>
                    @Html.ValidationMessageFor(model => model.TEST, "*", new { @class = "text-danger" })
                </div>
            </div>
     </div>
}
```
```C#
Model
public class Test
    {
        [Required]
        [Display(Name = "TEST")]
        public string TEST { get; set; }
  }
```
```C#
Controller
public JsonResult Create(Main main)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    if (main.Id > 0)
                    {
                        var CurrentSUb = db.Subs.Where(p => p.Id == main.Id);

                        foreach (Sub ss in CurrentSUb)
                            db.Subs.Remove(ss);

                        foreach (Sub ss in main.Subs)
                            db.Subs.Add(ss);

                        db.Entry(main).State = EntityState.Modified;
                    }
                    //Perform Save 
                    else
                    {
                        db.Mains.Add(main);
                    }

                    db.SaveChanges();

                    return Json(new { Success = 1, Id = main.Id, ex = "" });

                }
                else
                {
                    return Json(new { Success = 2, ex = "Required items are not entered." });
                }
            }
            catch (Exception ex)
            {
                return Json(new { Success = 0, ex = ex.ToString() });
            }
        }
```

###試したこと
name属性やid属性を付与してみたりしましたが、結果は変わりませんでした。

ラジオボタンの値の取得について(ASP.NET MVC)

###前提・実現したいこと
EditorForでwidthを指定しているのですが指定したサイズ幅にしたいのですが280xpを超える指定ができません。
ただし、280px以下の指定でれば幅を縮小させる事ができます。

###該当のソースコード
Edit.cshtmlはモデルからスキャフォールディングで作成しています。
```Edit.cshtml
<div class="row">
    <div class="col-md-4">
        .col-md-4
    </div>
    <div class="col-md-8">
        @Html.EditorFor(model => model.item, new { htmlAttributes = new { @class = "form-control", style = "width: 800px;" } })
    </div>
</div>
```

###実行結果
![イメージ説明](4068aff43851f0d72478b24d66e9721e.png)

###試したこと
280px以下の指定であればサイズ幅が変わる。

###補足情報(言語/FW/ツール等のバージョンなど)
visual studio 2015
.net framework4.5.1
C#

ASP.NET MVC5 Razor のEditorForの幅を伸ばしたい。

### 実現したいこと
JavaScriptコード内の配列変数「jscheckedColumns」を同一のcshtml内のC#コード(@コード内)で参照し、チェックボックスにチェックされている項目を以下の様に表のカラム項目に表示したい。
```HTML
  <th scope="col" style="background-color: azure; min-width:180px;">選択された項目１</th>
 <th scope="col" style="background-color: azure; min-width:180px;">選択された項目２</th>
 <th scope="col" style="background-color: azure; min-width:180px;">選択された項目３</th>
```
|選択された項目１|選択された項目２|選択された項目３|
|:--|:--:|--:|
||||

### 発生している問題・分からないこと
RazorPagesを使用したWebページの実装方法において、cshtmlファイル内に以下のコード内の配列変数「jscheckedColumns 」を同一cshtmlファイル内のC＃コード（＠内コード）で参照することができません。



### 該当のソースコード

```JavaScript
<script>
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checkedCount = 0; // チェックカウンタ
const jscheckedColumns = @Html.Raw(Json.Serialize(Model.checkedColumnList)); // チェック済みカラム名格納リスト

checkboxes.forEach((checkbox, index) => {
    const labelName = checkbox.parentNode.textContent.trim(); // チェックボックスの親要素からラベル名を取得

    checkbox.value = labelName; // チェックボックスのvalue属性にラベル名を設定

    if (checkbox.checked) {
        checkedCount++;
        jscheckedColumns.push(labelName); // デフォルトでチェックされている場合、選択された項目を追加
    }

    checkbox.addEventListener('change', function () {
        if (this.name == 'customCheckBox') {
            if (this.checked) {
                checkedCount++;
                if (checkedCount >= 6) {
                    this.checked = false;
                    checkedCount--;
                    alert('最大選択数は5つです。');
                } else {
                    jscheckedColumns.push(labelName); // チェックされたら選択された項目を配列に追加
                }
            } else {
                checkedCount--;
                if (checkedCount <= 0) {
                    this.checked = true;
                    checkedCount++;
                    alert('1つ以上選択する必要があります。');
                } else {
                    const indexToRemove = jscheckedColumns.indexOf(labelName);
                    jscheckedColumns.splice(indexToRemove, 1); // チェックが外れたら選択された項目を配列から削除
                }
            }
        }
        console.log("選択された項目: ", jscheckedColumns);
    });
});
</script>
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
試した方法１：
CSファイル内にBindingPropertyの変数を定義し、Modelを用いた変数（Razor変数）の共有方法を試みました。
```C＃
[BindProperty]
public List<string> CheckedColumns { get; set; } = new List<string>();
```
```CSHTMLファイル内
<script>
    const jscheckedColumns = @Html.Raw(Json.Serialize(Model.CheckedColumns));
    // 処理は省略
</script>

@if (Model.CheckedColumns.Contains("項目A"))
{
    // 項目Aを表のカラムに追加して表示する処理
}
```
結果：
Model.CheckedColumnsを参照しても中身がcount=0、capacity=0となっており、チェックボックスでチェックされている項目を参照できません。
ただし、JavaScriptコードにおいて、jscheckedColumns内にはチェックされた項目が正しく格納されています。

試した方法２：
Model.CheckedColumnsに追加する必要があるかと思い、JavaScript内に以下のコードを追加しました。
```JavaScript
    // jscheckedColumnsをModel.JsCheckedColumnsに設定
    jscheckedColumns.forEach(function (column) {
        @Model.JsCheckedColumns.Add(column);
    });
```
結果：
「現在のコンテキストに'column'という名前は存在しません」とエラーが出てしまいます。

### 補足
特になし

RazorPagesを用いた「JavaScript内の配列変数をC＃コード内での参照する方法」についての質問

以下のようにコントローラーからリストとして返しModelとして取ってきた値を表示するには
```ここに言語を入力

@model Samples.Sample

@foreach (var item in Model)
{
<div>Html.DisplayFor(model => item.Contents)</div>
}
```
以上のようにすると思います。例えばこの`item.contents`の中身が
テストのお知らせです。<br />届いてますか？
のように改行タグを含んでいるとすると、当然View側ではそのまま表示されてしまうと思います。
そこでRazorでHTML文字列をエンコードせずに表示する方法調べえるとRawヘルパーを使うといいとのことで
` @Html.Raw(Html.DisplayFor(model => item.Contents))`という風に書いて見たのですが表示が変わりません。

恐らモデルやコントローラー側でエンコードやリプレイスを行うと思うのですが、、、やり方を見つけられませんでした。
お手数ですが宜しくお願い致します。