Question

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

项目1 第2项第3项

我希望我可以为第1,2和3项创建模型，但我需要使用选择列表或视图包并使用ienumerable，dropdownlist。

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

您能否告诉我我的模型，视图和控制器中的内容是否适用于此工作？

以下是我所拥有的：

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

Answer 1

这是我使用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);


    })

选择列表下拉列表

1 个答案: