Javascript auf Editor-Vorlage

Question

Ich habe eine Seite, um Ergebnisse zu einem Bereich in einem Formular hinzuzufügen. Ich benutze Editor-Vorlagen, um die Ergebnisse in Bereiche zu gruppieren und das Ergebnis aus einer Dropdown-Liste auszuwählen. Ich möchte ein optionales Kommentarfeld für zwei der drei möglichen Ergebnisse zeigen.

Die Hauptseite ist die folgende:

@model DBS.ViewModels.OutcomeQuestionnaireVM 

@{ 
ViewBag.Title = "Outcomes"; 
} 

<h2>Add Outcomes</h2> 
@if (Model.Error == true) 
{ 
<h3 class="danger">You MUST select an outcome for at least 1 area.</h3> 
} 

@using (Html.BeginForm()) 
{ 
@Html.AntiForgeryToken() 

<div class="form-horizontal"> 
    @Html.HiddenFor(x => x.DebriefId) 

    <hr /> 

    @Html.EditorFor(m => m.Groups, new { outcomes = Model.Outcomes }) 


    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" value="Next" class="btn btn-default" /> 
     </div> 
    </div> 
</div> 
} 

Der Gruppeneditor Vorlage:

@model DBS.ViewModels.OutcomeQuestionGroupVM 
@{ 
Layout = null; 
} 

<h4>@Html.DisplayFor(m => m.Name)</h4> 


@Html.EditorFor(m => m.Questions, new { outcomes = ViewData["outcomes"] }) 

Die endgültige Template-Editor für das Ergebnis ist:

@model DBS.ViewModels.OutcomeQuestionVM 
@{ 
Layout = null; 
} 

<div class="form-group"> 
<div class="row"> 
    <div class="col-md-4"> 
     @Html.DisplayFor(m => m.Question) 
    </div> 
    <div class="col-md-4"> 
     @Html.HiddenFor(m => m.ID) 
     @Html.DropDownListFor(m => m.OutcomeId, (SelectList)ViewData["outcomes"], "Please Select if applicable", new { @class = "form-control", @id = "OutcomeId" }) 
     @Html.ValidationMessageFor(m => m.OutcomeId, "", new { @class = "text-danger" }) 
    </div> 
    <div class="col-md-4" id="Comments"> 
     @Html.HiddenFor(m => m.Comments) 
     @Html.TextAreaFor(model => Model.Comments, htmlAttributes: new { @class = "form-control" }) 
     @Html.ValidationMessageFor(m => m.Comments, "", new { @class = "text- danger" }) 
    </div> 
</div> 
</div> 


@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
<script type="text/javascript"> 

    $(document).ready(function() 
    { 
     document.getElementById('Comments').hide; 
    }); 

    $(function() { 
     $(".DropChange").change(function() { 
      var valone = $('#OutcomeId').val(); 

      if (valone == 1 || valone == 2) 
      { 
       $('#Comments').show(); 
      } 
      else if (valone == 3) 
      { 
       $('#Comments').hide(); 
      } 
      else 
      { 
       $('#Comments').hide(); 
      } 
     }); 
    }); 
</script> 
} 

jedoch JavaScript doesn tu nichts.

Answer 1

Abschnitte werden in Teilansichten nicht unterstützt, was in Ihrem Fall von Vorteil ist, oder Sie würden mehrere Inline-Kopien jedes Skripts im Paket jqueryval sowie Ihr eigenes Skript hinzufügen (jedes Mal, wenn die Vorlage hinzugefügt wird).

Sie generieren auch ungültige HTML aufgrund der doppelten id Attribute generiert von new { id = "OutcomeId" } und <div class="col-md-4" id="Comments"> was bedeutet, dass das Skript hätte sowieso nie funktioniert.

Sie sind auch einen versteckten Eingang für Comments vor dem Text für die gleiche Eigenschaft zu erzeugen, was bedeutet, dass, wenn die Form der Wert Comments eingereicht wird, wird den Anfangswert und den Wert der (wie durch @Html.HiddenFor(m => m.Comments) erzeugt) <textarea> würde ignoriert werden.

Es ist die Verantwortung der Ansicht, die Skripte, nicht die partiellen, also verschieben Sie die Skripts in die Hauptansicht (oder Layout) und verwenden Klassennamen und relative Selektoren.

Ihre html in der Vorlage sollte

<div class="row"> 
    <div class="col-md-4"> 
     @Html.DisplayFor(m => m.Question) 
    </div> 
    <div class="col-md-4"> 
     @Html.HiddenFor(m => m.ID) 
     // add class name to handle the .change() event 
     @Html.DropDownListFor(m => m.OutcomeId, (SelectList)ViewData["outcomes"], "Please Select if applicable", new { @class = "form-control outcome" }) 
     @Html.ValidationMessageFor(m => m.OutcomeId, "", new { @class = "text-danger" }) 
    </div> 
    <div class="col-md-4" class="comments"> // use class name 
     @Html.TextAreaFor(model => Model.Comments, htmlAttributes: new { @class = "form-control" }) 
     @Html.ValidationMessageFor(m => m.Comments, "", new { @class = "text- danger" }) 
    </div> 
</div> 

dann CSS sein gehören zunächst alle Kommentare zu verstecken

.comments { 
    display: none; 
} 

und das Skript in der Hauptansicht

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script type="text/javascript"> 
     $(".outcome").change(function() { 
      var valone = $(this).val(); 
      // get the associated comment 
      var comment = $(this).closest('.row').find('.comments'); 
      if (valone == 1 || valone == 2) { 
       comment.show(); 
      } else { 
       comment.hide(); 
      } 
     }); 
    </script> 
} 

Hinweis war es nicht klar, was $(".DropChange") bezieht sich auf, aber ich nehme an, es ist die Dropdown-Liste in Ihrem Vorlage (die ich gab class="outcome")