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类侦听链接元素上的modal-link事件，读取元素的href属性值并创建一个Ajax调用该URL并呈现该调用的响应以构建模式对话框。

$(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在单击按钮或操作链接时调用action，并将模型作为json结果返回，然后将其返回，然后首先清理模态数据并用新结果填充它，最后显示模态。 .....

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

2 个答案: