时间戳

首页 > 解决方案 > 如何在 ASP.NET MVC 4 中检查脚本内的许多值？

javascript - 如何在 ASP.NET MVC 4 中检查脚本内的许多值？

问题描述

我可以轻松地显示/隐藏<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 班纳特

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

标签： javascriptasp.netasp.net-mvc

解决方案

在控制器中，您可以创建方法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 页面上：

剃刀/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 语法。

推荐阅读