将选项值发送到查看的全局变量

本文关键字：全局变量 选项 | 更新日期: 2023-09-27 18:35:22

我试图将我的javascript上的下拉列表的值发送到同一视图中的变量，目的是我想使用所选选项的值在另一个下拉选项中创建一个if语句，我不知道任何其他方法可以做到这一点

这是我的JavaScript

$('#sel0').on('change', function () {
                       dataTable.columns('.fechas').search(this.value).draw();
                       date = $(this).val();
                      
                   });

这是我观点的变量：

@{
var Date = "";
}

这是我想要获取所选值的下拉列表：

  <select  id="sel0">
     <option value="">Todos</option>
          @foreach (var item in Model.Select(l => l.Fecha).Distinct())
               {
               <option value="@lines">@lines</option>
          
              }
     </select>

我希望能够根据我从下拉列表中获取的日期

输入列表的总值，例如：是我的下拉列表中的用户图片 1 日期，我应该能够获取该值并在列表的 foreach 语句中求和并创建一个输入，结果如下所示：

@foreach (var item in Model.Where(x => x.Date == this.Date)//date is the value i took from the user select option
            .Select(x =>
                {
                Rid = x.Rid,
               Total = x.Total
                 })
                 .GroupBy(l => l.Rid) //and then grouping
                  .Select(z => new
                  {
                  Turno = z.Key,
Total = Decimal.Round(z.Sum(l => l.Total), 0)
                  }))
                  {
                  <input value="@item)" />
                   }

任何帮助将不胜感激，我不知道任何其他方法可以做到这一点

将选项值发送到查看的全局变量

在浏览器中呈现视图后执行服务器代码的方式是：

  1. 表单发布，进行计算，重新渲染视图
  2. 对操作方法进行 Ajax 调用，将所选日期作为数据传递，在操作方法中处理逻辑并返回结果。成功后，使用收到的响应绘制您的输入（或填充其值）。

寻找您需要的选项示例有很多。

Razor 视图中的 C# 代码在服务器上执行并生成标记，并将返回给浏览器。选择元素更改事件的客户端 js 代码稍后在客户端发生。所选选项中的值不能用于再次执行 razor 中的某些代码。

您有 2 个选项。

使用所选选项的查询字符串值重新加载页面

当用户选择日期时，重新加载页面并将所选项目作为查询字符串传递。这意味着您需要更新当前的 GET 操作方法以接受此参数值，然后您将使用此值执行筛选器。

public ActionResult Index(DateTime? date)
{
   YourViewModel vm = new ViewModel();
   if(date!=null)
   {
     //Do your filtering based on the date.Value.
   }
   return View(vm);
}

当用户更改下拉列表时，使用选择选项值重新加载页面;

$('#sel0').on('change', function () {
   window.location.href="@Url.Action("Index","Home")?date="+$(this).val();
});

阿贾克斯

您可以对执行过滤器的服务器进行 ajax 调用，并将部分视图返回并将其注入到 DOM

$('#sel0').on('change', function () {
   $("#InputContainer").load("@Url.Action("GetDynamicInputs","Home")?date="+$(this).val());
});

现在确保在你的主页上你有一个容器div（我们将加载动态数量的输入），ID InputContainer

并有一个操作方法来接受日期并使用基于传递的日期值的过滤器返回部分视图

public ActionResult GetDynamicInputs(DateTime date)
{
  //use the date to determine the markup you want return from your partial view
  return PartialView();
}
相关文章：