如何在MVC 5上的同一页面中实现索引和创建?

时间:2016-04-25 21:52:23

标签: c# asp.net asp.net-mvc asp.net-mvc-partialview

我是 MVC 的初学者,我正在尝试创建一个网络应用,我希望用户能够创建新项目并在同一页面中查看它们。 我试图通过在Index视图中使用Create Action的部分视图来完成此操作。

问题是我无法从子项重定向到索引以在创建新项目后更新列表。我收到此错误(不允许子操作执行重定向操作。

这是我的模特

 public class Expense
{
    public int Id { get; set; }

    [Required]
    public string Title { get; set; }

    [Required]
    [DataType(DataType.Currency)]
    public decimal Amount { get; set; }

    //[Required]
    public string ApplicationUserId { get; set; }
}

,这是我的索引和创建操作

    public ActionResult Index()
    {
        return View(db.Expenses.ToList());
    }
    public ActionResult Create()
    {
        return PartialView("Create", new Expense());
        //return View();
    }

    // POST: /Expense/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include="Id,Title,Amount,ApplicationUserId")] Expense expense)
    {
        if (ModelState.IsValid)
        {
            expense.ApplicationUserId = User.Identity.GetUserId();
            db.Expenses.Add(expense);
            db.SaveChanges();
            return RedirectToAction("Index"); // Here is where The exception is thrown
        }
        return View();
    }

这是我的索引视图

@model IEnumerable<HomeManager.Models.Expense>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Amount)
        </th>
        <th></th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Amount)
            </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>
<p>
    @Html.ActionLink("Create New", "Create")
    @{Html.RenderAction("Create", "Expense");}
</p>

这是我的创建视图

@model HomeManager.Models.Expense

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Expense</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Amount, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Amount)
                @Html.ValidationMessageFor(model => model.Amount)
            </div>
        </div>

        @*<div class="form-group">
            @Html.LabelFor(model => model.ApplicationUserId, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ApplicationUserId)
                @Html.ValidationMessageFor(model => model.ApplicationUserId)
            </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>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

2 个答案:

答案 0 :(得分:3)

发生错误是因为表单的html正在生成

<form action="/Expense/Index" method="post">

不是action="/Expense/Create"因为它需要。如果您在Index() GET和Create(Expense expense) POST方法上都设置了断点,那么当您提交表单时,您会看到它们同时触及它们。

要解决此问题,请在部分视图的BeginForm()方法中明确设置操作和控制器名称

@using (Html.BeginForm("Create", "Expense"))

请注意,由于您的Create() GET方法未执行任何逻辑,因此您也可以使用

@{ Html.RenderPartial("Create", new Expense()); }

代替RenderAction

答案 1 :(得分:-1)

如果您试图立即显示新记录,那么我建议您使用像Knockout,Angular Js或Ember这样的Javascript库。

或者,如果您只想使用MVC,则需要对方法进行ajax调用,该方法返回更新的Expense记录的部分视图,并将此局部视图放在视图中的DOM中。