在 asp.net razor mvc 中，如何在 div 中的 if 语句中使用选定的下拉项？

Question

这个问题不是重复的。

上面那个问题，建议重复问如何在Java和asp.net之间使用同一个变量。

而这个问题接受前一个是不可能的，而是询问其他方法是可能的吗？

在 asp.net razor mvc 中，如何在 div 中的 if 语句中使用选定的下拉项？

从下面的代码可以看出，我创建了一个dropdown 并用数据填充它。

我希望在下面div中使用所选项目。

• 当用户点击一个项目时，div 中包含的内容就会显示出来
• 然后选中的字符串项用在if statement内div内

目前发生的情况是，所选项目不可全局访问，导致您在下面看到的问题。

但正如其他有知识的人告诉我的那样，您不能在 javascript 和 asp.net mvc razor 之间使用相同的变量。所以下面的行不通。

如何做到这一点？ （在 if 语句中，在 div 中使用选定的下拉项？）

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="display-field" align="left">
        <select name="mydropdown" id="mydropdown" onchange="onChange()">
        @foreach (var lLMMI in lIM)
        {
            <option value="@lLMMI.Key.Product.PCode">
                @locItem.Key.Loc.N (@lLMMI.Key.Loc.Code)
            </option>
        }
        </select>
        <br /><br />
    </div>
}

var itemselected = "";

<div>
    <script>
        function onChange() {
            var item = document.getElementById("mydropdown").value;
            $('#summary').show();
        }
    </script>

    <div id="summary">

        @foreach (var lLMMI in lIM)
        {
            if (@lLMMI.Key.Pro.PCode == itemselected.toString())
            {
                <summary>extra html elements are added etc.</summary>
            }
        }

Answer 1

您应该只使用 javaScript。按如下方式更新您的代码：

<script>
    var serverCode = "@lLMMI.Key.Pro.PCode"; // get the server value on JS
    function onChange() {
        var localCode = $("#mydropdown").val();
        if(localCode == serverCode)
           $("#extrasummary").show();

        $('#summary').show();
    }
</script>

<div id="summary">
    <div id="extrasummary" style="display:none">extra html elements are added etc.</div>
    ....
</div>

Answer 2

处理下拉列表的更改事件并进行 ajax 调用以返回可以使用 jquery .load( 添加到 DOM 的部分视图。请注意在您的视图中删除@foreach，这样您就有了

<div id="summary"></div>

返回的 html 将显示在哪里

脚本

$('#mydropdown').change(function() {
  var selectedID = $(this).val();
  var url = '@Url.Action("Details", "YourController")';
  $('#summary').load(url, { ID: selectedID });
});

控制器

public ActionResult Details(int ID)
{
  var model = // Get the details based on the selected ID
  return PartialView("Details", model);
}

另请注意，从您的<select> 中删除onchange="onChange()。我还建议你学习使用@Html.DropDownListFor() 来生成<select> 控件