当我在 .Net razor 页面中发布数据时，为什么我的部分视图没有更新？

问题描述 投票：0回答：1

我正在构建一个 Web 应用程序来接受印刷业务的订单。将订单商品添加到购物车后，我希望在同一页面的部分视图中更新购物车的内容。该项目是一个 .NET 8.0 Razor 应用程序。

页面模型：


    [BindProperty]
    public Order Order { get; set; }
    [BindProperty]
    public IFormFile Upload { get; set; }
    [BindProperty]
    public ItemType ItemType { get; set; }
    [BindProperty]
    public string ArtistName { get; set; }
    [BindProperty]
    public decimal HeightInInches { get; set; }
    [BindProperty]
    public decimal WidthInInches { get; set; }
    [BindProperty]
    public int Quantity { get; set; }
    
    public CustomerOrderModel(TabunkaPrinting.Data.TabunkaPrintingContext context, Microsoft.AspNetCore.Hosting.IWebHostEnvironment env, IFileShareHelper fileShareHelper)
    {
        this.context = context;
        this.env = env;
        this.fileShareHelper = fileShareHelper;
        Order = new Order();
    }
    
    public IActionResult OnGet()
    {
        return Page();
    }
    
    public PartialViewResult OnPostOrderItem()
    {
        if (string.IsNullOrEmpty(Order.Id))
        {
            Order.Id = Guid.NewGuid().ToString();
        }
    
        var filePath = Path.Combine(this.env.ContentRootPath, "uploads", Upload.FileName);
        using (var fileStream = new FileStream(filePath, FileMode.Create))
        {
            Upload.CopyToAsync(fileStream);
        }
    
        int heightInPx;
        int widthInPx;
        using (Image image = Image.FromFile(filePath)) 
        {
            heightInPx = image.Height;
            widthInPx = image.Width;
        }
            
        string artistName = ArtistName;
        decimal heightInInches = HeightInInches;
        decimal widthInInches = WidthInInches;
        ItemType itemType = ItemType;
        int quantity = Quantity;
    
        Artwork artwork = new Artwork(filePath, artistName, heightInPx, widthInPx);
    
        OrderItem orderItem = new OrderItem()
        {
            Id = Guid.NewGuid().ToString(),
            OrderId = Order.Id,
            Artwork = artwork,
            HeightInInches = heightInInches,
            WidthInInches = widthInInches,
            ItemType = itemType,
            Quantity = quantity,
            TotalPriceInDollars = (heightInInches * widthInInches) * PricePerSquareInch
        };
    
        Order.AddOrderItem(orderItem);
    
        return Partial("_OrderItemsPartial", Order.OrderItems);
    }

订购页面：

@page
@using TabunkaPrinting.Models;
@using System.IO;
@model TabunkaPrinting.Pages.Orders.CustomerOrderModel
@{

    ViewData["Title"] = "Customer Order";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<div class="row">
    <table>
            <tr>
                <th>
                    Upload File
                </th>
                <th>
                    Artist Name
                </th>
                <th>
                    Height (Inches)
                </th>
                <th>
                    Width (Inches)
                </th>
                <th>
                    Item Type
                </th>
                <th>
                    Quantity
                </th>
            </tr>
            <tr>
                <form asp-page-handler="orderitem" method="post" enctype="multipart/form-data" id="orderItemForm">
                    <td>
                        <input type="file" asp-for="Upload" />
                    </td>
                    <td>
                        <input name="artistName" type="text" asp-for="ArtistName"/>
                    </td>
                    <td>
                        <input name="heightInInches" type="number" asp-for="HeightInInches"/>
                    </td>
                    <td>
                        <input name="widthInInches" type="number" asp-for="WidthInInches"/>
                    </td>
                    <td>
                        <select name="itemType" asp-for="ItemType" asp-items="Html.GetEnumSelectList<ItemType>()"></select>
                    </td>
                    <td>
                        <input name="quantity" type="number" asp-for="Quantity"/>
                    </td>
                    <td>
                        <button id="addOrderItem" class="btn">
                            Add Item
                        </button>
                    </td>
                </form>
            </tr>
            <partial name="_OrderItemsPartial" model="Model.Order.OrderItems" id="orderItems"></partial>
    </table>
    <div class="col-12">
        <form asp-page-handler="order" method="post">
            <div class="form-group">
                <label asp-for="Order.CustomerEmail" class="cointrol-label"></label>
                <input asp-for="Order.CustomerEmail" class="form-control" />
                <span asp-validation-for="Order.CustomerEmail" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Order.RecipientName" class="cointrol-label"></label>
                <input asp-for="Order.RecipientName" class="form-control" />
                <span asp-validation-for="Order.RecipientName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Order.StreetAddress" class="cointrol-label"></label>
                <input asp-for="Order.StreetAddress" class="form-control" />
                <span asp-validation-for="Order.StreetAddress" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Order.City" class="cointrol-label"></label>
                <input asp-for="Order.City" class="form-control" />
                <span asp-validation-for="Order.City" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Order.State" class="cointrol-label"></label>
                <input asp-for="Order.State" class="form-control" />
                <span asp-validation-for="Order.State" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Order.ZipCode" class="cointrol-label"></label>
                <input asp-for="Order.ZipCode" class="form-control" />
                <span asp-validation-for="Order.ZipCode" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn" />
            </div>
        </form>
    </div>
</div>

@section scripts{
    <script>
        document.getElementById('addOrderItem').addEventListener("click", function () {
            $.ajax({
                url: '/CustomerOrder?handler=OrderItem',
                method: "POST",
                data: $('#orderItemForm').serialize(),
                success: function (result) {
                    $("#orderItems").html(result);
                }
            });
        });
    </script>
}

部分视图（位于 Pages\Shared_OrderItemsPartial.cshtml）：

@using Printing.Models

@model List<OrderItem>

@foreach (var orderItem in Model)
{
    string fileName = System.IO.Path.GetFileName(orderItem.Artwork.FilePath);
    string itemType = orderItem.ItemType.ToString();
    string quantity = orderItem.Quantity.ToString();
    <tr>
        <td>
            @Html.DisplayFor(item => fileName);
        </td>
        <td>
            @Html.DisplayFor(item => orderItem.Artwork.Artist);
        </td>
        <td>
            @Html.DisplayFor(item => orderItem.HeightInInches);
        </td>
        <td>
            @Html.DisplayFor(item => orderItem.WidthInInches);
        </td>
        <td>
            @Html.DisplayFor(item => itemType);
        </td>
        <td>
            @Html.DisplayFor(item => quantity);
        </td>
    </tr>
}

该帖子似乎工作正常，因为图像文件已成功上传并且数据已保存。但是，当返回部分视图时，我仅获得部分视图，而不是“主”视图中的部分视图。返回的 Html 如下所示： <tr> <td> imageName.png; </td> <td> artistName; </td> <td> 5.00; </td> <td> 5.00; </td> <td> Gloss; </td> <td> 1; </td> </tr> 

而不是仅
返回部分视图，我需要将主视图中的

标签替换为部分视图。我究竟做错了什么？我一直在尝试密切关注 learnrazorpages.com，但没有解决这个问题。

c# ajax asp.net-core razor razor-pages
1个回答
0
投票

这是因为按钮内部没有指定 type="button"，否则默认会提交表单。

将按钮更改为：

<button id="addOrderItem" class="btn" type="button"> Add Item </button> 




      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.