如何在 javascript 代码和 asp.net razor mvc 代码中使用相同的变量？

Question

如何在 JavaScript 代码和 ASP.NET MVC Razor 代码中使用相同的变量？

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

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

• 当用户点击一个项目时，div 中包含的内容就会显示出来
• 然后选中的字符串项在if statement内使用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

您不能在 Razor 代码中使用 Javascript 变量，原因有两个：

• 它们不同时存在
• 它们不在同一个地方

Razor 代码在服务器上运行以生成发送到浏览器的页面。当页面到达浏览器时，它被解析并运行 Javascript 代码。在 Razor 代码中使用 Javascript 变量将是一个时间悖论，因为它需要及时将值发送回以更改页面的创建方式，但在两者之间保留原始时间线...

根据用户的输入，基本上有两种不同的方式来更新页面：

• 重新加载页面，包括请求中的数据。
• 使用 AJAX 调用请求页面的该部分，包括作为参数的数据。

Answer 2

我现在无法为您提供实际的代码，但这里是。

您的dropdown 有以下选项。

<option value="@lLMMI.Key.Product.PCode">
    @locItem.Key.Loc.N (@lLMMI.Key.Loc.Code)
</option>

例如，您想显示@lLMMI.Key.Product.PCode + @lLMMI.Key.Product.PName + @lLMMI.Key.Product.PAddress。为什么不加载您将显示的选项值并在选择时显示它们？喜欢：

<option value="@lLMMI.Key.Product.PCode + @lLMMI.Key.Product.PName + @lLMMI.Key.Product.PAddress">
    @locItem.Key.Loc.N (@lLMMI.Key.Loc.Code)
</option>

并将函数更改为：

function onChange() {
    var myDropDown = document.getElementById("mydropdown");
    var myValue = myDropDown.options[myDropDown.selectedIndex].value;
    var myDiv = document.getElementById("summary");
    fieldNameElement.innerHTML = myValue;
}

正如其他人提到的，您不能像那样使用 Razor（服务器端）和 Javascript（客户端）。想想 Razor 代码在页面加载时只运行一次。如果您想在页面加载后做一些事情，您需要将 Razor 变量分配给一些客户端元素并使用客户端代码（在您的示例中为 JavaScript）进行操作。