将“详细信息”视图显示为模式弹出窗口

Question

我有这段代码来显示我的数据库中注册的某个产品的信息。

触发我的细节控制器的按钮：

@Html.ActionLink("Details", "Details", new { id = prod.ID }, new { @class = "btn btn-danger" }) |

控制器代码

public ActionResult Details(int? id)
    {
        PRODUCTS pRODUCTS = db.PRODUCTS.Find(id);
        if (pRODUCTS == null)
        {
            return HttpNotFound();
        }
        return View(pRODUCTOS);
    }

我想在模态弹出窗口中显示“详细信息”视图。我尝试在同一视图中创建我的模态，其中我有“详细信息”按钮，但我无法将我的产品ID传递给控制器​​，它只显示一个空视图。

Answer 1

要在模式弹出窗口中显示数据，您需要一个返回模式弹出窗口所需的HTML标记的操作方法。所以第一步是创建一个返回局部视图结果的动作方法。

public ActionResult Details(int id)
{
    var product = db.PRODUCTS.Find(id);
    if (product== null)
    {
        return HttpNotFound();
    }
    return View(product);
}

在上面的简单示例中，我使用PartialView方法查询实体并将实体对象直接传递给我的视图。如果您有视图的视图模型，请使用它。

现在在Details.cshtml视图中，我们将编写代码来返回HTML markup needed for the modal popup。由于我们将PRODUCTS对象传递给视图，因此我们将确保我们的视图也强类型为该类型。

@model YourNamespaceHere.PRODUCTS 

<div id="modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"> Details</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h2>Hello from @Model.Name</h2>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

在上面的例子中，我只是在模态体中打印Name对象的PRODUCTS属性值。您可以根据需要更新它以呈现其他属性。

现在，我们将对为产品呈现的HTML标记进行一些更改。我们需要在详细信息链接上的click事件来打开模态对话框。所以让我们首先给link元素赋予一些属性，我们以后可以用它来连接click事件。在这里，我将为链接modal-link添加一个额外的CSS类。

@Html.ActionLink("Details", "Details", new { id = prod.ID }, 
                                       new { @class = "btn modal-link" }) 

现在让我们编写一些JavaScript代码来使用click CSS类来监听link元素上的modal-link事件，读取元素的href属性值并对该URL进行Ajax调用并呈现该调用的响应以构建模态对话。

$(function () {

    $('body').on('click', 'a.modal-link', function (e) {

        e.preventDefault();

        $("#modal").remove();

        // Get the Details action URL
        var url = $(this).attr("href");

        //Make the Ajax call and render modal when response is available
        $.get(url, function (data) {
            $(data).modal();
        });
    }); 

});

我在这里使用CSS类作为选择器，您可以根据需要使用任何其他选择器

Answer 2

我认为你应该使用jquery ajax来点击你的按钮或动作链接调用动作并将你的模型作为json结果返回并返回它然后首先清理你的模态数据并用新结果填充它，最后显示你的模态.... ..