MVC Tabs and Partial Views

Question

Im quite new to MVC and have this huge application which requires using tabs and partial views . I have a ViewModel whose fields are lists of my EF classes. Im passing this view model class (ProjInfoVM) into my ProjInfo View. The view has 3 tabs which are form representing each of the EF Classes- they all require to be posted back for submission. My first challenge is getting the forms to display{ I already created the 3 strongly typed partial views} but dont know how to display them as i keep getting the error : The model item passed into the dictionary is of type 'SMS2.Models.ProjectInfoVM', but this dictionary requires a model item of type 'SMS2.Models.ProjResc' My Second Challenge is how to post the individual forms back to the controller - here i have no idea on how to achieve this... I need help

Below is my code :

ProjInfoVM.cs

public partial class ProjectInfoVM
    {
        public ProjCourse ProjCourse { get; set; }
        public ProjDocument ProjDocuments { get; set; }
        public ProjResc ProjRescs { get; set; }
    }

ProjResc Partial View

@model SMS2.Models.ProjResc

    @using (Html.BeginForm()) {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        <fieldset>
            <legend>ProjResc</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.RescId)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.RescId)
                @Html.ValidationMessageFor(model => model.RescId)
            </div>
    .....
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

.... Same format applies to the remaining 2 Partial{_ProjDoc and _ProjCourses}

ProjResc.cs {Same applies to the other two classes}

 public partial class ProjResc
    {
        public int RescId { get; set; }
        public int ProjectId { get; set; }
        public Nullable<int> SponsorId { get; set; }
        public decimal StipendAmt { get; set; }
        public string StipendFreq { get; set; }
    }

Now I have my ProjInfo Controller with Action ProjInfo as below :

 public ActionResult ProjInfo()
        {

            ProjectInfoVM vm = new ProjectInfoVM();
           ...Populate vm contents here....           

            return PartialView(vm);
        }

and my ProjInfo View as below...

@model SMS2.Models.ProjectInfoVM

@{
    ViewBag.Title = "ProjInfo";
}
    <div class="panel panel-default tabs">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="active"><a href="#tab-first" role="tab" data-toggle="tab">Project Resources</a></li>
                                <li><a href="#tab-second" role="tab" data-toggle="tab">Project Restrictions</a></li>
                                <li><a href="#tab-third" role="tab" data-toggle="tab">Project Documents</a></li>
                                <li><a href="#tab-four" role="tab" data-toggle="tab">Project Courses</a></li>
                            </ul>
                            <div class="panel-body tab-content">
                                <div class="tab-pane active" id="tab-first">

                                    <h2>Partial View content  : @Model.ProjCourse.CourseName</h2>

                                   @Html.Partial("_ProjCourse", Model.ProjCourse)
                                                                </div>
                                <div class="tab-pane" id="tab-second">

                                    @Html.Partial("_ProjResc", Model.ProjResc)

                                </div>.......

I keep getting this error..

The model item passed into the dictionary is of type 'SMS2.Models.ProjectInfoVM', but this dictionary requires a model item of type 'SMS2.Models.ProjResc'

Can someone shed light into where im missing it alltogether...Please

Answer 1

In the partial view you have @model SMS2.Models.ProjResc that should be changed to @model ProjectInfoVM

For the second part check to overloads of Html.BeginForm() you can specify the controller and the action which will process your post. Hope that helps