将部分视图Html元素放在主视图的Html元素下面

Question

我的目标是在索引视图中创建一个CreatePartialCategoryView。查看负载就好了，打赌只有一个小问题：

CreatePartialView html元素位于Index View的html元素上方。现在看起来像这样：

以下是索引视图的代码：

@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>

以下是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")
}

这是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();
        }
    }
   }
  }

那么，如何将CreatePartialView html元素（Create form）放在索引View元素（列表）下面？

Answer 1

也许我误会了你，但你不是只需要在你的视图中将@Html.Partial电话移到你的列表下面吗？

@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());

Answer 2

你为什么不把这句话放在一边：

@Html.Partial("~/Views/Category/CreatePartial.cshtml",new  GUI.Models.CategoryViewModel());

在您的表格下方列出类别？喜欢：

<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());