选择列表下拉列表

本文关键字：下拉列表 列表 选择 | 更新日期: 2023-09-27 17:56:28

我正在尝试创建一个包含三个项目的下拉列表：

项目1项目2项目3

我希望我可以为项目 1、2 和 3 创建一个模型，但我需要使用选择列表或视图包并使用 ienumerable 下拉列表。

项目 1、2 和 3 存在于表中，我正在尝试将所选值传递为 1，将未选择的值传递为零。

你能告诉我在我的模型、视图和控制器中放了什么来做这件事吗？

这是我得到的：

<div>
@Html.DropDownListFor(Model => Model.ItemModel, new SelectList(Model.ItemModel, "Name",     "Number"), "-- Select One--", new { @class = "selector" })
</div>

选择列表下拉列表

这就是我使用 Knockout 和 Javascript 会做的事情：控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ChuckApplication.Controllers
{
    public class SelectlistController : Controller
    {
        //
        // GET: /Selectlist/
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult ProcessSelection(string selectedOption, string[] availableOptions)
        {
            //Do whatever you want with the selection result, I recommend you use a repository to handle it. 

            return Json("Success");
        }
    }
}

视图：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="~/Scripts/knockout-3.0.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/ViewModel.Selectlist.js"></script>
<select data-bind="options: availableOptions,  value: selectedOption" style="width: 177px !important"></select>
<button title="Process Selection" data-bind="click: ProcessSelection"></button>

Javascript ViewModel：

 function ViewModel() {
        var self = this;
        self.selectedOption = ko.observable();
        self.availableOptions = ko.observableArray([
            "Item 1",
            "Item 2",
            "Item 3"
        ]);
        self.ProcessSelection = function () {
            $.ajax({
                type: "POST",
                url: '/Selectlist/ProcessSelection',
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify({ selectedOption: vm.selectedOption(), availableOptions: vm.availableOptions() }),
                success: function (data) {                
                    console.log(data);
                }
            });
        }

    }

    var vm; //View Model
    $(document).ready(function () {
        vm = new ViewModel();
        ko.applyBindings(vm);

    })
相关文章：