RealPath:
WebPath:
2017/01/21 17:38 (JST) 更新
Tipsその2 >>

部分ビュー

Contents

各ページで共通で使われるであろう、部分的に埋め込み可能なビューを定義することができます。

今回は以下のような SNS ボタン群を部分ビューとして定義してみることにします。

部分ビューの定義

基本的に Views/Shared に設置します。

Views/Shared/_Sns.cshtml
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<div class="form-group" style="border: 1px solid #aaa; display: inline-block; padding: 4px;">
  <button type="button" class="btn btn-primary btn-xs" style="width:30px;">
     <i class="fa fw fa-facebook"></i>
  </button>
  <button type="button" class="btn btn-info btn-xs" style="width:30px;">
    <i class="fa fw fa-twitter"></i>
  </button>
  <button type="button" class="btn btn-success btn-xs" style="width:30px;">
    <i class="fa fw fa-get-pocket"></i>
  </button>
</div>

ファイル名についてはファイル名先頭にアンダースコアを付けることが慣習となっています。(別に付けなくても動作はするのですが)

埋め込み

cshtml 内の部分ビューを出力したい場所で @Html.Partial("部分ビュー名") を呼び出します。

あまりカッコいい設置の仕方ではありませんが例として、今回の部分ビューを Views/Home/Index.cshtml に埋め込んでみます。

....
<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>

@Html.Partial("_Sns") @* ★ココを追加 *@
....

結果

img--600--size

指定の位置に部分ビューを埋め込むことができました。