Блог

Главная - Вопросы по программированию - Каскадное выпадающее меню с использованием хранимой процедуры в asp.net mvc

Каскадное выпадающее меню с использованием хранимой процедуры в asp.net mvc

#c# #json #stored-procedures #model-view-controller #cascadingdropdown

Вопрос:

Я пытаюсь создать каскадный выпадающий список в Asp. Net MVC 5 с Entity framework, но есть проблема с его привязкой. В таблице категорий CATID, CATNAME являются полями, тогда как в таблице подкатегорий, SUBCATID, SUBCATNAME ,CATID являются полями.

Я сопоставил имена функций с хранимыми процедурами SP_BIND_CATEGORY() и SP_BIND_SUBCAT_BY_CAT в импорте функций браузера моделей.

Затем в контроллере использовал один метод для привязки категорий через viewbag и 2-й метод в качестве json для привязки подкатегорий.

   public class ItemController : Controller
{

    DB_ITEMEntities db = new DB_ITEMEntities();       

    public ActionResult Index()
    {
        ViewBag.catVG =new SelectList( db.SP_BIND_CATEGORY(),"CATID","CATNAME");
                   
        return View();
    }

    public JsonResult GetSubcat(int catid)
    {
       var subcat = db.SP_BIND_SUBCAT_BY_CAT(catid);
        return Json(new SelectList(subcat, "SUBCATID", "SUBCATNAME"));
       
    }
}

В представлении,

     <label>Category</label>
    @Html.DropDownList("ddlCat", ViewBag.catVG as SelectList,new { style = "width:100px" })

        <label>SubCategory</label>
       @Html.DropDownList("ddlSubCat", new SelectList(string.Empty, "Value", "Text"), "Please select a Sub Category", new { style = "width:100px" })

Ниже html используется некоторый справочный JavaScript для извлечения данных json с помощью jquery 1.10.2.min.js

     <script type="text/javascript">

$(document).ready(function () {

    $("#ddlCat").change(function () {
        $("#ddlSubCat").empty();
        $.ajax({

            type: 'POST',

            url: '@Url.Action("GetSubcat")', 
            dataType: 'json',
            data: { id: $("#ddlCat").val() },
            success: function (subcategories) {

                $.each(subcategories, function (i, subcategory) {

                    $("#ddlSubCat").append('<option value="'
                          subcategory.Value   '">'  
                        subcategory.Text   '</option>');
                });
            },
            error: function (ex) {
                alert('No Sub Categories Found : '   ex);
            }
        });
        return false;
    })
});

Только категория в раскрывающемся списке является обязательной, но элементы подкатегории не извлекаются при выборе категории. Опробовал несколько комбинаций, но **не смог выбрать подкатегорию**.

Метки: