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

本文关键字：代码 mvc 变量 剃刀 javascript net asp | 更新日期: 2023-09-27 18:26:30

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

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

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

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

目前的情况是，所选项目无法全局访问，这导致了您可以在下面看到的问题。

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

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

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

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

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

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

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

我现在不能向您提供实际的代码，但现在就可以了。

您的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（服务器端）和Javascriptazor代码在页面加载时只运行一次。如果你想在页面加载后做一些事情，你需要将Razor变量分配给一些客户端元素，并使用客户端代码操作，在你的例子中是JavaScript。

相关文章：