Place Partial View Html elements below the Main View's Html elements - asp.net-mvc-5

Question

My Goal is to make a CreatePartialCategoryView within an index View. View loads just fine, bet there is just one small problem:
The CreatePartialView html elements are placed above the Index View's html elements. It looks like this at the moment:
Here's the code for the index view:
#model IEnumerable<GUI.Models.CategoryViewModel>
#Html.Partial("~/Views/Category/CreatePartial.cshtml",new GUI.Models.CategoryViewModel());
#{
ViewBag.Title = "Categories";
}
<h2>Categories</h2>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
#Html.ActionLink("Details", "Details", new { id=item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
Here's the code of the CreatePartialView:
#model GUI.Models.CategoryViewModel
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Create a new Category</h4>
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
And this is the code for the CategoryController:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BLL;
using ClassLibrary.Entities;
using DAL;
using GUI.Models;
namespace GUI.Controllers
{
public class CategoryController : Controller
{
private readonly IRepository<Category> _repository;
private CategoryHandler _categoryHandler;
public CategoryController() : this(new Repository<Category>())
{
}
public CategoryController(IRepository<Category> repository)
{
_repository = repository;
_categoryHandler = new CategoryHandler(repository);
}
//
// GET: /Category/
public ActionResult Index()
{
var categories = _categoryHandler.GetAllCategories();
var categoryViewModels = new List<CategoryViewModel>();
foreach (Category category in categories)
{
var viewModel = new CategoryViewModel();
viewModel.Id = category.Id;
viewModel.Name = category.Name;
categoryViewModels.Add(viewModel);
}
//return View();
return View(categoryViewModels);
}
//
// GET: /Category/Details/5
public ActionResult Details(Guid id)
{
return View();
}
//
// GET: /Category/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Category/Create
[HttpPost]
public ActionResult Create(CategoryViewModel model)
{
try
{
// TODO: Add insert logic here
string categoryName = model.Name;
_categoryHandler.AddNewCategory(categoryName);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: /Category/Edit/5
public ActionResult Edit(Guid id)
{
return View();
}
//
// POST: /Category/Edit/5
[HttpPost]
public ActionResult Edit(Guid id, FormCollection collection)
{
try
{
// TODO: Add update logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: /Category/Delete/5
public ActionResult Delete(Guid id)
{
return View();
}
//
// POST: /Category/Delete/5
[HttpPost]
public ActionResult Delete(Guid id, FormCollection collection)
{
try
{
// TODO: Add delete logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
}
So, how do I place the CreatePartialView html elements (Create form) below the index View elements (the list)?

Answer 1

Why don't you just put the line:
#Html.Partial("~/Views/Category/CreatePartial.cshtml",new GUI.Models.CategoryViewModel());
Just below your table listing the categories? like :
<table class="table">
...
#Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
#Html.ActionLink("Details", "Details", new { id=item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
#Html.Partial("~/Views/Category/CreatePartial.cshtml",new GUI.Models.CategoryViewModel());

Answer 2

Perhaps I'm misunderstanding you, but don't you just need to move #Html.Partial call below your list in your view?
#model IEnumerable<GUI.Models.CategoryViewModel>
#{
ViewBag.Title = "Categories";
}
<h2>Categories</h2>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
#Html.ActionLink("Details", "Details", new { id=item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
#Html.Partial("~/Views/Category/CreatePartial.cshtml",new GUI.Models.CategoryViewModel());