CODEWITHSUNDEEP
javascriptasp.netasp.net-mvcasp.net-mvc-4razor
coffeetime
coffeetime

Reputation: 131

Loading partial view depending on dropdown selection in MVC

I apologize I am still fairly new to MVC. I currently have a dropdownlist with some options. What I would like to do is depending on the dropdownlist value that I select then I should be able to render a partial view. I want the partial view to load as soon as the user selects from the dropdownlist.

Also, I am able to render my partial view but it's not returning what I need. When I select from the dropdownlist it does not take the functionID..it just returns all of the items regardless of the functionID.

I want the partial view to render based off the functionID.

Thank you very much. Any help is very much appreciated it.

Main View

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


        <div id="partialPlaceHolder">

        </div>

Partial View

        @foreach (var items in Model.itemTypeList)
        {

            <pre> @items.Definitions</pre>



        }

Controller

  [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');
    });
  });
});

Upvotes: 1

Views: 11029

Answers (1)

hasan
hasan

Reputation: 3502

I have added NetFiddle. It works here

Can you try to add selectedItem param into action and use jquery .load() function to get partial result into your target element.

[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');
    })
})

Upvotes: 2

Related Questions