3 Каскад выпадающего списка с использованием MVC3 и LinqSql - PullRequest
0 голосов
/ 01 августа 2011

У меня есть 3 выпадающих списка, я хочу сделать 3 выпадающих списка с каскадом.Я использую LinqSql для базы данных ..

У меня есть 3 таблицы Product (id, name), Design (id, master_id, name), Model (id, design_id, name) master_id, привязанный к Product (id),design_id привязан к Design (id) ..

Я хочу создать одно раскрывающееся меню, в котором будут отображаться Продукты, а затем, когда я выберу продукт, оно сделает раскрывающееся меню «Дизайн», иначе оно останется отключенным.сложная часть, которую я не мог решить, и мне нужно хорошее объяснение, здесь я создаю 3-й выпадающий список, который обычно отключается до тех пор, пока не будет выбран дизайн.

Каждый из них заполнит нижний выпадающий список, связанный с ними.Продукт активирует и заполняет Дизайн, Дизайн активирует и заполняет Модель.Я могу сделать это с помощью 2 выпадающих меню, но когда дело доходит до 3 выпадающих списков, я очень сильно застрял на них (замораживание мозгов) ..

Я уже проверил другие вопросы, не мог найти никакого решения для себя.Как я уже сказал, я использую LinqSql, мне нужно решение о 3-х каскадном раскрывающемся списке для этого типа данных.

спасибо уже за все, что вы можете сделать!и если вы можете объяснить партиалы Model-View-Controller и параметры и почему вы их используете, это было бы здорово.Я немного новичок в этом MVC3.

Ответы [ 2 ]

2 голосов
/ 02 августа 2011

Я бы подошел к проблеме примерно так:

Во-первых, в контроллере мы настроим следующие методы:

public JsonResult GetDesignsForProduct(int productId)
{
  // Instantiate our context and do whatever goo we need to select the objects we want
  using (MyDatabaseContext ctx = new MyDatabaseContext())
  {
     return Json(ctx.Designs.Where(d => d.master_id == productId).ToList(), JsonRequestBehavior.AllowGet);
  }
}

public JsonResult GetModelsForDesign(int designId)
{
  // Instantiate our context and do whatever goo we need to select the objects we want
  using (MyDatabaseContext ctx = new MyDatabaseContext())
  {
     return Json(ctx.Models.Where(d => d.design_id == designId).ToList(), JsonRequestBehavior.AllowGet);
  }
}

Я включил "получить" здесь; если ваши данные содержат конфиденциальную информацию - имена пользователей / адреса электронной почты, другие проприетарные или юридически защищенные данные и т. д. - вы можете изменить это, чтобы разрешить только «публикацию», и соответствующим образом изменить свой Javascript. См. Статью Фила Хаака .

.

Кроме того, если вы ожидаете, что эти данные будут часто меняться, эти методы будут кэшировать их по умолчанию в соответствии с настройками кэша вашего приложения. Вы можете добавить атрибут OutputCache в метод, чтобы изменить это поведение.

Тогда в представлении у вас будет какая-то сантехника AJAX, что-то вроде этого:

function LoadDesigns() {
    // Get the currently-selected value in our Product dropdown
    var prod = $("#Product").val();

    // Call our controller method and process the list of Design objects
    $.getJSON('@Url.Content("~/ControllerName/GetDesignsForProduct")', { productId: prod },
        function (designs) {
            $("#Design").empty();
            $.each(designs, function (i, c) {
                $("#Design").append(
                    $('<option></option>').val(c.id).html(c.name)
                );
            });
    });
}

function LoadModels() {
    // Get the currently-selected value in our Design dropdown
    var des = $("#Design").val();

    // Call our controller method and process the list of Model objects
    $.getJSON('@Url.Content("~/ControllerName/GetModelsForDesign")', { designId: des },
        function (models) {
            $("#Model").empty();
            $.each(models, function (i, c) {
                $("#Model").append(
                    $('<option></option>').val(c.id).html(c.name)
                );
            });
    });
}

Наконец, определите все три раскрывающихся списка следующим образом:

@Html.DropDownList("Product", productSelectList, new { onchange = "LoadDesigns()" })
@Html.DropDownList("Design", null, new { onchange = "LoadModels()" })
@Html.DropDownList("Model")

Не забывайте, что HTML-помощники на самом деле являются просто ярлыками для генерации базового HTML-кода, а в Razor вы часто просто переходите прямо к HTML, а не возитесь с помощниками. Так что вы могли бы так же легко написать это как:

<select id="Product" onchange="LoadDesigns()">
  @foreach (var prod in products) {
    <option value="@prod.id">@prod.name</option>
  }
</select>

<select id="Design" onchange="LoadModels()"></select>

<select id="Model"></select>
1 голос
/ 09 августа 2011

Забудьте, чтобы установить мою законченную работу .. Люди могут хотеть видеть, как это происходит .. Вот мой:

Просмотр + Jquery

$(function () {
    $("select#Design").attr('disabled', 'true');
    $("select#Model").attr('disabled', 'true');

    $("select#Product").click(function () {
        var prod = $("select#Product option:selected").val();
        if (prod == "" || prod == 0) {
            $("select#Design").attr('disabled', 'true');
            $("select#Model").attr('disabled', 'true');
        } else {
            $.getJSON('@Url.Content("~/Admin/GetDesigns/")', { productId: prod }, function (data) {
                $("select#Design").empty();
                $("select#Model").empty();
                $.each(data, function (i, c) {
                    $('select#Design').append('<option value="' + c.Value + '">' + c.Text + '</option>');
                })
                $("select#Design").removeAttr('disabled');
                $("select#Design option:first").attr('selected', 'selected');

                var des = $("select#Design option:selected").val();
                if (des == "" || des == 0) {
                    $("select#Model").attr('disabled', 'true');
                } else {
                    $.getJSON('@Url.Content("~/Admin/GetModels/")', { designId: des }, function (data) {
                        $("select#Model").empty();
                        $.each(data, function (i, c) {
                            $('select#Model').append('<option value="' + c.Value + '">' + c.Text + '</option>');
                        })
                        $("select#Model").removeAttr('disabled');
                        $("select#Model option:first").attr('selected', 'selected');
                     })
                  }
               })
            }
         })
     })

причина, по которой я использую Jquery таким образом, чтобы заполнить все выпадающие списки и выбрать первые элементы в качестве выбора по умолчанию! Когда я выбираю элемент из первого раскрывающегося списка, два других раскрывающихся списка начинают заполняться и выбирают свой первый элемент в качестве выбора по умолчанию. Тот же код можно использовать для других функций щелчка раскрывающихся списков, например:

            $("select#Design").click(function () {
                var des = $("select#Design option:selected").val();
                if (des == "" || des == 0) {
                    $("select#Model").attr('disabled', 'true');
                } else {
                    $.getJSON('@Url.Content("~/Admin/GetModels/")', { designId: des }, function (data) {
                        $("select#Model").empty();
                        $.each(data, function (i, c) {
                            $('select#Model').append('<option value="' + c.Value + '">' + c.Text + '</option>');
                        })
                        $("select#Model").removeAttr('disabled');
                        $("select#Model option:first").attr('selected', 'selected');
                    })
                }
           });

View

@using (Html.BeginForm("Index", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table>
    <tr>
        <td style="background-color:#e8eef4;" rowspan="3">
        </td>
        <td style="width:190px; background-color:#e8eef4;">
            @Html.DropDownList("Product", (SelectList)ViewData["ProductList"], "Please Select Product", new { style = "width:190px; padding:4px; margin:4px;" })
        </td>
        <td rowspan="3" style="width:400;">
        </td>
        <td style="background-color:#e8eef4;">
        </td>
        <td style="background-color:#e8eef4;" rowspan="3">
        </td>
    </tr>
    <tr>
        <td style="background-color:#e8eef4;">
            <select id="Design" style="width:190px; padding:4px; margin:4px;">
            <option label="Please Select Design" selected="selected"></option>
            </select>
        </td>
        <td style="background-color:#e8eef4;">
        </td>
    </tr>
    <tr>
        <td style="background-color:#e8eef4;">
            <select id="Model" style=" width:190px; padding:4px; margin:4px;">
            <option label="Please Select Model"></option>
            </select>
        </td>
        <td style="background-color:#e8eef4;">
        </td>
    </tr>
</table>
}

Просто я использую linqtosql, и мне лень создавать репозиторий. Это мой КОНТРОЛЛЕР

public class AdminController : Controller
{
    public linqVipDataContext db = new linqVipDataContext();

    //
    // GET: /Admin/
    public ActionResult Index()
    {
        IEnumerable<SelectListItem> ProductItems = db.Products.AsEnumerable().Select(c => new SelectListItem()
        {
            Text = c.name,
            Value = c.id.ToString(),
            Selected = true,
        });
        SelectList prod = new SelectList(ProductItems, "Value", "Text");
        ViewBag.ProductList = prod;
        return View();
    }


    //
    //Fill the Design List..
    public JsonResult GetDesigns(int productId)
    {
        /*var data = dbs.Designs.Where(d => d.master_id == productId).ToList();*/

        IEnumerable<SelectListItem> DesignItems = db.Designs.Where(c => c.master_id == productId).AsEnumerable().Select(c => new SelectListItem()
        {
            Text = c.name,
            Value = c.id.ToString()
        });
        SelectList des = new SelectList(DesignItems, "Value", "Text");
        return Json(des, JsonRequestBehavior.AllowGet);
    }

    //
    //Fill the Model List..
    public JsonResult GetModels(int designId)
    {   
        /*This code down here! Doesnt work and says it's type is unknown*/
        /*var data = dbs.Models.Where(d => d.design_id == designId).ToList();*/

        /*For that reason im using this code*/
        IEnumerable<SelectListItem> ModelItems = db.Models.Where(d => d.design_id == designId).AsEnumerable().Select(c => new SelectListItem()
        {
            Text = c.name,
            Value = c.id.ToString()
        });
        SelectList mods= new SelectList(ModelItems, "Value", "Text");
        return Json(mods, JsonRequestBehavior.AllowGet);
    }

Json требует отдельного параметра Value и Text 2 для создания опции selectlist. Поэтому я должен вернуть свое значение таким образом.

Я опубликовал это, потому что обнаружил некоторые сбои в вашем коде, еще раз за то, что показал мне это решение, оно дало мне идею и позволило мне решить все проблемы, так что это полностью рабочий код. Снова Тай. Надеюсь, что это полезно.

...