试图从Razor传递一个变量给Jquery

本文关键字：一个 变量 Jquery Razor | 更新日期: 2023-09-27 18:04:54

我正在做一个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>

我添加了一些图片来帮助说明我要做的事情。

试图从Razor传递一个变量给Jquery

这是因为你在Jquery中只添加了select而没有option。我建议使用AJAX和部分视图来实现我们的目标。首先，将下拉列表的呈现分离到另一个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

中将其命名为partialview
<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();
}

这是将下拉列表分离到另一个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意味着，当您单击Add按钮时，您将使用Ajax向控制器请求。然后控制器将帮助您呈现下拉列表并将结果发送回客户端。因此，需要在控制器中添加另一个函数来接收这个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与点击添加按钮
相关文章：