0

問題の解決策を探しています。

Web サイトの作成に 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 を各ボタンに (値として) 渡しましたビューには、選択した製品のデータが表示されます。

誰かが助けてくれることを願っています。

4

2 に答える 2

0

これが私がそれを解決した方法です。変数を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>
于 2013-12-10T10:32:15.700 に答える
0

次のようになります。

$('#opener').click(function () {
        TheValue = this.value;
        $('#dialog').dialog('open');        
    });
于 2013-05-24T14:34:51.260 に答える