如何在部分视图mvc中显示来自ajax调用的数据 [英] How to show data from ajax call in partial view mvc

问题描述

嗨


当我点击第一个下拉列表时，它会找到该类别的子项，但这些值以纯文本显示，而不是在我的部分视图下拉列表中。我做错了什么？



我想用局部视图制作级联下拉列表，所以当我点击下拉列表时，它会自动填充下拉列表那个类别的孩子。但我有点卡在这一个。



我真的很喜欢这个。



这是我一直在尝试的代码。

我的控制器：

Hi
When I click on the first dropdown it finds the children for that category, but the values is showing in plain text and not in my partial views dropdown. What am I doing wrong??

I want to make cascading dropdowns with the partial view, so when I click on the dropdown list it will automatic fill the dropdown list with the children of that category. But I am a little bit stuck on this one.

I am really new on this one.

This is my code that I have been trying.
My Controller :

[HttpGet]
        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()
            });
    
                return Json(subcategories, JsonRequestBehavior.AllowGet);   
        }

我的部分观点：

My partial view :

@model ASPNetMarketplace.Models.Listing

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

我的Indexview：

My Indexview :

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

                    <div id="dynamicContent">
                    @{
                        Html.RenderPartial("DropDownList", Model);
                    }
                </div>

索引视图上的脚本：

The script on the indexview :

<script>
    //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).val()           
            //Send the information to the controller
            $.ajax({
                type: 'GET',
                url: '@Url.Action("CategoryList", "Manage")', // we are calling json method
                data: { catId: id },               
                //here we are get value of selected item and passing same value
                // to input to the json method CategoryList.
                success: function (data) {

                    $.each(data, function (id, data) {                    (($('#dynamicContent').html($('<option></option>').val(data.Value).html(data.Text));
                    });                  
                }
            });
        });
    });  
</script>

推荐答案

）{
/ / Dropdownlist Selectedchange事件

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

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

（ this ）。val（）
// 将信息发送给控制器

这篇关于如何在部分视图mvc中显示来自ajax调用的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！