在模态对话框

时间:2017-12-15 18:39:22

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

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

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

感谢任何人的帮助。

2 个答案:

答案 0 :(得分:1)

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

代码:

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

答案 1 :(得分:0)

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