Popups in Razor

Question

I want to add popups in which user can add comments for each grid on web. I want to add this comment to database and close popup without refreshing main page. How can I do it? Here is my code.

$('a.dialog').click(function () {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();

    $.get(
        this.href, 
        function (result) {
            $(result).dialog({
                modal: true,
                width: 500,
                position: [x, y]
            });
        }
    );
    return false;
});

Here is Post from controller:

[HttpPost]
public ActionResult Comment(CommentsModel model)
{
    try
    {
        model.UserId = Storage.UserGetActive().Id;
        Storage.CommentInsert(model);
        return RedirectToAction("Index");
    }
    catch (Exception e)
    {
        return RedirectToAction("Error", e);
    }
}

I know I'm doing it wrong. How can I just save comment and close popup?

EDIT I'm just making link to it, like this:

<a class="dialog" href="/Dashboard/Comment/'+clips[i-1]+'">Comment</a>

This is what I have in my view:

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
    <fieldset>
        <legend>Add new comment</legend>
        @Html.HiddenFor(m => m.MetriceId)
        <div>
            @Html.LabelFor(m => m.Comment)
        </div>
        <div >
            @Html.EditorFor(m => m.Comment, new { style = "width:450px; height:70px" })
            @Html.ValidationMessageFor(m => m.Comment)
        </div>
        <p>
            <input type="submit" value="Save Comment" />
        </p>
    </fieldset>
}

Answer 1

Firstly update your action method so that it is not redirecting and simply returns a status:

[HttpPost]
public ContentResult Comment(CommentsModel model)
{
    try
    {
        model.UserId = Storage.UserGetActive().Id;
        Storage.CommentInsert(model);
        return Content("success"); 
    }
    catch (Exception e)
    {
        return Content("error");
    }
}

You need to set up your dialog to post to your action. See JQuery help

Firstly add html to your page for your dialog to exist

<div id="dialog-confirm" title="Comment on item">
    <!-- Put whatever markup you require in here -->
    <!-- You will need a placeholder for the id of the item you are commenting on  -->
</div>

Secondly initialise you dialog:

$(function() {
    $( "#dialog-confirm" ).dialog({
        autoOpen: false, //Dialog is initialised closed
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Save Comment": function() {
                // NOTE: We are making a jQuery post action
                $.post(<url>, // Replace url
                        // Build your data model eg: 
                        // { UserId: <userId>, Comment: <comment> ...}
                        <data>, 
                        // This is what is actioned after the post 
                        // returns from the server
                        function(result) 
                        {
                            // Check if successful
                            if(result == 'success') {
                                //Simply the dialog
                                $( this ).dialog( "close" );
                            }
                            else {  //an error occured
                                //Update dialog html to show error
                            }
                        }                                            
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});

Lastly you need to set up your links to open the dialog:

$('a.dialog').on('click', function(e){
    // Update the dialog to contain data of the item you are 
    // commenting on so you can grab it and post to the server 
    $( "#dialog-form" ).dialog( "open" );
}

The above should be enough to give you a pop up. Note, this is not your full solution

I would recommend reading through the jQuery docs on modals and posts:

• jQueryUI modal
• jQuery post

Answer 2

What does 'this.href' resolve to inside of the $.get call. If you put that URL in the address bar of a browser, would it render a view?

[If it renders a view] To help, we would need to see, presumably the Razor code, that exists inside of that view. After all, that's the code which would execute the post.