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

Question

抱歉，我对 MVC 还是很陌生。我目前有一个带有一些选项的下拉列表。我想做的是取决于我选择的下拉列表值，然后我应该能够呈现部分视图。我希望用户从下拉列表中选择后立即加载部分视图。

另外，我可以渲染我的局部视图，但它没有返回我需要的内容。当我从下拉列表中选择时，它不使用函数 ID。它只返回所有项目，而不考虑函数 ID。

我希望根据 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 参数添加到操作中并使用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');
    })
})