[RESOLVED]Passing parameter from Ajax.ActionLink to Jquery-ui dialogue in MVC Razor

Hi, I am opening a partial view as jquery ui dialogue using Ajax.ActionLink.

The ui dialogue opens up fine however I am not sure how to pass the id of the item to be displayed.

Basically this is for Editing individual records of a grid when user clicks on corresponding link.

JS

<script type="text/javascript">
    $(document).ready(function () {
        debugger;   
        $("#editDialog").dialog({
            autoOpen: false,
            width: 650,
            height: 580,
            resizable: false,
            title: 'Add User',
            modal: true,
            draggable: false,
            open: function (event, ui) {
                $(this).load("@Url.Action("Edit", "User", new {Srno=1003})");
            },
            buttons:
                {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
        });

    });

    function OpenEditDialog() {
        $("#editDialog").dialog('open');
        return false;
    }
</script>

Razor View

<div id="editDialog" title="Edit">
    <div id="editDialogContent">
    </div>
</div>

........Some code goes here ........
........Some code goes here ........

<td>
   @Ajax.ActionLink("Edit", "Edit", new { Srno=item.Srno }, new AjaxOptions{
            UpdateTargetId="grid-list",
            HttpMethod="GET",
            InsertionMode = InsertionMode.InsertAfter,
            OnBegin = "OpenEditDialog()"
            })
</td>

I need to pass the Srno (new { Srno=item.Srno }) from link to ui dialgue.

Thanks & Regards

Inside your partial view put the id as a hidden variable and access this using jquery

pprasannak

Inside your partial view put the id as a hidden variable and access this using jquery

Hi, the problem is not with partial view, my problem is about how to pass parameter from edit link in tabular data to Jquery modal dialogue using ajax.actionlink.

JQuery model dialogue is a div in the page. It is not a new page. You can access any dom element in the page (include the grid elements) using jquery.

Alternatively you can pass your id to the "OpenEditDialog()" function as shown below

   @Ajax.ActionLink("Edit", "Edit", new { Srno=item.Srno }, new AjaxOptions{
            UpdateTargetId="grid-list",
            HttpMethod="GET",
            InsertionMode = InsertionMode.InsertAfter,
            OnBegin = "OpenEditDialog(@item.Srno )"
            })

pprasannak

JQuery model dialogue is a div in the page. It is not a new page. You can access any dom element in the page (include the grid elements) using jquery.

Alternatively you can pass your id to the "OpenEditDialog()" function as shown below

   @Ajax.ActionLink("Edit", "Edit", new { Srno=item.Srno }, new AjaxOptions{
            UpdateTargetId="grid-list",
            HttpMethod="GET",
            InsertionMode = InsertionMode.InsertAfter,
            OnBegin = "OpenEditDialog(@item.Srno )"
            })

Hi again, thanks for your reply, I am able to get value of Srno in "function OpenEditDialog" after changing code as per your last instruction.

Now I tried to access this srno from where the jquery is actually opening the window (Please see below), but I could not arrive at a solution.

$(document).ready(function () {
        debugger;   
        $("#editDialog").dialog({
            autoOpen: false,
            width: 650,
            height: 580,
            resizable: false,
            title: 'Add User',
            modal: true,
            draggable: false,
            open: function (event, ui) {
                $(this).load("@Url.Action("Edit", "User", new {Srno=srno})");
            },
            buttons:
                {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
        });

    });

   

Try this code

    function OpenEditDialog(srno) {
        $("#editDialog").data("srno", srno).dialog('open');  //passing the srno as a data attribute of the div tag
        return false;
    }

In the open function retrieve the data and pass it to your ajax

            open: function (event, ui) {
                var srno = $(this).data("srno");
                $(this).load("/Edit/User/?Srno=" + srno");
            },

pprasannak

Try this code

    function OpenEditDialog(srno) {
        $("#editDialog").data("srno", srno).dialog('open');  //passing the srno as a data attribute of the div tag
        return false;
    }

In the open function retrieve the data and pass it to your ajax

            open: function (event, ui) {
                var srno = $(this).data("srno");
                $(this).load("/Edit/User/?Srno=" + srno");
            },

Thanks a lot mate, appreciate your help, it did the trick.

Leave a Reply