Question

我道歉我仍然是MVC的新手。我目前有一个下拉列表，其中包含一些选项。我想要做的是取决于我选择的下拉列表值，然后我应该能够渲染局部视图。我希望用户从下拉列表中选择时加载部分视图。

此外，我能够渲染我的局部视图，但它没有返回我需要的东西。当我从下拉列表中选择时，它不会使用functionID ..它只返回所有项目而不管functionID。

我希望部分视图基于functionID进行渲染。

非常感谢你。非常感谢任何帮助。

主视图

    @Html.DropDownListFor(m => m.FunctionID, new 
    SelectList(Model.functionList, "FunctionID", "Name"), "Select 
    Function", new {@id="id"})


        <div id="partialPlaceHolder">

        </div>

部分视图

        @foreach (var items in Model.itemTypeList)
        {

            <pre> @items.Definitions</pre>



        }

控制器

  [HttpGet]
    public ActionResult ViewOverview()
    {


        List<Function> functionList;
        List<ItemType> itemTypeList;


        using (BusinessLogic BLL = new BusinessLogic())
        {


           functionList = BLL.GetFunctionList();
           itemTypeList = BLL.GetItemTypesList();

        }


        Words viewModel = new Words();
        MetricDefinitions(viewModel);

        return View(viewModel);


    }


[HttpGet]
    public ActionResult GetWords()
    {

        List<Function> functionList;
        List<ItemType> itemTypeList;


        using (BusinessLogic BLL = new BusinessLogic())
        {


           functionList = BLL.GetFunctionList();
           itemTypeList = BLL.GetItemTypesList();


        }


        Words viewModel = new Words()
        {

            itemTypeList = itemTypeList,
            functionList = functionList

        };


        return PartialView("_ViewWords", viewModel);
    }




    private void MetricDefinitions(Words model)
    {
        List<Function> functionList;
        List<ItemType> itemTypeList;




        using (BusinessLogic BLL = new BusinessLogic())
        {


            functionList = BLL.GetFunctionList();
            itemTypeList = BLL.GetItemTypesList();

        }

        model.functionList = functionList;
        model.itemTypeList = itemTypeList;



    }

的javascript

$(document).ready(function () {

$('#id').change(function () {

    var selectedID = $(this).val();
     $.get('/Home/GetWords/' + selectedID, function (data) {
        $('#partialPlaceHolder').html(data);
        /* little fade in effect */
        $('#partialPlaceHolder').fadeIn('fast');
    });
  });
});

Answer 1

我添加了NetFiddle。它有效here

您是否可以尝试将selectedItem param添加到操作中并使用jquery .load()函数将部分结果添加到目标元素中。

[HttpGet]
public ActionResult GetWords(int selectedItem) // add your selectedVal value in controller
{
       .....
}

<强> jquery的

// it is going to parse partial view into target div
$("#id").on("change", function(){

    var url = '@Url.Action("GetWords", "Home")' + "?selectedItem="  + $(this).val();

    $("#partialPlaceHolder").load(url, function(){
         console.log("It worked");
         $('#partialPlaceHolder').fadeIn('fast');
    })
})

根据MVC中的下拉选择加载部分视图

1 个答案: