Comment appeler un style css dans la page de contenu à l'aide d'ASP.NET MVC?

Question

J'ai créé un gabarit pour mon application et ensuite l'application principale a été affichée sur chaque page, mais j'ai créé une page de contenu et j'ai créé un style CSS séparé pour cette page et j'ai appelé cette page particulière mais le style de cette page ne s'affiche pas.

@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> 

feuille de style Lien

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

Et fichier javascript ne fonctionne pas aussi

Answer 1

vous pouvez utiliser la directive de section dans la mise en page.

Dans la mise en page d'écriture à l'endroit où vous souhaitez insérer la section (tête/fooret etc ...)

@RenderSection("styles", false) 

Ensuite, en vue de définir le contenu de cette section:

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

Nom cette section peut être n'importe laquelle. Mais en vue, vous pouvez utiliser chaque section seulement une fois dans n'importe quel endroit.