如何使用 Javascript (Razor) 根据文本框的值过滤模型

Question

这个问题可能完全没有意义，但我是 MVC 和 Razor 的新手。

这是我想要做的：

1. 我有一个简单的表“产品”，从中检索所有 使用我的模型的值。 products 表有一个字段 Id、Name、 价格和开始日期。
2. 我将数据从控制器传递到 列表形式的视图
3. 在视图中，我有一个自动完成字段 (KendoUI)，我在其中键入 产品名称
4. 在事件处理程序中 的 AutoCoplete 更改事件，我想检索“价格” 在自动完成文本框中输入的产品

以下是产品代码：

public class Product
{
    public int ID { get; set; }
    public string Name { get; set; }
    public DateTime FirstRelease { get; set; }
    public decimal Price { get; set; }
}

public class WidgetsDBContext : DbContext
{
    public DbSet<Product> Products { get; set; }
}

我的视图代码（部分代码）如下：

<div id="auto">
    <p>Start typing</p>
    <label for="productAutoComplete">Please select procuct:</label> 
    @(Html.Kendo().AutoComplete()
        .Name("productAutoComplete")
        .DataTextField("Name")
        .BindTo(Model)
        .Filter(FilterType.StartsWith)
        .Placeholder("Select the product")
        .HighlightFirst(true)
        .Suggest(true)
    )

   <script>
       function productAutoComplete_change() {
           var gauge = $("#linearGauge").data("kendoLinearGauge");
           @foreach (var p in Model)  <==== HERE I WANT TO DO THE FILTERING   
           {
               @: gauge.value(@p.Price);
           }                      
       }

       $("#productAutoComplete").bind("change", productAutoComplete_change);

   </script>
</div>

对验证的关注：如果我很好地理解了 MVC 和 Razor 的基础知识，那么我认为视图被渲染一次（在 HTTP GET 期间）并且因此我无法在 Razor 中动态过滤模型（但仅在 Javascript 中）？如果是，那么正确的方法是什么？

提前谢谢你

左撇子

Answer 1

我认为视图被渲染一次是否正确（在 HTTP GET），因此我无法动态过滤模型 Razor（但仅在 Javascript 中）？

是的，没错。

如果是，那么正确的做法是什么？

您可以使用 AJAX。例如，在productAutoComplete_change 函数中，您可以向控制器操作发送 AJAX 请求，该操作将执行过滤并返回包含过滤结果的局部视图。

有很多关于在 ASP.NET MVC 中使用 AJAX 的教程。例如，对于 jQuery，您可以使用 $.ajax() 函数。