Partial View Renders as Full Page

Question

User-523892225 posted

I am trying to create a partial view which will render a table below a drop box when a button is clicked but instead of rendering as a partial view it is rendering as its own page. I'm new to MVC so I know it's something stupid I am doing but have been unable to figure it out. I would appreciate it if someone could advise me as to what I am doing wrong.

Here is my controller:

[HttpPost]
public PartialViewResult GetCourseListPartial(string courseType)
{
    List<ILT_COURSE_LIST> courseList = 
                _context.ILT_COURSE_LIST.Where(c => c.COURSE_TYPE == 
    courseType.ToUpper()).ToList();
    CourseTypeViewModel viewModel = new CourseTypeViewModel
    {
        CourseList = courseList
    };

    return PartialView(viewModel);
}

Here is my partial view:

@model DHSS_Training_App.ViewModels.CourseTypeViewModel

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">Click any course for more detail</th>
        </tr>
    </thead>
    <tbody>
        @if (Model.CourseList != null)
        {
            foreach (var item in Model.CourseList)
            {
                <tr>
                    <td>@item.COURSE_NAME</td>
                </tr>
            }
        }
    </tbody>
</table>

And here is the View I want the above partial view to render to:

@model DHSS_Training_App.ViewModels.CourseTypeViewModel

@{
    ViewBag.Title = "CourseType";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row justify-content-center text-center">
    <div class="divBackgroundColor col align-self-center">
        @using (Html.BeginForm("GetCourseListPartial", "Enroll", FormMethod.Post))
        {
            <div class="courseTypeDropdownStyle input-group col-">
                @Html.DropDownListFor(m => m.CourseTypes, new SelectList(
          Model.CourseTypes, "SEQ", "COURSE_TYPE"), "Choose Course Type",
              new { @class = "form-control form-control-style fluid-type" })
                <div class="input-group-append col-">
                    <button class="btn btn-custom" type="submit">Submit</button>
                </div>
            </div>
        }            
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-6">            
            @{ Html.RenderPartial("GetCourseListPartial"); }
        </div>
    </div>
</div>

Answer 1

User475983607 posted

The GetCourseListPartial() action specifically returns a partial.   The form action calls invokes this action and why a partial is returned. 

Change the GetCourseListPartial() action to return the View or redirect to the action that returns the View you want.  I assume View/Action is named CourseType but cannot be sure.

I recommend dropping the partial as it make your code a bit more complex with no real benefit.

Answer 2

User-474980206 posted

a form post back always replaces the page with the response html. if you return a partial, thats all the browser will display. If you want to do a partial update of the html, then you need to use javascript and ajax to update the dom directly, rather than a post back.

you should post back to the main action, and add a Model.CourseType.

              @Html.DropDownListFor(m => m.CourseType, new SelectList(
          Model.CourseTypes, "SEQ", "COURSE_TYPE"), "Choose Course Type",
              new { @class = "form-control form-control-style fluid-type" })
                <div class="input-group-append col-">
                    <button class="btn btn-custom" type="submit">Submit</button>
                </div>
   

... 

    @{ Html.RenderPartial("GetCourseListPartial", Model.CourseType); }

Answer 3

User-523892225 posted

Change the GetCourseListPartial() action to return the View or redirect to the action that returns the View you want

So you mean to change the GetCourseListPartial() action to this:

[HttpPost]
public PartialViewResult GetCourseListPartial(string courseType)
{
    List<ILT_COURSE_LIST> courseList = 
        _context.ILT_COURSE_LIST.Where(c => c.COURSE_TYPE == courseType.ToUpper()).ToList();
    CourseTypeViewModel viewModel = new CourseTypeViewModel
    {
        CourseList = courseList
    };

    return PartialView("GetCourseType", viewModel);
}

If that is the case, I actually had that at one point but I get a null reference error on the dropdown menu section of my GetCourseType.cshtml file I thought I couldn't do it.  

I recommend dropping the partial as it make your code a bit more complex with no real benefit.

I would love to but cannot figure out another way to do what I need to do. The dropdown menu consists of different course types. The user selects a type, clicks the submit button and a table with a list of courses of the selected course type is rendered below the dropdown menu.

Answer 4

User475983607 posted

If that is the case, I actually had that at one point but I get a null reference error on the dropdown menu section of my GetCourseType.cshtml file I thought I couldn't do it.  

The symptom indicates you forgot to populate the select options in the ViewModel.

I would love to but cannot figure out another way to do what I need to do. The dropdown menu consists of different course types. The user selects a type, clicks the submit button and a table with a list of courses of the selected course type is rendered below the dropdown menu.

You misunderstand how MVC works.  Replacing this...

@{ Html.RenderPartial("GetCourseListPartial"); }

With 

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">Click any course for more detail</th>
        </tr>
    </thead>
    <tbody>
        @if (Model.CourseList != null)
        {
            foreach (var item in Model.CourseList)
            {
                <tr>
                    <td>@item.COURSE_NAME</td>
                </tr>
            }
        }
    </tbody>
</table>

is the same as both approaches generate the HTML on the server.  The resulting HTML - what the browser sees - is exactly the same.

Answer 5

User-523892225 posted

OK, Thank you. I will do as you suggest.

Answer 6

User475983607 posted

jhackney01

OK, Thank you. I will do as you suggest.

The Getting Started tutorials cover standard MVC patterns like filtering.

https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/

It might be worth a few hours of your time.

Answer 7

User-523892225 posted

The Getting Started tutorials cover standard MVC patterns like filtering.

https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/

It might be worth a few hours of your time.

I'll go through it, thanks.  I've already been through a course on Udemy and another on LinkedIn Learning and I can get through stuff that is covered in those courses easy enough. It's the scenarios that aren't covered where I run into problems.  

Thank you again for your help.