RazorからJqueryに変数を渡そうとしています

Question

私はASP.netのプロジェクトに取り組んでおり、そこから選択するドロップダウンメニューを提供するフォームを作成しました。これに加えて、以下のJqueryではユーザーがドロップダウンフィールドを追加できます。これは機能します。 私の問題は、最初のドロップダウンに由来し、html形式のC＃から読み込まれたものとして正常に機能する機関のリストを持っています。

ユーザが別のドロップダウンを追加することを選択すると、そのボックスは空白になります。私はC＃を直接Jqueryに追加しようとしましたが、これは機能しません。

私はこのプロジェクトで使用しているASP.netまたはMVCに熟練しているわけではないので、値をJqueryに渡してドロップダウンにリストを追加するのに最適な方法は何ですか？ここで

は、ここで私は私が何をしようとしている明確に支援するカップルの画像を追加したHTML

<div class="col-md-3 BasicInfoFormLabelColumn"> 
     <label for="restrictedInstitute" class="formLabel">Restricted Institutes: (Can't Apply)</label> 
    </div> 
    <div class="col-md-3 input_fields_wrap"> 
     <select style="padding-left: 5px; width: 100%;" class="BasicInfoFormControl" onblur="" name="restrictedInstitute[]" id="selectRestricted" /> 
     <option value="0">Please Select</option> 
     @foreach (var item in Model.institute) 
     { 

      if (@item.TradingName != null && @item.TradingName != " " && @item.TradingName != "") 
      { 
       <option value="@item.TradingName">@item.TradingName</option> 
      } 
     } 
     </select> 
     <div class="row"> 
      <div class="col-md-12 BasicInfoFormRow "> 
       <button class="add_field_button addMore">+Add More institutes</button> 

      </div>      
     </div> 
    </div> 

ある

<script> 
    $(document).ready(function() { 
     var max_fields = 10; //maximum input boxes allowed 
     var wrapper = $(".input_fields_wrap"); //Fields wrapper 
     var add_button = $(".add_field_button"); //Add button ID 

     var x = 1; //initlal text box count 
     $(add_button).click(function (e) { //on add input button click 
      e.preventDefault(); 
      if (x < max_fields) { //max input box allowed 
       x++; //text box increment 
       $(wrapper).append('<div><select style="padding-left: 5px; width: 100%;" class="BasicInfoFormControl" onblur="" name="restrictedInstitute[]" /></select><a href="#" class="remove_field">Remove</a></div>'); //add input box 
      } 
     }); 

     $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
      e.preventDefault(); $(this).parent('div').remove(); x--; 
     }) 
    }); 
</script> 

以下のコードです。

Answer 1

Uが唯一のあなたの内側にそのoptionのjQueryなしselectを追加するので、そのが起こっ。私は、目標を達成するためにAJAXと部分的なビューを使用することをお勧めします。 まず、次に

@model xxxx.Model.Institute //model would be your institute 
<select style="padding-left: 5px; width: 100%;" class="BasicInfoFormControl" onblur="" name="restrictedInstitute[]" id="selectRestricted" /> 
    <option value="0">Please Select</option> 
    @foreach (var item in Model) 
    { 
     if (@item.TradingName != null && @item.TradingName != " " && @item.TradingName != "") 
     { 
      <option value="@item.TradingName">@item.TradingName</option> 
     } 
    } 
</select> 

は、あなたのHTMLにpartialviewとしてそれを呼び出す名前がInstitute.cshtml

Institute.cshtmlで、たとえば、別のCSHTMLにDropDownListコントロールのレンダリングを分離

<div class="col-md-3 input_fields_wrap"> 
     @Html.Partial("Institute", Model.Institute) 
     <div class="row"> 
      <div class="col-md-12 BasicInfoFormRow "> 
       <button class="add_field_button addMore">+Add More institutes</button> 
      </div>      
     </div> 
    </div> 

あなたのコントローラにpartialviewを追加してください。

xxController

PartialViewResult Institute() 
{ 
    return PartialView(); 
} 

これは、第2のステップは、あなたのアドオンのクリックボタンでajaxを呼び出している別のpartialView にあなたのドロップダウンリストを分離し、そしてこのpartialView

javascriptの

$(document).ready(function() { 
    var max_fields = 10; //maximum input boxes allowed 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function{ //on add input button click 
     if (x < max_fields) { //max input box allowed 
      x++; //text box increment 
      $.ajax({ 
        url: '@Url.Action("AddDropdown", "YourController")', 
        type: "GET", 
        success: function (result) { 
         $(wrapper).append(result); 
        } 
       }); 
     } 
    }); 

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

を使用して結果をフェッチする最初のステップですこのJavascript手段、uは追加ボタンをクリックしたとき、あなたはアヤックスを使用して、コントローラに要求します。そして、コントローラは、ドロップダウンリストをレンダリングして、クライアントに結果を送信するために役立ちます。 だから、あなたはこのAjaxリクエストこの後

xxController

public ActionResult AddDropdown() 
{ 
    Model.Institute Result = new Model.Institute() 
    //you can generate your Model.Institue in here 

    Return PartialView("Institute", Result); //this will render Result with Institute.cshtml 
} 

を受け取るためにあなたのコントローラで別の関数を追加する必要があり、あなたはクリックするだけで、あなたのHTMLにドロップダウンリストを追加することができ、ユーザーが追加したときに