如何显示局部视图

Question

I have a page with information, i want to add there a list (in a form of table) within a partial view. User has to have an ability to sort it by switching radio box.

My problem: the code works fine (i have tried in a separate view), but when i try to switch radio button (they submit page on change and activate 2nd method, which create new model according to radio button) i get html code only from my partial view.

In other words:
i want to : HTML from view1 + HTML from myPartial
i get: only HTML from myPartial
I suppose problem is here (calling my myPartial ):

@Html.Action("_ShowEmployeeProjects", "Employee")

But when i try to use this:

@Html.Partial("Partial/_ShowEmployeeProjects")

I get this:

The model item passed into the dictionary is of type
'BTGHRM.Models.EmployeeJobDataViewModel', but this dictionary requires a model item of type 'System.Collections.Generic.List`1[BTGHRM.Models.EmployeeProjectHistoryModel]'.

My controllers code:

    public PartialViewResult _ShowEmployeeProjects() 
    {
        int EmpId = HRMSession.SelectedEmployeeId;

        using (var db = new HRMEntities())
        {
            List<EmployeeProjectHistoryModel> list = (from t1 in db.ProjectWorkers
                                                      join t2 in db.Projects
                                                      on t1.ProjectId equals t2.ProjectId
                                                      where (t1.WorkerId == EmpId && t1.IsActive == true)
                                                      select new EmployeeProjectHistoryModel()
                                                      {
                                                          ProjectName = t2.ProjectName,
                                                          Activity = t1.Activity,
                                                          StartDate = t1.StartDate,
                                                          EndDate = t1.EndDate
                                                      }).ToList();
            return PartialView("Partial/_ShowEmployeeProjects",list);
        }
    }
    [HttpPost]
    public PartialViewResult _ShowEmployeeProjects(string ActiveOnlySelect)
    {
        int EmpId = HRMSession.SelectedEmployeeId;
        List<EmployeeProjectHistoryModel> list;
        using (var db = new HRMEntities())
        {
            if (ActiveOnlySelect.Equals("both"))
            {
                list = (from t1 in db.ProjectWorkers
                        join t2 in db.Projects
                        on t1.ProjectId equals t2.ProjectId
                        where (t1.WorkerId == EmpId)
                        select new EmployeeProjectHistoryModel()
                        {
                            ProjectName = t2.ProjectName,
                            Activity = t1.Activity,
                            StartDate = t1.StartDate,
                            EndDate = t1.EndDate
                        }).ToList();
                list.OrderBy(x => x.StartDate);
            }
            else
            {
                list = (from t1 in db.ProjectWorkers
                        join t2 in db.Projects
                        on t1.ProjectId equals t2.ProjectId
                        where (t1.WorkerId == EmpId && t1.IsActive == true)
                        select new EmployeeProjectHistoryModel()
                        {
                            ProjectName = t2.ProjectName,
                            Activity = t1.Activity,
                            StartDate = t1.StartDate,
                            EndDate = t1.EndDate
                        }).ToList();
                list.OrderBy(x => x.StartDate);
            }
        }
        return PartialView("Partial/_ShowEmployeeProjects", list);
    }

My partial:

@model    List<BTGHRM.Models.EmployeeProjectHistoryModel>
@using (Html.BeginForm("_ShowEmployeeProjects", "Employee", FormMethod.Post, new { type = "main" }))
{
<table>
    <tr>
        <td>
            @Html.RadioButton("ActiveOnlySelect", "activeonly", true, new { id = "ActiveOnlySelect0", onchange = "this.form.submit();" })
            <label for="ActiveOnlySelect0">@Resources.Localization.show_only_actual</label>
        </td>
    </tr>
    <tr>
        <td>
            @Html.RadioButton("ActiveOnlySelect", "both", new { id = "ActiveOnlySelect1", onchange = "this.form.submit();" })
            <label for="ActiveOnlySelect1">@Resources.Localization.show_all_data</label>
        </td>
    </tr>
</table>
}
@{
    WebGrid grid = new WebGrid(Model, canSort: false, rowsPerPage: 15);
if (Model.Any())
{

    @grid.GetHtml(
    tableStyle: "table",
    headerStyle: "table_HeaderStyle",
    footerStyle: "table_PagerStyle",
    rowStyle: "table_RowStyle",
    alternatingRowStyle: "table_AlternatingRowStyle",
    selectedRowStyle: "table_SelectedRowStyle",
    columns: grid.Columns(
        grid.Column("ProjectName", Resources.Localization.project, style: "p30"),
        grid.Column("Activity", Resources.Localization.activity, style: "p30"),
        grid.Column("StartDate", Resources.Localization.start_date, format: @<text>
            @if (item.StartDate != null)
            {
                <span class="display-mode"><label id="StartDateLabel">@item.StartDate.ToShortDateString()</label></span>
                @Html.Hidden("Model.StartDate", (object)item.StartDate.ToShortDateString())
            }
            else
            {
                <span> &nbsp; </span>
            }</text>, style: "p10"),
        grid.Column("EndDate", Resources.Localization.end_date, format: @<text>
            @if (item.EndDate != null)
            {
                <span class="display-mode"><label id="EndDateLabel">@item.EndDate.ToShortDateString()</label></span>
                @Html.Hidden("Model.EndDate", (object)item.EndDate.ToShortDateString())
            }
            else
            {
                <span> &nbsp; </span>
            }</text>, style: "p10")
    )
    )
}

}

Answer 1

It looks like you are passing a wrong model to your partial. The structure will be:

In your principal Layout:

@model System.Collections.Generic.List[BTGHRM.Models.your_model]
<!-- DO YOUR HTML´S STUFF. You can access to your_model.employee´s list -->
@Html.Partial("Partial/_ShowEmployeeProjects", Model.projects)

In your Partial, remember to get the model which you are passing from your main layout:

@model System.Collections.Generic.List[BTGHRM.Models.your_model.projects]
<!-- DO YOUR HTML´S STUFF -->

Then, in your controller, you must return return:

[HttpPost]
    public PartialViewResult _ShowEmployeeProjects(string ActiveOnlySelect)
    {
        // DO YOUR MAGIC   
        // model should be a List[BTGHRM.Models.your_model]
        PartialView("Partial/_ShowEmployeeProjects", model);
    }

Model:

public class your_model
{
   List<Employee> employees;
   List<Project> projects;
.....
}