將jQuery資料從視圖傳到控制器，并以多對多的方式保存。

如何將它們從視圖中傳遞到控制器中？

我找了一整天，都沒有找到怎么做，這就是我發這個帖子的原因。

public class Product
{
    public int ProductId { get; set; }
    public int Price { get; set; }
    public string ItemName { get; set; }    
    public IList<ProductInvoice> ProductInvoices { get; set; }
}

public class Invoice
{
    public int InvoiceId { get; set; }
    public DateTime InvoiceDate { get; set; }
    public IList<ProductInvoice> ProductInvoices { get; set; }
}
    
public class ProductInvoice
{
    [Key ]
    public int ProductId { get; set; }
    public Product 產品 { get; set; }

    [Key]
    public int InvoiceId { get; set; }
    public Invoice Invoice { get; set; }
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task< IActionResult> 創建([Bind("InvoiceId,InvoiceDate")] Invoice invoice) 
{
    if (ModelState.IsValid)
    {
        _context.Add(invoice)。
        await _context.SaveChangesAsync（）。
        return RedirectToAction(nameof(Index))。
    }
    returnView(invoice);
}


<script>
        $(document).ready(function () {

            var totalInvoice = 0;

            $("#btn-add-item").click(function ( ) {

                var selectedItem = $('#SelectedProducts :selected').text();
                var getCostPerItem = $('#SelectedProducts :selected').val();

                getCostPerItem = getCostPerItem.split("-")[1] 。
                getCostPerItem = getCostPerItem.split("。")[0]。
                totalInvoice = parseInt(totalInvoice)   parseInt(getCostPerItem);

                $('<div id="created_div">'   '<b> </b> '   selectedItem   ' :  $ '   ' '   getCostPerItem   '<a href="#" class="btn btn-danger btn-sm btn-remove-item float-right"> Remove< /a> </div> <br> ' /span>）。) insertAfter('#main-body-card') 。
                $("#total-invoice-input").val(totalInvoice)。
            });
        });
    </script>

uj5u.com熱心網友回復：

這里有一個完整的作業演示，你可以遵循：

public class Product
{
    public int ProductId { get; set; }
    public int Price { get; set; }
    public string ItemName { get; set; }
    public IList<ProductInvoice> ProductInvoices { get; set; }
}

public class Invoice
{
    public int InvoiceId { get; set; }
    public DateTime InvoiceDate { get; set; }
    public IList<ProductInvoice> ProductInvoices { get; set; }
}

public class ProductInvoice
{
    [Key ]
    public int ProductId { get; set; }
    public Product 產品 { get; set; }

    [Key]
    public int InvoiceId { get; set; }
    public Invoice Invoice { get; set; }

查看：

首先，在我的專案中，產品下拉串列的值是ProductId，文本是ItemName。

然后，為了傳遞相關的ProductId并添加到Invoice模型中，你需要添加隱藏（或不隱藏）的輸入，其名稱是：ProductInvoices[index].ProductId.

最后，Bind屬性([Bind("InvoiceId,CreatedDate,CreateByUser,TotalInvoice")])中的引數必須與模型Invoice匹配。

@model Invoice>    
<div class="row">
    <div class="col-md-4"/span>>
        <form asp-action="create">
            <div id="main-body-card"/span>> </div>>
            < div asp-validation-summary="ModelOnly"/span> class="text-danger"/span>> </div>>
            <div class="form-group"/span>>
                < label asp-for="InvoiceDate" class="controll-label"> </label>>
                < input asp-for="InvoiceDate" class="form-control" />
                < span asp-validation-for="InvoiceDate"/span> class="text-danger"/span>> </span>>
            </div>/span>
            <div class="form-group"> 
                < select id="SelectedProducts" asp-items="(SelectList)@ViewData["Products" ]"> </select>>
                < button type="button"/span> id="btn-add-item"/span>> 添加</按鈕>
            </div>/span>
            <label>total: </label>< input id="total-invoice-input" />。
            <div class="form-group"> 
                < input type="submit" value="Create" class=btn btn-primary" /> 
            </div> 
        </form>/span>
    </div>>
</div>      
@section Scripts
{
    <script>/span>
        $(document).ready(function () {
            var totalInvoice = 0;
            var i = 0; //add this.../span>
            $("#btn-add-item").click(function () {    
                var selectedItem = $('#SelectedProducts :selected').text() 。
                var getCostPerItem = $（'#SelectedProducts :selected'）.val（）。           
                totalInvoice = parseInt(totalInvoice)   parseInt(getCostPerItem)。  
                $('<div id="created_div">'   '<b> </b> '   selectedItem   ' :  $ '   ' '   getCostPerItem   '<a href="#" class="btn btn-danger btn-sm btn-remove-item float-right"> Remove< /a> < /div> <br> ' /span>）。) insertAfter（'#main-body-card'）。
                //add this.....
                $("<input value='" getCostPerItem "' name='ProductInvoices[" i "]。 ProductId' hidden/>").insertAfter('#created_div'/span>)。
                $("#total-invoice-input").val（totalInvoice）。
                i  ; //加入這個...。
            });
        });
    </script>>

控制器：

public IActionResult Create（）
{
    ViewData["Products"] = new SelectList(_context.Product.ToList(), "ProductId", "ItemName") 。
    return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task< IActionResult> 創建([Bind("InvoiceId,InvoiceDate,ProductInvoices"）] Invoice invoice）
{
    if (ModelState.IsValid)
    {
        _context.Add(invoice)。
        await _context.SaveChangesAsync（）。
        return RedirectToAction(nameof(Index))。
    }
    returnView(invoice);
}

結果：

標籤：

上一篇：從外部FTP服務器下載5M的1MB大小的檔案檔案到AWSS3

下一篇：ASP.netMVC自定義索賠