在下拉列表所选索引更改 Razor MVC 时获取 SelectedItem 值-解网

问：

我有一个 Tblproduct，必须将其绑定到下面的下拉列表中：classList of GetTypes()

public partial class Tblproduct: AuditableEntity
{
    [DisplayName("Product Type")]
    public int? ProductTypeId { get; set; }


    public static List<SelectListItem> GetTypes()
    {
        List<SelectListItem> datas = new List<SelectListItem>();
    
        datas.Insert(0, new SelectListItem() { Value="",Text=""});
        datas.Insert(1, new SelectListItem() { Value= InventoryCatalogueID.ToString(), Text="Inventory Catalogue"});
        datas.Insert(1, new SelectListItem() { Value= ServiceCatalogueID.ToString(), Text="Service Catalogue"});
        datas.Insert(1, new SelectListItem() { Value= ServiceCatalogueID.ToString(), Text= "Sub-Assembly" });
        datas.Insert(1, new SelectListItem() { Value= ServiceCatalogueID.ToString(), Text= "Raw Material" });
        datas.Insert(1, new SelectListItem() { Value= ServiceCatalogueID.ToString(), Text= "Finish Good" });
        datas.Insert(1, new SelectListItem() { Value= ServiceCatalogueID.ToString(), Text= "Service Catalogue" });
    
        return datas;
    }
}

我有一个：ViewModel

public ProductVM(Tblproduct _model = null, bool isreadonly = false):base(_model, isreadonly,"ControllerName")
{
    types = Tblproduct.GetTypes();
}
        
public List<SelectListItem> types { get; set; }

我还成功地将列表绑定到以下下拉列表中：Tblproduct GetTypesView

<select2 asp-for="model.ProductTypeId" asp-items="@Model.types"/>

我现在正在努力的是，我需要根据选定的类型添加一些输入。我是否需要使用 Helper 来获取所选值？auto-post-back

但是如果我使用下拉列表将始终选择第一个值......auto-post-back

这是我的想象：

@if(Model.types = 'Finish Good'){
    //do something to add new input or select
}

但是如何获取Dropdownlist SelectedIndex或SelectedText更改？

C# razor 标记帮助程序 asp.net-core-tag-helpers

我不完全清楚你想做什么。您是否希望在根据当前值呈现视图时在服务器端执行某些条件？您是否希望在发布表单后在服务器端执行某些条件，再次基于的当前值？您是否希望在用户选择选项时执行一些客户端逻辑，而不必将表单发布到服务器？别的？我怀疑你没有完全理解这里的事件顺序。你能澄清一下吗？Model.ProductTypeIdModel.ProductTypeId

0赞 tryingtocode 5/9/2023

我正在尝试在基于Model.types的选定值发布表单后在服务器端执行某些条件。

1赞 David 5/9/2023

那么选择的值不是在？就是这样，不是吗？接收此表单帖子的控制器操作是什么？您进行了哪些调试来观察控制器操作接收到的内容？ProductTypeIdasp-for="model.ProductTypeId"

0赞 CodeCaster 5/9/2023

什么？这是 MVC，而不是 WebForms，对吧？auto-post-back

0赞 tryingtocode 5/9/2023

尊敬的@David，是的，在 ProductTypeID 中选择了值。我正在尝试根据选定的 ProductTypeID 添加一些其他输入字段。我假设它需要纯javascript selectedIndexChange才能根据所选值显示新的输入字段？

答：

0赞 Md Farid Uddin Kiron 5/12/2023 #1

如何获取下拉列表SelectedIndex或SelectedText更改？

看起来，您正在尝试在更改下拉列表值时从剃刀页面中提取提交的下拉列表值。

它可以通过使用 javascript 或不使用 javascript 的 onchnage 事件来实现。我向您展示剃须刀页面，因为javascript one很简单，因此您可以自己完成。

让我们在实践中看看我们如何实现这一目标。

首先，我们需要一个 onchnage 事件，该事件将在发生任何下拉更改事件时执行。

此外，通过提交的值，您可以筛选列表并检索预期值。

让我们看一下代码片段：

剃刀 cshtml.cs：

public class OnDropdownValueChangeModel : PageModel
    {
        public static List<SelectListItem> GetAll()
        {
            return new List<SelectListItem>
            {
                new SelectListItem() { Value = "0",  Text = "Please Select Value" },
                new SelectListItem() { Value = "1", Text = "Inventory Catalogue" },
                new SelectListItem() { Value = "2", Text = "Service Catalogue" },
                new SelectListItem() { Value = "3", Text = "Sub-Assembly" },
                new SelectListItem() { Value = "4", Text = "Raw Material" },
                new SelectListItem() { Value = "5", Text = "Finish Good" },
                new SelectListItem() { Value = "6", Text = "Service Catalogue" }
            };
        }
        public List<SelectListItem> selectListItems = new List<SelectListItem>();
        public string? ProductTypeId { get; set; }
        public string? SelectedValue { get; set; }

        public void OnGet()
        {
            selectListItems = GetAll();
        }
        public void OnPostMyMethod()
        {
            var dropdownChangedValue = Request.Form["ProductTypeId"].ToString();
            selectListItems = GetAll();
            var searchSelectedValueFromDropdownList = selectListItems.Where(item => item.Value == dropdownChangedValue).First().Text;
            SelectedValue = searchSelectedValueFromDropdownList;
        }
    }

Razor cshtml：

@page
@model RazorPageDemoApp.Pages.OnDropdownValueChangeModel
@{
}
<form method="post" asp-page-handler="MyMethod">
    <select class="form-control"
            asp-for="ProductTypeId"
            asp-items="Model.selectListItems"
            onchange="this.form.submit();">
    </select>
</form>

@if (@Model.SelectedValue != null)
{
    <div class="alert alert-success">
       <label>Your seleted value were:</label> @Model.SelectedValue
    </div>
}

输出：

注意：如果您仍需要任何进一步的帮助，可以参考此示例。

上一个：以编程方式使用 AnchorTagHelper 的输出

下一个：ASP.NET Core：将 Id 从视图发送到控制器

在下拉列表所选索引更改 Razor MVC 时获取 SelectedItem 值

Get SelectedItem Value while Dropdownlist Selected Index Change Razor MVC

评论