如何检查ASP.NET MVC 4中脚本内的许多值?

时间:2019-04-03 10:14:03

标签: javascript asp.net asp.net-mvc

我可以根据此查看代码轻松显示/隐藏<div>

<div class="form-group">
  @Html.LabelFor(m => m.countryID, new { @class = "col-md-2 control-label" })
  <div class="col-md-10">
    @Html.DropDownListFor(m => m.countryID, ((IEnumerable<Corporate.Models.Country>) ViewBag.Possiblecountries).OrderBy(c =>  c.countryName).Select(option => new SelectListItem
    {
       Text = Html.DisplayTextFor(_ => option.countryName).ToString(),
       Value = option.countryID.ToString(CultureInfo.InvariantCulture),
       Selected = (Model != null) && (option.countryID == Model.countryID)
    }), new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.countryID, "", new { @class = "text-danger" })
  </div>
</div>

<div class="form-group" id="vatNumberDiv">
    @Html.LabelFor(m => m.vatNumber, new {@class = "col-md-2 control-label"})
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.vatNumber, new {@class = "form-control"})
        @Html.ValidationMessageFor(m => m.vatNumber, "", new {@class = "text-danger"})
    </div>
</div>

并基于此脚本:

<script type="text/javascript">
$(function () {
    $('#countryID').change(function () {
        var value = $(this).val();
        if (value == 'FRA') {
            $('#vatNumberDiv').show();                
        } else {
            $('#vatNumberDiv').hide();               
        }
    });
});
</script>

但是如何检查所有欧盟成员国呢?我有一个称为bool IsMemberEU()的方法,该方法需要MVC上下文才能执行。我可以在脚本中调用它吗?

也许最好通过代码生成脚本中的所有选项?像这样:

if (value == 'FRA' ||
    value == 'DEU' ||
    value == 'ITA' ||
    ...
    ...
   ) {

我还有其他选择吗?

谢谢。

编辑:

这是我需要的代码,用于检查该国家是否是欧盟成员国:

foreach(Country c in context.Countries)
{
   if (IsMemberEU(c))
   {
      // is EU memeber
   }
}  

EDIT2 :对于 M12 Bennet

<script type="text/javascript">
// $(function () {
$(document).ready(function() {
    $('#countryID').change(function () {

        // get selected option to submit to method IsMemberEU
        var selectedOption = $(this).val();

        // create URL for ajax call
        var ajaxUrl = '@Url.Action("IsMemberEU", "Customers")';

        $.ajax({
            url: ajaxUrl,
            data: { countryAbbv: selectedOption },
            success: function(result) {

                if (result) {
                    $("#vatNumberDiv").show();

                } else {
                    $("#vatNumberDiv").hide();

                }

                // show result of ajax call in the `p` element on page.  This is just testing to see if ajax call worked.
                // this can be done with console.log(result) as well.
                $("#ShowResult").text(result);
            },
            error: function(xhr, status, error) {
                console.log(xhr);
            }


        });
    });
});
</script>

1 个答案:

答案 0 :(得分:0)

在控制器中,您可以创建方法IsMemberEU(string countryAbbv)。它需要接受一个参数,因为您要检查要发送给该方法的内容。因此您的代码可能如下所示:

控制器方法

public bool IsMemberEU(string countryAbbv)
{
    var lstCountries = db.Countries.Where(x => x.isEU).Select(t => t.Abbr).ToList();

    return lstCountries.Contains(countryAbbv);
}

然后在Razor / HTML页面上:

Razor / HTML

<div>
    <select id="CountrySelect" name="countryAbbv">
        <option value="">-- Select Country --</option>
        <option value="FRA">FRA</option>
        <option value="DEU">DEU</option>
        <option value="ITA">ITA</option>
        <option value="USA">USA</option>
    </select>

    <p id="ShowResult"></p>
</div>

然后在您的jQuery中包含AJAX:

jQuery / AJAX

<script>
    $(document).ready(function() {

        // create event listener for change of select
        $("#CountrySelect").change(function() {

            // get selected option to submit to method IsMemberEU
            var selectedOption = $(this).val();

            // create URL for ajax call
            var ajaxUrl = '@Url.Action("IsMemberEU", "Home")';

            $.ajax({
                url: ajaxUrl,
                data: { countryAbbv: selectedOption },
                success: function(result) {
                    if (result)
                        $("#vatNumberDiv").show();
                    else
                        $("#vatNumberDiv").hide();
                },
                error: function(xhr, status, error) {
                    console.log(xhr);
                }
            });
        });
    });
</script>

这正在按我的预期工作。现在,这只是我根据问题中提供的信息创建自己的一个基本示例。您不必担心我提供的HTML / Razor,因为您使用的是Razor语法。