.Net 6 Razor 视图在 Post 后未更新

Question

我正在将复杂模型传递给 Razor 视图。模型中的数据用于视图中的 for-each 循环，以在 bootstrap 卡片中显示待售产品列表。视图上没有表单。

页面左侧是包含嵌套列表元素的列表元素。这些代表产品类别。当用户选择一个类别时，我将产品类别作为整数传递给控制器中的操作方法。这将基于所选类别构建一个新模型。然后将新模型传递回视图。

此时，我想显示用户选择的类别中的类别。但是，即使模型现在不同了，视图也没有更新。

我一直在阅读有关此问题的信息，我读到的一个论坛 post 建议这是设计使然。我在某处读到，为了实现我需要实现的目标，我必须清除模型状态。但是我无法清除模型状态，因为我没有将模型传回控制器，并且您只能通过重建要在 ajax 调用中传递的模型来将模型传回控制器。我昨天花了一整天时间试图让 ajax 工作，每次我执行 post 时，模型都填充在 JavaScript 函数中，并在控制器中为 null 或空。

是否有另一种方法可以在向视图发送新模型时强制更新视图？有人有什么建议吗？

<script type="text/javascript">


    function AddSubCategory(elem) {
        event.stopPropagation();

        var e = document.querySelectorAll(".products");

        e.forEach(box => {
            box.remove();
        });

        var categoryId= $(elem).data('sub-id');

        console.log(`Id: ${categoryId}`);

        var request;
        if (window.XMLHttpRequest) {

            request = new XMLHttpRequest();
        }       

        if (request != null) {
            var url = `/Products/GetProductsByCategory?categoryId=${categoryId}`;
            request.open("POST", url, false);
        };

            //request.onreadystatechange = function () {
            //  if (request.readyState == 4 && request.status == 200) {

            //  }
            //};

            request.send(); 

    //  model = JSON.stringify(model);

    //  console.log(model);

    //  $.ajax({
    //  type: "Post",
    //  url: '@Url.Action("GetProductsByCategory", "Products")',
    //  data: JSON.stringify({"categoryId": categoryId}),
    //  contentType: 'charset=utf-8;application/json',
    //  cache: false,
    //  complete: function (data) {
    //  }
    //});


    }

// Load all products
public async Task<IActionResult> Index()
{
    ReadCartIDFromCookie();

    string SubDomain = GetSubDomain(HttpContext);
    var allProducts = await _productService.GetAllProductsWithImagesAsync(SubDomain);

    var productCategoryLookup = await _productService.GetAllProductCategoryLookupAsync();

    ViewBag.host = SubDomain;
    ViewBag.productCategoryLookup = productCategoryLookup;

    return View("Index", allProducts);
}

//Load filtered list of products
[HttpPost]
public async Task<IActionResult> GetProductsByCategory(int categoryId = -1)
{            
    ReadCartIDFromCookie();

    string SubDomain = GetSubDomain(HttpContext);
    var allProducts = await _productService.GetAllProductsWithImagesAsync(SubDomain, categoryId);

    var productCategoryLookup = await _productService.GetAllProductCategoryLookupAsync();

    ViewBag.host = SubDomain;
    ViewBag.productCategoryLookup = productCategoryLookup;    
    
    return View("Index", allProducts);
}

Answer 1

多亏了这个post我才能够解决我的问题：

我在尝试弄清楚它时确实遇到了一些麻烦，因为它并不完全清楚，但我可以说这是我需要做的。我最终使用局部视图来展示我的产品。这是我的最终代码。

//My index.cshtml razor view
<div class="col" id="product"></div>//partial view will be loaded onto this div

//Javascript function that gets the chosen filter category Id
@section Scripts
{
<script type="text/javascript">

    function AddSubCategory(elem) {
        event.stopPropagation();
        
        //get the id
        var categoryId= $(elem).data('sub-id');

        console.log(`Id: ${categoryId}`);

        //call controller Products, controller action GetProductsByCategory and pass the categoryId
        //The partial view will be returned and load onto the div id #product
        $('#product').load(`/Products/GetProductsByCategory?categoryId=${categoryId}`);

    }

//when the index view first loads, load all products (i.e. category -1)     
$('#product').load(`/Products/GetProductsByCategory`);
        
</script>
}

public async Task<IActionResult> GetProductsByCategory(int categoryId = -1)
{            
    ReadCartIDFromCookie();

    string SubDomain = GetSubDomain(HttpContext);
    var allProducts = await _productService.GetAllProductsWithImagesAsync(SubDomain, categoryId);

    var productCategoryLookup = await _productService.GetAllProductCategoryLookupAsync();

    ViewBag.host = SubDomain;
    ViewBag.productCategoryLookup = productCategoryLookup;

    
//notice that I am using PartialView method
//Returning View was including the full website (i.e. header and footer).
//_Products is my partial view. allProducts is the 
//view model that is being passed to the partial view.
    return PartialView("_Products", allProducts);
}

现在，每次我 select 一个新类别时，都会重新加载局部视图。此外，首次加载视图时，所有产品都按预期显示。

.Net 6 Razor 视图在 Post 后未更新

.Net 6 Razor View Not Updating after Post

asp.net-mvc

asp.net-core

.net-6.0