ASP.NET MVCを使用してコンテンツページでCSSスタイルを呼び出す方法は？

Question

私は自分のアプリケーション用のマスターページを作成してから、すべてのページにマスターアプリケーションを表示しましたが、コンテンツページを作成しました。このページ用に別のCSSスタイルのデザインを作成しました。このページのスタイルは表示されません。

@model MedeilMVC_CLOUD.Models.Company 

@{ 
    ViewBag.Title = "Add Company"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" /> 

<div class="page-content"> 
    <div class="container-fluid"> 


     <section class="box-typical box-panel mb-4"> 
      <header class="box-typical-header"> 
       <div class="tbl-row"> 
        <div class="tbl-cell tbl-cell-title"> 
         <h3>Form steps example</h3> 
        </div> 
       </div> 
      </header> 
      <div class="box-typical-body"> 
       <form id="example-form" action="#" class="form-wizard"> 
        <div> 
         <h3>Account</h3> 
         <section> 
          <div class="form-group"> 
           <label for="exampleInputEmail1">Email address</label> 
           <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required> 
           <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
          </div> 
          <div class="form-group"> 
           <label for="exampleInputPassword1">Password</label> 
           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
          </div> 
          <div class="form-group"> 
           <label for="exampleInputPassword1">Confirm Password</label> 
           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
          </div> 
         </section> 
         <h3>Profile</h3> 
         <section> 
          <div class="form-group"> 
           <label for="exampleInputEmail1">Address</label> 
           <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required> 
           <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
          </div> 
         </section> 
         <h3>Hints</h3> 
         <section> 
          <ul> 
           <li>Foo</li> 
           <li>Bar</li> 
           <li>Foobar</li> 
          </ul> 
         </section> 
         <h3>Finish</h3> 
         <section> 
          <div class="form-group"> 
           <div class="checkbox"> 
            <input type="checkbox" id="agree" class="required" required> 
            <label for="agree">Terms and Conditions</label> 
           </div> 
          </div> 
         </section> 
        </div> 
       </form> 
      </div><!--.box-typical-body--> 
     </section> 

    </div> 
</div> 

<script src="~/js/lib/jquery-validation/jquery.validate.min.js"></script> 
<script src="~/js/lib/jquery-steps/jquery.steps.min.js"></script> 
<script> 
    $(function() { 
     $("#example-basic ").steps({ 
      headerTag: "h3", 
      bodyTag: "section", 
      transitionEffect: "slideLeft", 
      autoFocus: true 
     }); 

     var form = $("#example-form"); 
     form.validate({ 
      rules: { 
       agree: { 
        required: true 
       } 
      }, 
      errorPlacement: function errorPlacement(error, element) { element.closest('.form-group').find('.form-control').after(error); }, 
      highlight: function (element) { 
       $(element).closest('.form-group').addClass('has-error'); 
      }, 
      unhighlight: function (element) { 
       $(element).closest('.form-group').removeClass('has-error'); 
      } 
     }); 

     form.children("div").steps({ 
      headerTag: "h3", 
      bodyTag: "section", 
      transitionEffect: "slideLeft", 
      onStepChanging: function (event, currentIndex, newIndex) { 
       form.validate().settings.ignore = ":disabled,:hidden"; 
       return form.valid(); 
      }, 
      onFinishing: function (event, currentIndex) { 
       form.validate().settings.ignore = ":disabled"; 
       return form.valid(); 
      }, 
      onFinished: function (event, currentIndex) { 
       alert("Submitted!"); 
      } 
     }); 

     $("#example-tabs").steps({ 
      headerTag: "h3", 
      bodyTag: "section", 
      transitionEffect: "slideLeft", 
      enableFinishButton: false, 
      enablePagination: false, 
      enableAllSteps: true, 
      titleTemplate: "#title#", 
      cssClass: "tabcontrol" 
     }); 

     $("#example-vertical").steps({ 
      headerTag: "h3", 
      bodyTag: "section", 
      transitionEffect: "slideLeft", 
      stepsOrientation: "vertical" 
     }); 
    }); 
</script> 

スタイルシートのリンク

<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" /> 

もjavascriptのファイルはまた、あなたがレイアウトでセクションディレクティブを使用することができます

Answer 1

を働いていません。そして、あなたはセクションを挿入したいその場所でのレイアウトの書き込みで

（ヘッド/ fooretなど...）

@RenderSection("styles", false) 

ビューのこのセクションにコンテンツを設定しますの

@section styles{ 
    <link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" /> 
} 

名前このセクションは任意です。しかし、視野では、どのセクションでも各セクションを1回だけ使用することができます。