.Net6RazorView發布后未更新

我將一個復雜的模型傳遞給 Razor View。模型中的資料用于視圖中的 for-each 回圈，以顯示在引導卡中出售的產品串列。視圖上沒有表格。

頁面左側是包含嵌套串列元素的串列元素。這些代表產品類別。當用戶選擇一個類別時，我將產品類別作為整數傳遞給控制器??中的操作方法。這將基于所選類別構建一個新模型。然后將新模型傳遞回視圖。

此時，我想顯示用戶選擇的類別中的類別。但是，即使模型現在不同，視圖也不會更新。

我一直在閱讀有關此問題的資訊，并且我閱讀的一篇論壇帖子表明這是設計使然。我在某處讀到，為了實作我需要實作的目標，我必須清除模型狀態。但是我無法清除模型狀態，因為我沒有將模型傳遞回控制器，并且您只能通過重構模型以在 ajax 呼叫中傳遞來將模型傳遞回控制器。昨天我花了一整天的時間試圖讓 ajax 作業，每次我執行帖子時，模型都會填充到 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);
}

uj5u.com熱心網友回復：

由于這篇文章，我能夠解決我的問題：https ://stackoverflow.com/a/66277911/1561777

我確實在試圖弄清楚它時遇到了一些麻煩，因為它并不完全清楚，但我可以說這是我需要做的。我最終使用區域視圖來展示我的產品。這是我的最終代碼。

//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);
}

現在，每次我選擇一個新類別時，都會重新加載部分視圖。此外，當第一次加載視圖時，所有產品都按預期顯示。

標籤：asp.net-mvc asp.net 核心 .net-6.0

上一篇：視圖看不到/定義我的模型類

下一篇：根據之前的Datetimepicker設定KendoDatetimepicker