編輯器模板上的Javascript

Question

我有一個頁面可以將結果添加到表單上的某個區域。我利用編輯器模板將結果分組到區域中，並允許從下拉列表中選擇結果。我想爲三種可能的結果中的兩種顯示可選評論框。

主要頁面如下：

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

組編輯器模板是：

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

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


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

爲結局的最後編輯模板是：

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

但是JavaScript的沒有按什麼都不做。

Answer 1

部分視圖不支持部分視圖，這對您來說是幸運的，或者您將在jqueryval包中添加每個腳本的多個內聯副本以及您自己的腳本（每次添加一個模板時）。

由於new { id = "OutcomeId" }和<div class="col-md-4" id="Comments">生成的重複id屬性導致您無法生成無效的html，這意味着腳本永遠無法工作。

您還生成文本區域爲相同的屬性，這意味着，在提交表單時，的Comments值將是初始值（由​​作爲產生）之前Comments一個隱藏的輸入和的值<textarea>將被忽略。

它的視圖的責任包括腳本，而不是部分，所以將腳本移動到主視圖（或佈局），並使用類名稱和相對選擇器。

你在HTML模板應該是

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

則包括CSS最初隱藏在主視圖

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

注意這是所有意見

.comments { 
    display: none; 
} 

和腳本不清楚$(".DropChange")是指什麼，但我認爲它是您的下拉列表模板（我給了class="outcome"）