在主視圖的Html元素下方放置部分視圖Html元素

Question

我的目標是在索引視圖中創建一個CreatePartialCategoryView。查看加載就好，下注只有一個小問題：

CreatePartialView html元素位於索引視圖的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元素（創建表單）放置在索引視圖元素（列表）下方？

Answer 1

你爲什麼不乾脆把線：

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

Answer 2

也許我誤解了你，但是你不需要在你的視圖中將@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());