Question

请有人在这里帮我吗？谢谢！

我有一个视图，显示一个产品列表以及每个产品的“添加产品”按钮。我为每个“添加产品”单击调用CreateNewProduct方法以查找产品的状态。根据状态，我需要保持相同的视图，还是需要调用模式弹出窗口。我可以通过在其他视图中创建模式弹出窗口来做到这一点。但是我想从显示产品列表的同一视图中调用模式弹出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");
    }
}

模型查看代码

<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>

更新：我成功了这就是我所做的。最后，我提到了我面临的问题。

主视图中的链接，模式和脚本-详细视图（从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）当我将提交按钮保存在模式弹出窗口（部分视图）中时，它将从NewProductTemplate控制器调用ShareProduct方法。由于某种原因，模型SharedModel的SharedProducts属性在获取控制器代码时为null。您能在这里帮助我为什么它为空吗？

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

问题： 2）我只想在共享产品时才加载弹出窗口，否则我只想重定向到NewProductTemplate控制器的CreateNewProduct方法中提到的“详细信息”视图。问题是，如果不共享产品，它也会在弹出窗口中加载“详细信息”视图，因为这就是我的脚本所做的。在显示模式弹出窗口之前，有什么方法可以在Success函数中检查数据？如果data / html包含共享文本，我想加载普通的“详细信息”视图。我只是假设。我试图这样做，但没有成功。

ProductTemplate控制器中的详细信息方法

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

Answer 1

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

主视图中的模态：

<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>

我的局部视图的控制器方法：

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

我的局部视图将填充实际的模态内容：

<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>

此外，如果模态的内容经常更改，或者是基于传递给部分控制器方法的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();
});

让我知道这是否有帮助，是否需要澄清。

Answer 2

问题2，您可以返回JSON结果，并将HTML放入字符串中，如下所示：

https://www.codemag.com/article/1312081/Rendering-ASP.NET-MVC-Razor-Views-to-String

您还可以在返回的JSON上设置一个布尔值，以决定是否重定向。

如果是重定向，请使用成功使用Javascript进行操作

window.location

显示控制器的模式弹出div

2 个答案: