在模态对话框中显示部分视图结果

Posted 2021-05-06

我的表单上有一个文本框：

 <input type="text" class="input-group-field" id="draftSearchProducts" name="draftSearchProducts" placeholder="SearchProducts" />

在我的控制器中，我有以下内容：

 [HttpGet]
    public ActionResult SearchResults(string keywords, int queryLimit = 20, int offset = 0)
    {
        try
        {
            ProductSearchResults searchResults = new ProductSearchResults();

            ComApiData<GetProductsDataConnector> productData = new ComApiData<GetProductsDataConnector>();

            var products = productData.Connector.GetProductBySearch(new ProductRequestParameters()
            {
                Search = keywords,
                LTPMerchantId = merchantId,
                QueryLimit = queryLimit,
                QueryOffset = offset
            });

            searchResults.ProductDetails = products.ToList();

            return PartialView("_SearchResults", searchResults);
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

表格上有一个按钮：

<a id="draftAddProduct" class="hollow button secondary"><i class="fa fa-plus"></i>&nbsp;Add Product</a>

由于我是这方面的新手，我需要一些帮助。我需要连接按钮以获取在文本中键入的值调用SearchResults控制器（位于名为ProductsController.cs的文件中）并使用结果填充模式对话框。我有一个部分剃刀页面：

    @model Sauron.Models.Products.ProductSearchResults

@foreach (var product in Model.ProductDetails)
{
    <tr>
        <td class="imageColumn">
            @if (product.Image != null)
            {
                <div class="ajax-image-load">
                    <input type="hidden" id="BlockImageID" value="@product.Image.ImageId" />
                    <input type="hidden" id="BlockImageWidth" value="89" />
                    <input type="hidden" id="BlockImageHeight" value="89" />
                    <input type="hidden" id="BlockImageLoaderGif" value="/images/loader-circle-basic.gif" />
                </div>
            }
        </td>
        <td>
            @product.SKU
            <input type="hidden" id="editID" name="editID" value="@product.ProductId" />
        </td>
        <td>@(product.Description != null ? product.Description.Name : product.ReceiptName)</td>
        @*<td>@(product.ColorId != null ? product.)</td> we might want to gather the color object as a property of this search class model*@
        <td>
            @{
                var textColor = "";
                if((product.InventorySummary ?? 0) <= 0){
                    textColor = "red-text";
                }
            }
            <span class="@textColor">@((product.InventorySummary ?? 0).ToString())</span>
        </td>
        <td>
            @if (product.ProductType != null ? product.ProductType.Equals(ProductType.PACK) : false)
            {
                <span>@(product.PackQty != null ? string.Format("{0} {1}", product.PackQty.Value, product.ProductType.ToString()) : product.ProductType.ToString())</span>
            }
            else if (product.ProductType != null ? product.ProductType.Equals(ProductType.CASE) : false)
            {
                <span>@(product.PackQty != null ? string.Format("{0} {1}", product.PackQty.Value, product.ProductType.ToString()) : product.ProductType.ToString())</span>
            }
            else
            {
                <span>@(product.ProductType != null ? product.ProductType.ToString() : "")</span>
            }
        </td>

    </tr>
}

这将显示结果。我需要在模式框中显示_SearchResults.cshtml页面的结果。

我想从文本框中输入的值调用SearchResults方法来显示结果。

任何人的帮助表示赞赏。

答案

问题是我用错误的名字调用控制器。一旦我得到正确的名字，它就开始工作了。

码：

 $('#draftAddProduct').click(function () {
    var keyWord = $('#draftProductModal').val();
    $('#draftProductModal').load("@Url.Action("SearchResults","Products")?keywords=chair");
});

另一答案

你可以在这里找到这个问题的答案：Bootstrap Modal Dialog - Loading Content from MVC Partial View