ASP.NETでViewからControllerへ値を投げる方法！

みなさんこんにちは！

初めは難しいと思っていたことでも、毎日ASP.NETの勉強をしていると、徐々に理解度が高くなってくるものですよね！

そんなこんなで最近ASP.NETと親友になりつつあるひろぽんです！

今回は割とありがちなViewからControllerに値を渡したいときに覚えておきたい手法です！

私の場合Createメソッドを呼び出す際、GETで投げた値をPOSTでも利用したいのに、どうやって投げればわからない！！というところからスタートしています！

では早速！

前提条件の確認！

💡 Controller を WinForms の Form_Load の延長として理解するなら、別記事 Controller は WinForms の Form_Load 拡張版だと理解するで WinForms 経験者向けに整理してます。

まずはこの記事で書いていくプログラムの前提内容を書いていきたいと思います！

このシステムを使っている人は車屋さんで、車輌に紐づく車検情報を登録して、顧客管理をしています。

車輛ページ（Details）には、車輛の詳細のほか、車検情報の一覧を見ることができます。

車輛ページ（Details）からできることは、車検証の登録、詳細閲覧、編集、削除です。

今回車輛の詳細と車検情報の一覧を表示するということで、CarAndInspectionというViewModelを作成しました。

実際のコードは以下の通り。

今回関係してくるコードはCarAndInspectionとInspectionLicenseだけなので、その点に絞って書いていきます！

CarAndInspection

CarAndInspection (csharp)#aa03f3003d52

using CarInspection.Data;
using CarInspection.Models;
using CarInspection.Models.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace CarInspection.Controllers
{
/// <summary>
/// 車両情報と車検情報をを一覧で表示する
/// </summary>
[Authorize]
public class CarAndInspectionController : Controller
{
 
    private CarInspectionContext db = new CarInspectionContext();
 
    // GET: CarAndInspection
    public ActionResult Index()
    {
        return View();
    }
 
    [Authorize]
    public ActionResult Details(int? id)
    {
        var loginUser = GetLoginUser();
 
        if (id == null)
        {
            return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);
        }
        var carAndInspection = new CarAndInspectionViewModel();
 
        var car = loginUser.Cars.FirstOrDefault(c => c.Id == id);
 
        if(car == null)
        {
            return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);
        }
 
        carAndInspection.Car = car;
        carAndInspection.inspectionLicenses = car.InspectionLicenses;
 
        return View(carAndInspection);
 
    }
 
    private User GetLoginUser()
    {
        return db.Users.FirstOrDefault(u => u.UserName == User.Identity.Name);
    }
}

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

}

CarAndInspection (csharp)#f3f711378e30

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace CarInspection.Models.ViewModel
{
    public class CarAndInspectionViewModel
    {
        public Car Car { get; set; }
        public IEnumerable<InspectionLicense> inspectionLicenses { get; set; }
    }
}

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

InspectionLicense

InspectionLicense (csharp)#b21a612f1892

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using CarInspection.Data;
using CarInspection.Models;
using CarInspection.Models.ViewModel;
 
namespace CarInspection.Controllers
{
    [Authorize]
    public class InspectionLicensesController : Controller
    {
        private CarInspectionContext db = new CarInspectionContext();
    // GET: InspectionLicenses/Details/5
    public ActionResult Details(int? id,int? ParentCarId)
    {
        if (id == null || ParentCarId == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        InspectionLicense inspectionLicense = db.InspectionLicenses.Find(id);
        if (inspectionLicense == null)
        {
            return HttpNotFound();
        }
 
        ViewBag.ParentCarId = ParentCarId;
        return View(inspectionLicense);
    }
 
    // GET: InspectionLicenses/Create
    public ActionResult Create(int? ParentCarId)
    {
        if(ParentCarId == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        ViewBag.ParentCarId = ParentCarId;
        return View();
    }
 
    // POST: InspectionLicenses/Create
    // 過多ポスティング攻撃を防止するには、バインド先とする特定のプロパティを有効にしてください。
    // 詳細については、https://go.microsoft.com/fwlink/?LinkId=317598 を参照してください。
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,Name,Memo,Expiration,CarId")] InspectionLicense inspectionLicense)
    {
        var carid = inspectionLicense.CarId;
 
 
        var car = db.Cars.FirstOrDefault(c => c.Id == inspectionLicense.CarId);
 
        if (ModelState.IsValid)
        {
            inspectionLicense.Created = DateTime.Now;
            inspectionLicense.Updated = DateTime.Now;
            inspectionLicense.Car = car;
            db.InspectionLicenses.Add(inspectionLicense);
            db.SaveChanges();
            return RedirectToCarAndInspectionDetails(inspectionLicense.CarId);
        }
 
        return RedirectToCarAndInspectionDetails(inspectionLicense.CarId);
    }
 
    // GET: InspectionLicenses/Edit/5
    public ActionResult Edit(int? id,int? ParentCarId)
    {
        if (id == null || ParentCarId == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        InspectionLicense inspectionLicense = db.InspectionLicenses.Find(id);
        if (inspectionLicense == null)
        {
            return HttpNotFound();
        }
 
        ViewBag.ParentCarId = ParentCarId;
        return View(inspectionLicense);
    }
 
    // POST: InspectionLicenses/Edit/5
    // 過多ポスティング攻撃を防止するには、バインド先とする特定のプロパティを有効にしてください。
    // 詳細については、https://go.microsoft.com/fwlink/?LinkId=317598 を参照してください。
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "Id,Name,Memo,Expiration,CarId")] InspectionLicense inspectionLicense)
    {
        if (ModelState.IsValid)
        {
            inspectionLicense.Updated = DateTime.Now;
            db.Entry(inspectionLicense).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToCarAndInspectionDetails(inspectionLicense.CarId);
        }
        return RedirectToCarAndInspectionDetails(inspectionLicense.CarId);
    }
 
    // GET: InspectionLicenses/Delete/5
    public ActionResult Delete(int? id,int? ParentCarId)
    {
        if (id == null || ParentCarId == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        InspectionLicense inspectionLicense = db.InspectionLicenses.Find(id);
        if (inspectionLicense == null)
        {
            return HttpNotFound();
        }
        ViewBag.ParentCarId = ParentCarId;
        return View(inspectionLicense);
    }
 
    // POST: InspectionLicenses/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public ActionResult DeleteConfirmed(int? id, int? ParentCarId)
    {
        if (ParentCarId == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
 
        InspectionLicense inspectionLicense = db.InspectionLicenses.Find(id);
        db.InspectionLicenses.Remove(inspectionLicense);
        db.SaveChanges();
 
        return RedirectToCarAndInspectionDetails(ParentCarId);
    }
 
    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            db.Dispose();
        }
        base.Dispose(disposing);
    }
 
    private ActionResult RedirectToCarAndInspectionDetails(int? carId)
    {
        if(carId == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        else
        {
            return RedirectToAction("Details", "CarAndInspection",new { id = carId});
        }
 
    }
}

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

}

InspectionLicense (csharp)#65f916f3dc5a

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
using Microsoft.SqlServer.Server;
 
namespace CarInspection.Models
{
    public class InspectionLicense
    {
        public int Id { get; set; }
    [DisplayName("車検証名")]
    public string Name { get; set; }
 
    [DisplayName("備考")]
    public string Memo { get; set; }
 
    [DisplayName("満了日")]
    [DataType(DataType.Date)]
    public DateTime Expiration { get; set; }
 
    public DateTime Created { get; set; }
    public DateTime Updated { get; set; }
 
    public virtual Car Car { get; set; }
 
    [NotMapped]
    public int CarId { get; set; }
 
}

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

}

どのように値を投げていくのか？

続いて全体的にどのような流れで値を投げていくのかについて解説していきます。

CarAndInspectionのDetailsのViewからInspectionLicenseのGetのCreateメソッドへDetailsで現在見ているIDを持たせたい。
CreateのGetメソッドから、Postメソッドに上記で受け取ったIDを投げたい
CreateでPostが終わったら、CarAndInspectionのDetailsに上記IDとともに返したい。

DetailsのViewsからGETのCreateへ値を投げる。

これは割とシンプルです！

GetのCreateに引数を書きます。

DetailsのViewsからGETのCreateへ値を投げる。 (csharp)#abe6c1887ce3

        // GET: InspectionLicenses/Create
        public ActionResult Create(int? ParentCarId)
        {
            if(ParentCarId == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            ViewBag.ParentCarId = ParentCarId;
            return View();
        }

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

Views側で上記パラメーターを渡します。

        <td colspan="4">
            @Html.ActionLink("車検証追加","Create",new {Controller = "InspectionLicenses",ParentCarId = Model.Car.Id})
        </td>

GetからPOSTへ値を引き継ぐ

まずはGetで呼ばれたCreateメソッド内で、ViewBagを使って Viewにデータを渡します。

            ViewBag.ParentCarId = ParentCarId; 
            return View();

上記コードのこの部分ですね！

続いてControllerに対するModelに値を補完する用の箱を用意します。

        [NotMapped]
        public int CarId { get; set; }

DBにカラムを作成したくないので、NotMappedアノテーションを設定します。

続いてCreateのViewsで上記箱にViewBagのデータを入れていきます。

        @Html.Hidden("CarId",(int)@ViewBag.ParentCarId)

この際＠ViewBagはDynamic型なので、任意の型にCastします。

このようにすれば、PostのCreateメソッドでCarIdを受け取れるはずです。

GetからPOSTへ値を引き継ぐ (csharp)#a7744e61223a

        // POST: InspectionLicenses/Create
        // 過多ポスティング攻撃を防止するには、バインド先とする特定のプロパティを有効にしてください。
        // 詳細については、https://go.microsoft.com/fwlink/?LinkId=317598 を参照してください。
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "Id,Name,Memo,Expiration,CarId")] InspectionLicense inspectionLicense)
        {
            var carid = inspectionLicense.CarId;
 
 
        var car = db.Cars.FirstOrDefault(c => c.Id == inspectionLicense.CarId);
 
        if (ModelState.IsValid)
        {
            inspectionLicense.Created = DateTime.Now;
            inspectionLicense.Updated = DateTime.Now;
            inspectionLicense.Car = car;
            db.InspectionLicenses.Add(inspectionLicense);
            db.SaveChanges();
            return RedirectToCarAndInspectionDetails(inspectionLicense.CarId);
        }
 
        return RedirectToCarAndInspectionDetails(inspectionLicense.CarId);
    }

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

このようにしてModel経由で値を受け取れれば、最後はRedirectします。

GetからPOSTへ値を引き継ぐ (csharp)#3ec38c0487a2

        private ActionResult RedirectToCarAndInspectionDetails(int? carId)
        {
            if(carId == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            else
            {
                return RedirectToAction("Details", "CarAndInspection",new { id = carId});
            }
 
    }

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

以上！

💡 補足: 業務系の現場でよくハマるパターン

俺もこの View → Controller の値渡し、何度もやってますが、ハマるところは決まってます。

① Model Binder の name 属性ミス

HTML の name="UserName" が C# の Model プロパティ名と一致してないと、 Controller 側で値が null になる。 form 要素の name = Model property name が絶対則。 Razor の @Html.TextBoxFor(m => m.UserName) を使うと自動で揃うので推奨。