c# - 从 Controller 显示模态弹出 div

Question

有人可以帮我吗？!谢谢!

我有一个 View 显示产品列表以及每个产品的“添加产品”按钮。我为每个“添加产品”点击调用 CreateNewProduct 方法来查找产品的状态。根据状态，我需要保持相同的 View ，或者我需要调用模式弹出窗口。我可以通过在不同的 View 中创建模式弹出窗口来做到这一点。但我想从显示产品列表的同一 View 中调用模态弹出 div(也传递模态)。这可能吗？

public ActionResult CreateNewProduct(int productId)
{
    var sharedProduct = _productTemplateService.GetSharedProducts(productId);
    var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));

    if (_finalSharedProducts)
    {
        var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
        return View("ModalView", new SharedModel
        {
            SharedProduct = sharedProdctTemplate
        });
    }
    else
    {
        _productTemplateService.CreateNewProduct(productId);
        return RedirectToAction("Details", "ProductTemplate");
    }
}

模型 View 代码

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Shared Product</h4>
            </div>
            <div class="modal-body">
                <div class="flex-row">
                    <div class="col-6">
                        <div class="d-flex flex-row">
                            <div class="p-2">Product ID</div>
                            <div class="p-2">Product Types</div>
                            <div class="p-2">Status</div>
                        </div>
                        @foreach (var productTemplate in Model.SharedProduct )
                        {
                            <div class="d-flex flex-row">
                                <div class="p-2">@productTemplate.ProductId</div>
                                <div class="p-2">@productTemplate.ProductType</div>
                                <div class="p-2">@productTemplate.StatusCode</div>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

<p>
    @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
    @Html.ActionLink("Back to List", "Index")
</p>
<script type="text/javascript">
    $(document).ready(function () {
        $('#myModal').modal('show');
    });
</script>

更新:我让它工作了。这就是我所做的。最后，我提到了我面临的问题。

我的主视图中的链接、模式和脚本 - 详细 View (从 ProductTemplate Controller 调用)

<td><a href="#" class="btn btn-sm btn-primary" onclick="loadModal('@productTemplate.productId,'@productTemplate.customerId')">Add New Product</a></td>


<div class="modal fade" id="mymodel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Shared Products</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body" id="mymodelbody">

            </div>
        </div>
    </div>

<script>

        var loadModal = function (productId, customerId) {
            $.ajax({
                type: 'GET',
                url: '/NewProductTemplate/CreateNewProduct',
                cache: false,
                data: {
                    productId: productId,
                    customerId: customerId
                },
                dataType: 'html',
                success: function (data) {;
                    $("#mymodelbody").html(data);
                    $("#mymodel").modal("show");
                }
            });
        }
    </script>

NewProductTemplateController代码

public ActionResult CreateNewProduct(Guid productId, Guid customerId)
    {
        var sharedProduct = _productTemplateService.GetSharedProducts(productId);
        var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));

        if (_finalSharedProducts)
        {
            var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
            return PartialView("_shared", new SharedModel
            {
                SharedProduct = sharedProdctTemplate
            });
        }
        else
        {
            _productTemplateService.CreateNewProduct(productId);
            return RedirectToAction("Details", "ProductTemplate");
        }
    }

局部查看_shared.view代码

@model SharedModel
@using (Html.BeginForm("ShareProduct", "NewProductTemplate", FormMethod.Post))
{
    @Html.AntiForgeryToken()
   <div class="flex-row">
    <div class="col-6">
        <div class="d-flex flex-row">
            <div class="p-2">Product ID</div>
            <div class="p-2">Product Types</div>
            <div class="p-2">Status</div>
        </div>

        @for (var i = 0; i < Model.SharedProducts.Count(); i++)
        {
            @Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductId)
            @Html.HiddenFor(model => model.SharedProducts.ElementAt(i).CustomerId)
            @Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductType)
            @Html.HiddenFor(model => model.SharedProducts.ElementAt(i).StatusCode)
            @Html.HiddenFor(model => model.SharedProducts.ElementAt(i).IsShared)
            <div class="d-flex flex-row">
                <div class="p-2">@Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductId)</div>
                <div class="p-2">@Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductType)</div>
                <div class="p-2">@Html.DisplayFor(model => model.SharedProducts.ElementAt(i).StatusCode)</div>
                @if (Model.SharedProducts.ElementAt(i).StatusCode == VersionStatus.PUBLISHED)
                {
                    <div class="p-2">@Html.EditorFor(m => m.SharedProducts.ElementAt(i).IsShared)</div>
                }
            </div>
        }
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-sm btn-primary" />
            <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

问题:1) 当我在模式弹出窗口(部分 View )中保存提交按钮时，它会从 NewProductTemplate Controller 调用 ShareProduct 方法。出于某种原因，模型 SharedModel 的 SharedProducts 属性在到达 Controller 代码时为 null。你能帮我看看为什么它会变成空吗？

public ActionResult ShareProduct (SharedModel shareModel)
        {
           //Access ShareProducts from shareModel 
            return RedirectToAction("Details", "ProductTemplate");
        }

问题:2) 我只想在共享产品时加载弹出窗口，否则我只想重定向到详细信息 View ，如 NewProductTemplate Controller 的 CreateNewProduct 方法中所述。问题是，如果产品未共享，它也会在弹出窗口中加载详细信息 View ，因为那是我的脚本正在做的事情。在显示模态弹出窗口之前，有什么方法可以检查 Success 函数中的数据吗？如果 data/html 包含共享文本，我想加载普通的详细信息 View 。我只是假设。我尝试这样做但没有成功。

ProductTemplate Controller 中的详细方法

public ActionResult Details()
        {
            var productTemplate = _productTemplateService.GetAllProducts(User);
            return View(new DetailsModel
            {
                ProductTemplate = productTemplate,
             });
        }

Answer 1

(这是针对 Bootstrap 3.3.7 希望它与您使用的版本相关)我通过从主视图弹出客户端的模式来处理这个问题。弹出模式的链接包含 Controller 方法的 URL，该方法将呈现实际内容(在您的情况下为产品列表)。此 Controller 方法应返回分部 View 。

我主视图中的模态:

<div class="modal fade name-of-my-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content"></div>
    </div>
</div>

我主视图中的链接:

<a class="btn btn-default btn-xs" data-toggle="modal" data-target=".name-of-my-modal" role="button" href="/SomeController/SomeMethodThatReturnsPartialView/234">Show Modal</a>

我的局部 View Controller 方法:

public ActionResult SomeMethodThatReturnsPartialView(int id)
{
    var model = GetProducts();
    return PartialView("_IndexPartial", model);
}

我将填充实际模态内容的局部 View :

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

    <h4 class="modal-title">Title goes here</h4>
</div>

<form class="form-horizontal" id="SomeId" name="SomeName" role="form">
    <div class="modal-body">
        <div>Product 1</div>
        <div>Product 2</div>
        <div>Product 3</div>
        <div>Product 4</div>
    </div>
</form>

此外，如果模态的内容经常变化，或者根据您传递给部分 Controller 方法的 ID 而变化，那么您需要在关闭时清除模态内容。从您的主视图:

$(document).on('hidden.bs.modal', '.modal', function (e) {
    // Handles the event thrown when a modal is hidden
    $(this).removeData('bs.modal');
    $(this).find(".modal-content").empty();
});

让我知道这是否有帮助，以及是否有任何需要澄清的地方。