在asp.net中使用ajax调用创建新的下拉列表 [英] Make new dropdown list with ajax call in asp.net

问题描述

您好b $ b

我这个网页有多个类别。我在实体框架中使用自引用表构建表，因此用户可以创建具有多个子项的类别。



我想要一个带有类别的下拉列表，当你单击下拉菜单，我获取值并使用ajax将值发送到控制器并检查此类别是否有子项并在新的下拉列表中填充它。



我已经完成了这个功能，但是当我点击下拉列表中的硬编码下拉列表时，如何创建一个填充新下拉列表的函数？



这是我的查看代码：

Hi
I have this web page with multiple categories. I have build the table with a self reference table in entity framework, so the user can create categories with multiple children.

I want an dropdown list with categories and when you click on the dropdown menu, I get the value and send the value with ajax to the controller and check if this category have children and populate this in an new dropdown list.

I have done this function, but how do I make a function that populate a new dropdownlist everytime when I click in the dropdown list with out hardcode the dropdown list??

This is my view code :

@Html.DropDownList("CategoryId", ViewBag.CategoryId as SelectList, "Select a Category", new { id = "CategoryId", @class = "form-control" })<br />

        @Html.DropDownList("Subcategory", new SelectList(string.Empty, "Value", "Text"), "Please select a Subcategory", new { @class = "form-control" })

视图中的ajax调用：

The ajax call in the view :

 //Run Jquery script
jQuery(document).ready(function ($) {
   //Dropdownlist Selectedchange event
    $("#CategoryId").change(function () {
        //Take the Id from the dropdown list when selected an item
        var id = $(this).find(":selected").val()
        var catId = { "catId": id }
        //Make the dropdown empty
        $("#Subcategory").empty();
        //Send the information to the controller
        $.ajax({
            type: 'POST',
            url: '@Url.Action("CategoryList", "Manage")', // we are calling json method

            data: JSON.stringify(catId),

            contentType: 'application/json; charset-utf-8',
            //here we are get value of selected item and passing same value
            // to input to the json method CategoryList.
            success: updateDropdown
        });
    });



});
var updateDropdown = function (subcategories) {

    if (subcategories.length == 0) {
        console.log("NO DATA!")
    }
    else {
        var ddl = $('#Subcategory');
        $.each(subcategories, function (index, item) {
            $(document.createElement('option'))
            .attr('value', this.Id)
            .text(item.Text)
            .appendTo(ddl);


            //$("#Subcategory").append('<option value="' + item.Value + '">' +
            //      item.Text + '</option>');

        });
    }
};

[HttpPost]
       public JsonResult CategoryList(int catId)
       {

           var subcategories = (from s in db.Categories where s.ParentCategoryId == catId select new SelectListItem {
               Text = s.Name, Value = s.ParentCategoryId.ToString()

           });

               //If the category have children do this
               return Json(subcategories, JsonRequestBehavior.AllowGet);




       }

希望有人可以让我朝着正确的方向前进

Hope someone could get me in the right direction

推荐答案

）{
// Dropdownlist Selectedchange事件

（ #CategoryId）。change（ function （）{
// < span class =code-comment>选择项目时从下拉列表中选择ID
var id =

("#CategoryId").change(function () { //Take the Id from the dropdown list when selected an item var id =

（ this ）。find（ ：选择）。val（）
var catId = { catId：id}
// 将下拉列表设为空

(this).find(":selected").val() var catId = { "catId": id } //Make the dropdown empty

这篇关于在asp.net中使用ajax调用创建新的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！