C# 在一个页面上处理添加/查看/删除的最佳方式 我想做什么

我对MVC很陌生。 我正在尝试创建一个页面，允许用户在同一页面上执行以下操作：

• 查看列表（表）
• 添加新项目（填写表格并单击

  Add

  按钮应更新表格）
• 从列表中删除项目（单击行中的

  删除
  按钮应更新表格）

一个简单的例子如下所示，但实际上我在一个页面上有两个列表（费用和成本）：

问题: 实现这一目标的最佳方式是什么？ 我应该用看起来像这样的东西吗

public ActionResult MyAction(string submitButton, MyViewModel form)
{
    switch (submitButton)
    {
        case "AddFee":
            return (AddFee(form));
        case "AddCost":
            return (AddCost(form));
        case "RemoveFee":
            return (RemoveFee(form));
        case "RemoveCost":
            return (RemoveCost(form));
    }
}

public ActionResult AddFee(MyViewModel form)
{
    Fee newFee = ....; // Get entered data from `form`
    _repository.InsertFee(newFee);
    return View("Create"); //Back to the original page
}

---

或者是否有其他推荐的方法来处理此问题，例如使用JavaScript？

您可以将表创建为部分视图，并通过ajax重新呈现

将部分视图包装在一个div中，并将表单包装在@using（Ajax.BeginForm（..）中，并将包装div作为目标。Ajax请求所针对的控制器操作将需要返回一个部分视图

下面是一个简单的例子

public class HomeController : Controller
{
    public ActionResult Index()
    {
        MYvm vm = new MYvm() { id = 1, name = "This is my View Model" };

        return View(vm);
    }

    public ActionResult DA(MYvm vm)
    {
        vm.name = "CHANGED";
        return PartialView("Part", vm);
    }

视图：

@model mvcapapplication1.Controllers.HomeController.MYvm
@{
ViewBag.Title=“主页”；
}
@使用（Ajax.BeginForm（“DA”，“Home”，new AjaxOptions（）{UpdateTargetId=“cont”，HttpMethod=“Get”}））
{
Id:@Html.EditorFor（model=>model.Id）
名称：@Html.EditorFor（model=>model.Name）
}
@{Html.RenderPartial（“part”，Model）；}

局部视图

@model MvcApplication1.Controllers.HomeController.MYvm

@{
     ViewBag.Title = "part";
}

<h2>part</h2>

@Model.name

@model mvcapapplication1.Controllers.HomeController.MYvm
@{
ViewBag.Title=“部件”；
}
部分
@Model.name

我是否应该同意[先前的答案]

不，这个答案是针对一个不同的场景的，在这个场景中，问题有一个带有两个提交按钮的表单，它想要执行两个不同的操作（甚至不是该问题的公认答案）

您的示例屏幕截图表明，一些javascript/jquery和ajax可以很好地解决这个问题

由于您是MVC新手，请尽量使其相对简单。请将页面分成不同的部分：

• 包含页面
• 编辑表单
• 带有“删除”的列表

编辑/列表是独立工作的，并且应该以一种可以放在任何其他页面上的方式来编写-页面只是用来包含它们，其他功能不多（显然，您的真实页面将包含更多内容，但也可以将这些部分添加为单独的组件）

1为列表创建操作并编辑返回PartialView的表单-仅返回该视图所需的部分（自包含）

控制器：

[HttpGet]
public ActionResult AddCost()
{
    var model = new Cost();
    return PartialView(model);
}

[HttpPost]
public void AddCost(Cost model)
{
    if (ModelState.IsValid) {
        db.SaveCost(model);...
    }
}

表单视图/Home/AddCost.cshtml：

@using (Ajax.BeginForm(... 
{
    <div class='editor-label'>@Html.LabelFor(model=>model.Description)</div>
    ...etc...
}

列表，视图/Home/CostList.cshtml

@model IEnumerable<ViewModels.Cost>
<table>
    <thead>
       <tr>
           <th>Cost Description</th>
           ...
    <tbody>
        @foreach (var cost in Model.Costs) 
        {
            <tr data-id='@cost.Id'>
                <td>@Html.DisplayFor(x=>cost.Description)</td>
                ...
                <td><a href='#' class='remove-button'>Remove</a></td>
        }
        ...

这允许您通过ajax调用刷新列表，例如：

function reloadCostList() {
    $(".listWrapper").load("Home/CostList");
}

（理想情况下，$.ajax并添加一些奇特的UI以指示加载）

3向控制器添加删除操作

public ActionResult CostList() 
{
    var model = db.loadCosts(); ...
    return PartialView(model);
} 

[HttpPost]
public void RemoveCost(int id)
{
}

4用电线将连杆连接起来，然后拆下连杆

$(function() {
    $(".remove-button").click(function() {
        var id = $(this).closest("tr").attr("id");
        $.post("/Home/RemoveCost/" + id, null, function() {
            $(".listWrapper").load("Home/CostList");
            // or reloadCostList(); from above
            // or:
            //$(".listWrapper tr[id=" + id + "]").hide();
        });
    });
} 

---

不必重新加载整个列表，只需删除该行（添加一些奇特的UI，如淡出…）

使用ajax添加和删除项目将为您提供最佳性能，并避免必须提交然后重定向回同一页面。但是，如果您不想使用ajax，则应使用单独的表单将该帖子添加和删除回单独的操作（不是一种常用方法）。抱歉，我对这一点非常陌生，因此..部分视图中是否处理了

删除

操作，DA中是否处理了

添加

操作？感谢您的详细解释！我将尝试此操作！对于

@Html.action（“编辑”）

，

编辑是控制器中的一个方法，对吗？它是否应该返回部分视图？如果是，我如何设置它以便它知道要使用哪个部分视图？抱歉-键入-
@Html.Action（“AddCost”）
。当使用
返回部分视图（模型）
时，它将找到一个视图（.cshtml）使用与操作方法相同的名称。您可以使用
return PartialView（“viewname”，model）
指定不同的名称。
function reloadCostList() {
    $(".listWrapper").load("Home/CostList");
}

[HttpPost]
public void RemoveCost(int id)
{
}

$(function() {
    $(".remove-button").click(function() {
        var id = $(this).closest("tr").attr("id");
        $.post("/Home/RemoveCost/" + id, null, function() {
            $(".listWrapper").load("Home/CostList");
            // or reloadCostList(); from above
            // or:
            //$(".listWrapper tr[id=" + id + "]").hide();
        });
    });
}