在模态对话框中显示局部视图结果答案

【问题标题】：Display partial view results in modal dialog box在模态对话框中显示局部视图结果
【发布时间】：2017-12-15 18:39:22
【问题描述】：

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

 <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 方法来显示结果。

感谢任何人的帮助。

【问题讨论】：

标签： asp.net model-view-controller modal-dialog asp.net-mvc-partialview

【解决方案1】：

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

代码：

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

【讨论】：

【解决方案2】：

您可以在此处找到此问题的答案： Bootstrap Modal Dialog - Loading Content from MVC Partial View

【讨论】：