試圖從Razor將變量傳遞給Jquery

Question

因此，我正在ASP.net中的一個項目上工作，並且遇到一種情況，即我已經創建了一個表單，該表單向用戶提供了一個下拉菜單供您選擇。 最重要的是，下面的Jquery允許用戶添加其他下拉字段。 這可行。 現在我的問題來自於第一個下拉列表，其中列出了一些機構，這些機構可以很好地工作，因為它是從html形式的C＃中填充的。

當用戶選擇添加另一個下拉菜單時，該框為空。 我嘗試將C＃直接添加到Jquery中，但這不起作用。

我對項目都使用ASP.net或MVC並沒有過多的經驗，將值傳遞到Jquery中以便將列表添加到下拉列表的最佳方法是什么？

這是下面的代碼

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

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

我添加了一些圖像，以幫助弄清我要做什么。

Answer 1

之所以會這樣，是因為U只在您的Jquery內部附加select而沒有其option 。 我建議使用AJAX和局部視圖來實現您的目標。 首先，將dropdownlist的呈現方式分成另一個cshtml，例如，名稱為Institute.cshtml

Institute.cshtml

@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中將其稱為“部分視圖”

<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

xx控制器

PartialViewResult Institute()
{
     return PartialView();
}

這是將您的下拉列表分成另一個partialView的第一步。第二步是在您的“添加單擊”按鈕中調用一個ajax ，然后使用此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意味着，當您單擊“添加”按鈕時，您將使用Ajax向您的控制器請求。 然后，控制器將幫助您呈現下拉列表並將結果發送回客戶端。 因此，您需要在控制器中添加另一個功能以接收此Ajax請求

xx控制器

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
}

之后，您可以點擊添加按鈕將dropdownlist添加到html中