Using jQuery with ASP.NET MVC

Question

I can`t use jquery much so i need help please. I am using jQuery UI dialog like here. I have Link that opens the dialog where is rendered my partial view.

$(function () {
    $("#transferTo").dialog({
        autoOpen: false,
        height: 100,
        width: 300,
        modal: true,
        resizable: false,
        open: function (event, ui) {
            $(this).load('<%= Url.Action("TransferTo", "Pacient") %>');
        },
        buttons:
        {
            "Transfer": function () {
                // do something in database
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
    $("#transferToLink").click(function () {
        $("#transferTo").dialog("open");
        return false;
    });
});

<a href="javascript:void()" id="transferToLink">Transfer to</a>

Partial view looks like:

<div id="transferTo">
    Zmena kliniky
<%= Html.DropDownList("klinika", ViewData["kliniky"] as SelectList)%>
</div>

In the main view there are rows with some data. Each row is user with his id. So what i want to do...

When i click on the link transferTo (it shows after click on Edit link on each row) i need to pass the id of the user to the jquery function and use it on the Click event TransferTo of the dialog. When user clicks on the TransferTo button in the dialog it must take id parameter and selected value from the dropdownlist from dialog and use it in my C# function comunicating with the database (repository.Edit(id,selectedValue))

Answer 1

i would have done it this way:

implement your link to call a javascript function that will open the dialog.

<a href="#" onclick="openPopup('@id')" id="transferToLink">Transfer to</a>

the javascript should look like this:

function openPopup(id) {
    $("#transferTo").dialog({
        autoOpen: false,
        height: 100,
        width: 300,
        modal: true,
        resizable: false,
        open: function (event, ui) {
            $.ajax({
                "url": yourActionUrl,
                "data": { myParameter: id },
                "type": "POST"
            });
        },
        buttons:
    {
        "Transfer": function () {
            // do something in database
            $(this).dialog("close");
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
    }).open();
}

Hope this helps.

PS: The open method at the end is not mandatory if you mention autoOpen : true

Answer 2

Your Edit link button should have the Id in it's name. Something like "lnkEdit_{id}" where {id} is the actual Id of the item.

In the $("#transferToLink").click event, parse out the Id from $(this) and set it in a HiddenValue field on the form.

Read this value in the Transfer button event in the dialog.

It's not elegant but your options are limited with this type of setup, and I have used this technique before without any problems. The only negative is that you need an extra Hidden field to store a temp value