时间戳

首页 > 解决方案 > .Net Core：我想在值所在的同一页面上创建表

c# - .Net Core：我想在值所在的同一页面上创建表

问题描述

当我单击按钮时，我想在输入下创建表。如果我单击多个按钮，我也想向表中添加新值。我不想去新视图，所以表应该在输入所在的同一视图中。

这是我的控制器：

[HttpGet]
public ViewResult Index()
{

     return View();
}

[HttpPost]
public ViewResult Index(Bilgi bilgi)
{
     return View();
}

这是我的模型：

public class Bilgi
{     

     public string insankaynagi { get; set; }
     public string birim { get; set; }
     public string miktar { get; set; }      

}

这是我的观点

@model Bilgi    
@{
    Layout = null;
}    
<!DOCTYPE html>    
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" asp-action="Index">
 <p>
            <label asp-for="insankaynagi"> Proje Özeti  </label>
            <input asp-for="insankaynagi" />
        </p>
        <p>
            <label asp-for="birim"> Birim  </label>
            <input asp-for="birim" />
        </p>
        <p>
            <label asp-for="miktar"> Miktar  </label>
            <input asp-for="miktar" />
        </p>
 <p>
            <button type="submit">Add</button>
        </p>

 </form>

标签： c#.netasp.net-mvcasp.net-core

解决方案

如果您想组合创建视图和索引视图。我建议你可以使用ViewComponent来实现它。

您可以设置在视图组件中显示所有数据的表并将其附加到创建表单。

下面是一个简单的演示：

1.以Bilgi.cs为例：

public class Bilgi
{
    public string Id {get;set;}
    public string insankaynagi { get; set; }
    public string birim { get; set; }
    public string miktar { get; set; } 

}

public DbSet<Bilgi> Bilgis{ get; set; }

MyApp/ViewComponents2.在文件夹中创建一个ViewComponent （ViewComponents如果文件夹不存在则创建）

public class BilgisTableViewComponent : ViewComponent
{
    private readonly ApplicationDbContext db;
    public BilgisTableViewComponent(ApplicationDbContext context)
    {
        db = context;
    }
    public async Task<IViewComponentResult> InvokeAsync()
    {
        return View(await db.Bilgis.ToListAsync());
    }
}

3.创建Views/Shared/Components folder. 此文件夹必须命名为Components.

4.创建Views/Shared/Components/BilgisTable/Default.cshtmlRazor视图展示表格，文件夹名称BilgisTable对应BilgisTableViewComponent

@model IEnumerable<Bilgi>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.insankaynagi)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.birim )
            </th>
            <th>
                @Html.DisplayNameFor(model => model.miktar)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.insankaynagi)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.birim)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.miktar)
                </td>

            </tr>
        }
    </tbody>
</table>

5.在索引视图中，调用 ViewComponent

@model Bilgi

<div class="row">
    <div class="col-md-4">
        <form asp-action="Index" method="post">

            <div class="form-group">
                <label asp-for="insankaynagi" class="control-label">Proje Özeti </label>
                <input asp-for="insankaynagi" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="birim" class="control-label">Birim </label>
                <input asp-for="birim" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="miktar" class="control-label">Miktar  </label>
                <input asp-for="miktar" class="form-control" />
            </div>
            <div class="form-group">
                <input type="submit" value="Add" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@await Component.InvokeAsync("BilgisTable")

6.动作

public async Task<IActionResult> Index()
{       
    return View();
}

[HttpPost]
public async Task<IActionResult> Index(Bilgi bilgi)
{
    if (ModelState.IsValid)
    {
        _context.Add(bilgi);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    return View();

}

推荐阅读