顯示動態字段與MVC

Question

單選按鈕我有我的MVC網站的局部視圖，用於搜索參數的特定頁面。在這部分中，我基於特定的ID號動態顯示參數。其中一些參數需要允許用戶輸入一個確切的值或一個值的範圍。這是我到目前爲止：

<form id="DynamicFieldsForm"> 
    @{ 
     List<DynamicParameter> ddParams = dal.GetParameters(); 
     foreach (DynamicParameter dp in ddParams.OrderBy(d => d.ParameterName)) 
     { 
      <div> 
       <div class="form-group col-lg-12"> 
        <div class="designerDataParamRangeSelect"> 
         <input type="radio" id="@(dp.ParameterID)_RadioExact" value="exact" />Exact<br /> 
         <input type="radio" id="@(dp.ParameterID)_RadioRange" value="range" />Range 
        </div> 

        <input class="form-control" type="text" id="@(dp.ParameterID)_Lower" name="@(dp.ParameterID)_Lower" placeholder="@dp.ParameterName Lower" value="" @maxLength /> 
        <div id="hideThis"> 
         <input class="form-control" type="text" id="@(dp.ParameterID)_Upper" name="@(dp.ParameterID)_Upper" placeholder="@dp.ParameterName Upper" value="" @maxLength /> 
        </div> 
       </div> 
      </div> 
     } 
    } 
</form> 

從下拉列表中選擇特定ID後，也會顯示此部分視圖。我有用戶界面工作...這不是問題。我需要哪些是如何顯示或選擇"_RadioRange"單選按鈕，當"hideThis" DIV隱藏輸入字段幫助。我將這些值從javascript函數發送到控制器，並且所有工作都一樣。我只需要幫助顯示和隱藏這些字段。任何幫助深表感謝。

Answer 1

你沒有提到JS框架（如果有的話），你使用的是什麼。 jQuery中，我有經常使用用於動態形式顯示可重複使用的方法，包括：

JS：

var toggleChecked = function() { 
     var $this  = $(this), 
      $target  = $($this.data('target')) 
     ; 
     if ($this.is(':checked')) { 
      $target.toggle($this.data('display')); 
     } 
    } 
; 
$(document).on('click','[data-action=toggleChecked]', toggleChecked); 

HTML：

<input id='myRadio_y' name='myRadio' type='radio' value='1' 
    data-action='toggleChecked' data-target='#hideThis' data-display='true' /> 
<input id='myRadio_n' name='myRadio' type='radio' value='0' 
    data-action='toggleChecked' data-target='#hideThis' data-display='false' /> 

<div id='hideThis'>Dynamically Displayed Field</div> 

在一個循環中， 「hideThis」 ID對於循環的每次迭代都需要一個唯一的Id。你可以添加一個@(i)每個ID結束......是這樣的：

@{ int i = 0; } 

foreach(...) { 
    <input id='myRadio_y' name='myRadio' type='radio' value='1' 
     data-action='toggleChecked' data-target='#hideThis@(i)' data-display='true' /> 
    <input id='myRadio_n' name='myRadio' type='radio' value='0' 
     data-action='toggleChecked' data-target='#hideThis@(i)' data-display='false' /> 

    <div id='hideThis@(i)'>Dynamically Displayed Field</div> 
    i++; 
} 

說明：

在HTML，與數據的任何行動選框或單選按鈕=「toggleChecked」可以切換另一個HTML標籤的顯示。該數據目標指定與CSS選擇被切換的標籤，和數據顯示=「（真|假）」表示，特定的單選按鈕/複選框是否應顯示或隱藏（分別地）。

讓我知道，如果有任何額外的細節，我可以幫補平，如果這看起來像它在正確的軌道您的問題上。

Answer 2

你2個單選按鈕需要有一個name屬性（包括相同），因此他們的分組情況（目前你可以選擇這兩個單選按鈕，並不能取消選擇其一）。

但是，您的實現還存在其他許多問題，包括生成無效html（重複id屬性），未驗證以及在視圖中包括數據庫訪問代碼，使得單元測試幾乎不可能。

我建議您首先創建一個返回部分視圖的[ChildActionOnly]方法，並在佈局中使用@Html.Action()來渲染它。這部分應該基於視圖模型，可以讓你獲得客戶端和服務器端驗證，例如

public class ParameterVM 
{ 
    public string Name { get; set; } 
    public bool HasRange { get; set; } 
    [RequiredIfFalse(ErrorMessage = "...")] 
    public int? Value { get; set; } 
    [RequiredIfTrue("HasRange", ErrorMessage = "...")] 
    public int? LowerLimit { get; set; } 
    [RequiredIfTrue("HasRange", ErrorMessage = "...")] 
    public int? UpperLimit { get; set; } 
} 

注意RequiredIfTrueAttribute和RequiredIfFalseAttribute爲foolproof，但你會發現很多的創造條件屬性的例子在SO上。

你的控制器的方法將在是這樣的

[ChildActionOnly] 
public ActionResult Parameters() 
{ 
    var model = dal.GetParameters().OrderBy(x => x.ParameterName).Select(x => new ParameterVM() 
    { 
     Name = x.ParameterName, 
     HasRange = ... // set defaults for other properties as required 
    }).ToList(); 
    return PartialView("_Parameters", model); 
} 

和_Parameters.cstml局部視圖將

@model List<ParameterVM> 
<form> 
    @for(int i = 0; i < Model.Count; i++) 
    { 
     <div class="parameter"> 
      @Html.DisplayFor(m => m[i].Name) 
      <label> 
       @Html.RadioButtonFor(m => m[i].HasRange, false, new { id = "", @class = "radio" }) 
       <span>Exact</span> 
      </label> 
      <label> 
       @Html.RadioButtonFor(m => m[i].HasRange, true, new { id = "", , @class = "radio" }) 
       <span>Range</span> 
      </label> 
      <div class="exact"@(Model.HasRange ? " hidden" ? "")> 
       @Html.LabelFor(m => m[i].Value) 
       @Html.TextBoxFor(m => m[i].Value) 
       @Html.ValidationMessageFor(m => m[i].Value) 
      </div> 
      <div class="range@(Model.HasRange ? "" ? " hidden")> 
       @Html.LabelFor(m => m[i].LowerLimit) 
       @Html.TextBoxFor(m => m[i].LowerLimit) 
       @Html.ValidationMessageFor(m => m[i].LowerLimit) 
       @Html.LabelFor(m => m[i].UpperLimit) 
       @Html.TextBoxFor(m => m[i].UpperLimit) 
       @Html.ValidationMessageFor(m => m[i].UpperLimit) 
      </div> 
     <div> 
    } 
</form> 

而且在佈局，包括下面的腳本來切換相關的文本框的可視性

$('.radio').change(function() { 
    var container = $(this).closest('.parameter'); 
    container.find('.exact').toggleClass('hidden'); 
    container.find('.range').toggleClass('hidden'); 
});