试图知道当前在 @Html.DropDownListFor 上选择了哪个元素

本文关键字：选择 元素 DropDownListFor @Html | 更新日期: 2023-09-27 18:33:38

我有一个这样的自定义视图模型：

namespace MyCustomNamespace.Models
{
    public class CustomViewModel
    {
        public CustomViewModel()
        {
            FirstViewModel = new FirstModel ();
            SecondViewModel = new SecondModel ();
        }
        public FirstModel FirstViewModel { get; set; }
        public SecondModel SecondViewModel { get; set; }
    }
}
namespace MyCustomNamespace.Models
{
   public class FirstModel 
   {
      public string id { get; set; }
      public string text { get; set; }
      public IEnumerable<SelectListItem> Items
      {
         (...)
      }
       (...)
   }
}

SecondModel类似于FirstModel。

在我看来，我确实使用剃刀：

@model MyCustomNamespace.Models.CustomViewModel
(...)
@Html.DropDownListFor(m => m.FirstViewModel.Id, Model.FirstViewModel.Items)
(...)

我用模型填充下拉列表。

我试图知道哪个是上面显示的下拉列表中的当前选定元素，但我不知道如何......也许通过模型？但是怎么做呢？

更新：这是我的真实模型类型，上面是关于我正在做的事情的示例。在这种情况下，FirstModel 将是 ComponentTypeModel：

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System;
using Resources;
namespace MyCustomNamespace.Models
{
    public class ComponentTypeModel
    {
        private readonly List<ComponentType> componentTypes;
        public ComponentTypeModel()
        {
            using (ConfigContext dbContext = new ConfigContext())
            {
                try
                {
                    componentTypes = dbContext.ComponentTypes.ToList();
                }
                catch (Exception ex)
                {
                    //EventLogger.LogException(ex);                    
                }
            }
        }
        [Display(Name = "Component Type")]
        public int SelectedCompTypeId { get; set; }
        public IEnumerable<SelectListItem> CompTypeItems
        {
            get
            {
                var allCompTypes = componentTypes.Select(f => new SelectListItem
                {
                    Value = f.ComponentTypeId.ToString(),
                    Text = f.Name
                });
                return DefaultCompTypeItem.Concat(allCompTypes);
            }
        }
        public IEnumerable<SelectListItem> DefaultCompTypeItem
        {
            get
            {
                return Enumerable.Repeat(new SelectListItem
                                               {
                                                   Value = "-1",
                                                   Text = "Select a component type"
                                               }, 
                                         count: 1);
            }
        }
    }
}

试图知道当前在 @Html.DropDownListFor 上选择了哪个元素

在您的模型中，您正在使用 

public IEnumerable<SelectListItem> Items
      {
         (...)
      }

这很好，但这样做，您需要手动设置所选项目。我建议你使用SelectList而不是SelectListItems列表。

因此，在您的视图模型中，您需要：

public SelectList Items {get; set;}

在控制器中填充该SelectList：

var myItems = GetMyCollectionOfItems(); //The list to display in the DropDownList
model.FirstViewModel.Items = new SelectList(myItems, "NameOfValueField", "NameOfTextField", selectedValue); //The selected value is optional

然后在您的视图中使用：

@Html.DropDownListFor(m => m.FirstViewModel.Id, Model.FirstViewModel.Items, "--- Select Item---", new { @id = "firstModelID" })

检查是否与您使用的代码相同，但这样，SelectList 知道选择了哪个项目，您无需手动执行任何操作。只需在 SelectList 构造函数中加载选择项的 id。

然后，如果您需要在客户端知道哪个是选定的项目，以便在Javascript中使用它来隐藏某些内容或类似的东西，您可以执行其他人回答的操作： 

$( document ).ready(function() {
   var mySelectedValue = $('#firstModelID').val();
   alert(mySelectedValue);  
});

如果您需要知道选择值何时更改：

$( document ).ready(function() {
   $('#firstModelID').change(function() {
       alert($('#firstModelID').val());
   });
});

更新后：

您在模型中拥有的所有代码都可以使用此答案中的代码大大简化。

您应该做一些更改：使 

[Display(Name = "Component Type")]
        public int SelectedCompTypeId { get; set; }
[Display(Name = "Component Type")]
        public int? SelectedCompTypeId { get; set; }  //Now this is nullable

如果你这样做，你不需要添加默认项目的东西......只需使用：

@Html.DropDownListFor(m => m.FirstViewModel.Id, Model.FirstViewModel.Items, "Select a component type", new { @id = "firstModelID" })

然后在您的控制器中，您可以看到它是 Null，您执行的等效操作相当于您收到"-1"时所做的操作。

现在，所有数据库访问都应远离模型。这样模型就更干净了：

public class ComponentTypeModel
    {
        [Display(Name = "Component Type")]
        public int? SelectedCompTypeId { get; set; }
        public SelectLis CompTypeItems { get; set:}
    }

然后在控制器中执行以下操作：

var model = new ComponentTypeModel();
model.CompTypeItems = new SelectList(dbContext.ComponentTypes.Select(x => x.Name, x.ComponentTypeId), "ComponentTypeId", "Name");

如果要默认选择其中一个(就像通常在"编辑"视图中所做的那样(，请执行以下操作：

var model = new ComponentTypeModel();
model.CompTypeItems = new SelectList(dbContext.ComponentTypes.Select(x => x.Name, x.ComponentTypeId), "ComponentTypeId", "Name", myDefaultValue);  //where the myDefaultValue is an int

视图中的 razor 代码应保持不变，因为有关所选项、项集合、要映射的字段的所有信息仍保留在控制器和模型中。

如果您在提交表单之前尝试了解它(在客户端(

 @Html.DropDownListFor(m => m.FirstViewModel.Id, Model.FirstViewModel.Items, "--- Select Item---", new { @id = "firstModelID" })

您可以通过以下方式检查其值： $('#firstModelID').val();

在

客户端的C#中无法识别，您必须为此使用jQuery/JavaScript，如下所示：

$("#FirstViewModel_Id").val();

var Id = $("#FirstViewModel_Id").val();
alert(Id);

除了这里的答案，你也可以这样做：

$("#FirstViewModel_Id option:selected").val();

所选值将在发布到服务器后发布模型 ( FirstViewModel ( 的 Id 属性中。

您可以访问

如果要在客户端上获取所选值，可以使用：

$("#FirstViewModel_Id").val();

或 

$("#FirstViewModel_Id option:selected").val();

如果第一个不起作用。

相关文章：