Question

我需要在我的MVC3项目中开发两个下拉列表，其中第一个下拉列表将是数据库驱动的，并且基于第一个下拉列表中选择的数据，我的第二个下拉列表应该更改。第二个下拉列表具有硬编码文本和值。我怎么能得到这个。请帮忙

Following is my codebased

viewmodel

public IEnumerable<SelectListItem> ProductTypeCode{ get; set; }
public int? ProductID { get; set; }


public IEnumerable<SelectListItem> ProductGroupCode;
public int? ProductGrpID { get; set; }

Controller

public ActionResult Index()     {         
var model = new MyViewModel         
{             
// TODO: Fetch those from your repository ,
model.ProductTypeCode= new SelectList(obj.ProductTypeCode as                   System.Collections.IEnumerable, "Value", "DispalyText");
return view(model);

}

VIEW


@Html.DropDownListFor(m => m.ProductID , Model.ProductTypeCode, "ALL" , new { @class = "DropDownList" })</td>

我的问题是基于上面的productType下拉列表，我需要填充另一个名为“ProductGroup”的下拉列表，该下拉列表具有硬编码值。根据ProductType下拉列表，productgroup的值应该更改。

Answer 1

您有几种选择。

您可以编写自己的javascript来处理onchange事件。关于这个确切的主题，有数以千计的简单教程。 This one可能会最好地解决您的问题。
你可以使用extensions like Telerik's.他们相对简单，文档齐全，但确实有另外一个库的额外权重（尽管他们生成的标记相当渺茫）。

如果您使用选项1并编写自己的选项，那么您必须添加的两个主要内容将是额外的控制器操作和一些JavaScript。

javascript会监听您的产品ID下拉列表中的更改事件。把它放在页面本身的文档就绪函数中。

$("#ProductID").change(function() {

    // Get the product id selected
    var id = $(this).val();

    // Fire off an ajax request to get the groups
    $.ajax({
        // whatever the url may be.
        url: "@Url.Action("Groups")" + id, // Append the id to the url.
        dataType: "json",
        type: "POST",
        error: function() {
            alert("An error occurred.");
        },
        success: function(data) {
            var items = "";
            $.each(data, function(i, item) {
                items += "<option value=\"" + item.Id+ "\">" + item.Name + "</option>";
            });

            // Set the secondary dropdown content to the newly created
            // list of options.  Use whatever Id your secondary is.
            $("#ProductGroup").html(items);
    });

控制器操作使用适当的产品组列表响应ajax调用。

public class ProductsController : Controller
{
    public ActionResult Groups(int id)
    {
        // You only need the id and a name field in the response, not the
        // entire object.
        var groups = _myService.FindGroupsForProductId(id)
            .Select(g => new 
            {
                Id = g.Id, 
                Name = g.Name
            });

        // Return a json result.  You only need to re
        return Json(groups);
    }
}

上面的代码可以帮助您入门。它假设您在代码中根本没有显示的几件事情。你的问题被低估了，因为一开始你没有发布任何代码。然后，您发布的代码并没有真正表明您已经付出了任何努力来自行寻找解决方案。找一些关于这个的jquery教程，有成千上万，如果你有特定的问题，请把它们带到这里。

使用静态数据进行级联下拉列表

1 个答案: