Question

我正在为我的问题寻找解决方案。

我正在使用MVC Razor创建一个网站。

在产品列表中，我想打开一个弹出窗口（Jquery对话框），可以打开局部视图。

但我无法让它发挥作用。

这就是我所拥有的：

<table style="width:100%;" cellpadding="0" cellspacing="10"  >
    <tr>
        <th>Acties</th>
        <th>Code</th>
        <th>omschrijving</th>
        <th>Status</th>
        <th>Afbeeldingen</th>

    </tr>

        @foreach (var item in Model)       
        {
            Product P1 = item.Product_1;
            Product P2 = item.Product_2;

        <tr>
            <td>
                @Html.ActionImage("AddMedia", "Upload", new { id = P1.ProductId }, "../Site_images/New Document.png", 20, 20, "Afbeelding toevoegen")
                @Html.ActionImage("Details", "Products", new { id = P1.ProductId }, "../Site_images/Get Info Blue Button.png", 20, 20, "Details")
                @Html.Image("Site_images/Appointment Cool.png", 20, 20, "Reserveren")
                <button value='@P1.ProductId' id="opener">open the dialog</button>
            </td>
            <td>@P1.ProductCode</td>
            <td>@P1.Description</td>
            <td></td>
            <td>@P1.Media.Count()</td>

        </tr>

            if (P2 != null)
            {
                <tr>
                    <td>
                    </td>
                    <td>@P2.ProductCode </td>
                    <td>@P2.Description</td>
                    <td></td>
                    <td>@P2.Media.Count()</td>

                </tr>
            }




        }
</table>

<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script type="text/javascript">

var TheValue;


$(function () {

    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        title: 'Details',
        modal: true,
        open: function (event, ui) {
            $(this).load('@Url.Action("AddMedia", "Upload", new { id = " + TheValue + "})');
        },
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });

    $('#opener').click(function () {
        $('#dialog').dialog('open');
        TheValue = $(this).attr("value");
    });
});

如您所见，我已将产品ID传递给每个按钮（作为值）现在，我想要做的是，当你点击按钮时，按钮的值被传递给Dialog open事件，因此partioal视图将显示所选产品的数据。

希望有人可以提供帮助。

Answer 1

可能只是：

$('#opener').click(function () {
        TheValue = this.value;
        $('#dialog').dialog('open');        
    });

Answer 2

这就是我解决它的方式，只需将变量传递给JScript函数：

@{
     var HostHeader = Request.Headers["host"];
     var url = "http://" + HostHeader + Url.Content("~/Upload/AddMedia/");
 } 

    <div id="dialog" style="display: none" title="Dialog Title"></div>

    <a href="javascript:void(0)" onclick="javascript:ShowDialog('@P1.ProductId')">Show Dialog</a>


        <script type="text/javascript">

            function ShowDialog(id)
            {

                $('#dialog').dialog({
                   position: 'top',
                    autoOpen: false,
                    width: 500,
                    height:500,
                    resizable: false,
                    title: 'Upload image',
                    modal: true,
                    open: function (event, ui) {
                        $(this).load('@url' +id);
                    },
                    buttons: {
                        "Close": function () {
                            $(this).dialog("close");
                        }
                    }
                })


        </script>

JQuery将额外的参数传递给Ui Dialog

2 个答案: