Question

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

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);
            }

        }
    }
}

Answer 1

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

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

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

因此，在您的ViewModel中，您需要：

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" })

然后在你的控制器中，你可以看到它是空的，你做的就是当你收到“-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

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

Answer 2

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

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

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

Answer 3

在客户端无法识别C＃，你必须使用jQuery / JavaScript，例如：

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

Answer 4

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

alert(Id);

Answer 5

在向服务器发布帖子后，所选值将位于已发布模型的Id属性中（FirstViewModel）。

您可以访问

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

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

或

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

如果第一个不起作用。

Answer 6

除了这里的答案，您还可以这样做：

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

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

6 个答案: