Question

So I have a view that allows users to Approve or Reject items listed on the page. When approved, I simply use the @Ajax.ActionLink to post to the appropriate controller action. When the user Rejects an item, the user is required to enter a reason for the rejection. I’m found code on the internet that gave me a popup dialog and added a textbox and OK/Cancel buttons. I can capture the input from the user and show it in an alert, but now I need to complete it and I’m not sure how.

1st – I need add functionality to pass to my jquery link handler, the ID associated with the Item being rejected.

2nd – I need a way to call my Controller Action from the jquery.

Here is the code I have up to this point.

My link is simply an ‘a’ tag. I can’t see to post the code for this without removing the <>
a href=”#dialog” name=”modal” Reject a

My script handles this here

    $(document).ready(function () {

        //select all the a tag with name equal to modal
        $('a[name=modal]').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();

            //Get the A tag
            var id = $(this).attr('href');

            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();

            //Set heigth and width to mask to fill up the whole screen
            $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

            //transition effect     
            $('#mask').fadeIn(1000);
            $('#mask').fadeTo("slow", 0.8);

            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();

            //Set the popup window to center
            $(id).css('top', winH / 2 - $(id).height() / 2);
            $(id).css('left', winW / 2 - $(id).width() / 2);

            //transition effect
            $(id).val('');
            $(id).fadeIn(2000);

        });

Here is my pop up dialog and the mask that grays out the screen when the dialog is opened.

    <div id="boxes">


    <div id="dialog" class="window">
        Enter the reason for rejection:</br>
        <textarea class="multiline" id="rejectreason" rows="10" cols="20"></textarea><br/>
        <div style="margin-left: 120px"><input type="button" value="OK" class="ok" style="width:70px"/> &nbsp;<input type="button" value="Cancel" style="width:70px" class="close"/>       
    </div>
</div>


<!-- Mask to cover the whole screen -->
   <div id="mask"></div>
</div>

It could be that I’m going about this completely wrong, but it’s all I could find on line and pieced it all together from there. As this is my first experience with jquery and MVC, I’m struggling a bit here. Any help would be greatly appreciated.

Thanks

UPDATE

OK, so I added a data-id attribute to my link that allows me to get the ID of the link clicked. I tested it using this code and it works.
var iD = $(this).attr(‘data-id’);

I now need to pass this value to my dialog so I can then retrieve it again when the OK button on the dialog is clicked. I can set a hidden field on the page if necessary and retrieve it from there.

Answer 1

Here is some code to get you on the right path…

jQuery Ajax:

$(document).ready(function () {
    $("#InputButtonId").click(function () {
        $.ajax({
            url: '@Url.Action("SomeAction", "Controller")',
            type: 'POST',
            data: { id: $("#hidden").val(), reason: $("#rejectreason").html },
            dataType: "json",
            beforeSend: function () {
            },
            success: function (result) {
                // Do action if success
            },
            error: function (result) {
                // Do action if error
            }
        });
        return false;
    });
});

And the controller action:

[HttpPost]
public JsonResult SomeAction(string id, string reason)
{
    //Perform Actions
    return Json(new
    {
        value1 = value1,
        value2 = value2
    }, JsonRequestBehavior.AllowGet);
}

Hope this helps.