How to render Action by accessing controller in this case?

Question

I’m using a ready template and I use the bootstrap, but the menu transaction is done through javascript animations and with the tag <Section> html, as follows:

<section class="section" id="registerProfessionalUser">
        <div class="container">            
            @Html.RenderAction("Create", "ProfessionalUser")
        </div>
    </section>

But when I click the button it does not render the page I want with this @Html.RenderAction("Create", "ProfessionalUser)

and that’s just what I need to do, if I use the RenderPage it even renders the HTML, but does not pass through Action Create which is what I need (and I also think is not a good practice), because in this action it returns to the View two lists that I need to use.

Action Create:

public ActionResult Create()
        {
            ProfessionalSpecializationDAO pSpecializationDAO = new ProfessionalSpecializationDAO();
            ViewBag.ListProfessionalSpecialization = pSpecializationDAO.ListProfessionalSpecialization(0);            

            ProfessionalTypeDAO pTypeDAO = new ProfessionalTypeDAO();
            ViewBag.ListProfessionalType = pTypeDAO.ListProfessionalType(0);

            return View();
        }

View Create:

@using ManyLife.ASP.Areas.Professional.Models
@model ManyLife.ASP.Models.ProfessionalUser

<style>
    .editor-field input {
        width: 100%;
    }
</style>

<div class="container row" style="margin-left: auto; margin-right: auto">
    <h2 class="text-center title">Novo Profissional</h2>

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

        <fieldset>
            <legend></legend>
            <div class="col-sm-4">
                <div class="editor-label">
                    @Html.LabelFor(model => model.IdProfessionalUser)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.IdProfessionalUser)
                    @Html.ValidationMessageFor(model => model.IdProfessionalUser)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Email)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Email)
                    @Html.ValidationMessageFor(model => model.Email)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.ReEmail)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.ReEmail)
                    @Html.ValidationMessageFor(model => model.ReEmail)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Password)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Password)
                    @Html.ValidationMessageFor(model => model.Password)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.RePassword)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.RePassword)
                    @Html.ValidationMessageFor(model => model.RePassword)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Name)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Name)
                    @Html.ValidationMessageFor(model => model.Name)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.IdProfessionalRegister)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.IdProfessionalRegister)
                    @Html.ValidationMessageFor(model => model.IdProfessionalRegister)
                </div>
            </div>
            <div class="col-sm-4">
                <div class="editor-label">
                    @Html.LabelFor(model => model.IdProfessionalSpecialization)
                </div>
                <div class="editor-field" style="overflow-y: auto; height: 200px;">
                    <label>Especializações:</label>
                    @{
                        foreach (var item in ViewBag.ListProfessionalSpecialization)
                        {
                            <label>specialty</label>
                        }
                        Html.ValidationMessageFor(model => model.IdProfessionalSpecialization);                       
                    }
                </div>

                <div class="editor-field" style="overflow-y: auto; height: 200px;">
                    <label>Tipos:</label>
                    @{
                        foreach (var item in ViewBag.ListProfessionalType)
                        {
                            <label>specialty</label>
                        }
                    }
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.City)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.City)
                    @Html.ValidationMessageFor(model => model.City)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.State)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.State)
                    @Html.ValidationMessageFor(model => model.State)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Phone)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Phone)
                    @Html.ValidationMessageFor(model => model.Phone)
                </div>
            </div>

        </fieldset>
        <p>
            <input type="submit" value="Create" />
        </p>
    }
</div>

Answer 1

What you’re trying to get falls more into the concept of Actions with PartialViews. Therefore, some small changes to your code are required.

Main Html

<section class="section" id="registerProfessionalUser">
    <div class="container">            
        @Html.Action("ProfessionalUser")
    </div>
</section>

Your Controller

[ChildActionOnly]
public ActionResult ProfessionalUser()
{
    ProfessionalSpecializationDAO pSpecializationDAO = new ProfessionalSpecializationDAO();
    ViewBag.ListProfessionalSpecialization = pSpecializationDAO.ListProfessionalSpecialization(0);            

    ProfessionalTypeDAO pTypeDAO = new ProfessionalTypeDAO();
    ViewBag.ListProfessionalType = pTypeDAO.ListProfessionalType(0);

    return PartialView(new ProfessionalUser());
}

The View is ok.