Mvc ajax.actionlink with jquery confirmation

I have a table with several rows of data items. For each line, these will be some actionlinks that will call some methods (delete dataitem, change the status of dataitem, etc.)

Before each user clicks a button, I want the jquery dialog box to display and give the user a dialog with some information, the OK button and the Cancel button.

Sample ajax.actionlink code that calls the ChangeStatus method:

<%= Ajax.ActionLink(item.Status, "ChangeStatus", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ListReturns-Div", OnBegin = "StartChangeStatus", OnSuccess = "EndChangeStatus", OnFailure = "FailureChangeStatus" }, new { @class = "StatusBtn" })%>

This is a jquery function called:

 function StartChangeStatus(e) {
            $('#dialog-confirm').dialog({
                resizable: false,
                height: 200,
                modal: true,
                buttons: {
                    'Continue': function () {
                        $(this).dialog('close');
                        $('#Loading-Div').show('slow');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                        e.preventDefault();
                    }
                }
            });
        }

actionlink jquery. , / actionlink. , , . , , actionlink jquery , , ?

+5
2

, . , .

<%= Ajax.ActionLink("Link", 
                    "ChangeStatus", 
                    new { id = 3 }, 
                    new AjaxOptions { UpdateTargetId = "ListReturns-Div", 
                                      HttpMethod = "Post", 
                                      Confirm = "confirmClick" }, 
                                      new { @class = "StatusBtn" }
                   )
%>

javascript. , .

+4

:

Ajax.ActionLink , AjaxOption ... , Javascript Alert ? Ms MVC 2, JQueryUI . , JQueryUI , - ... " ? /"... Ajax.ActionLink!

, ... .

-: , : "ASP MVC Ajax jQuery UI Dialog" ( Google)

Javascript-, remove() hide ( "fast" ) "item" tr .

deleteLinkObj.closest("tr").hide('fast') 

deleteLinkObj.closest("tr.item").remove();

, ,

<%: Html.ActionLink([LinkName],[ActionName], new { id = item.Id }, new { @class = "delete-link" })%>

<%:Ajax.ActionLink([LinkName],[ActionName],[ControllerName],new { id = item.Id },new AjaxOptions{HttpMethod = "Delete" /*You can use Post though*/,OnBegin = "JsonDeleteFile_OnBegin" /*This is the main point!*/}, new { @class = "delete-link" } ) %>

Post, , - OnBegin, javascript, JQueryUI:

<script language="javascript">function JsonDeleteFile_OnBegin(context) {return false;/*Prevent the Ajax.Action to fire before needed*/}</script>

javascript .

, : "", JQueryUI, OnBegin ( post). "" Ricardo Covo , JavaScript Ricardo Covo (, ).

. / javascript- Ricardo Covo, OnSuccess OnComplete AjaxOptions (, ).

+2

All Articles