在Html.ActionLink上的Modal中使用表单呈现部分视图

Question

I have a page with table where each row has a link "Move".

On clicking of the link I am trying to get the controller GET method called which will in turn render the _MoveReportPartial view in a modal.

Once the user makes the selections in the modal the submit button should post to the Post method of the controller.

If I remove the class attribute (move-modal) from Html.ActionLink(...) , it in effect disengages the js file and ignores it. Then it works by opening the _MoveReportPartial in a new window and then consequently posting to the correct method if user clicks submit.

I am trying to get it to open in the modal, but the js I have doesn't work and routes to the POST method instead on "Move" click.

EDIT Why does the .load call the POST method instead of the GET ? How can I change the js ? (added event.preventDefault(); , still the same behavior is observed)

The move link on the originating view looks like this:

<div class="d20 actionLink">
    @Html.ActionLink("Move", "MoveReport", "ReportsWeb", new {id = item.ReportDefinitionId, newReport = false}, new {@class = "move-modal"})
</div>

I have a js file:

$(function () {
$('.move-modal').click(function () {
    event.preventDefault();
    $('<div/>').appendTo('body').dialog({
        close: function (event, ui) {
            dialog.remove();
        },
        modal: true
    }).load(this.href, {});
});

});

My ReportsWebController looks like this:

[HttpGet]
public ActionResult MoveReport(Guid id, bool newReport)
{
    //some code

    return PartialView("_MoveReportPartial", model);
}

[HttpPost]
public ActionResult MoveReport(MoveReportModel Model)
{
    try
    {
        //some code
    }
    catch (Exception exc)
    {
        InternetReportingTrace.Source.WriteError(exc);
        throw;
    }
    return RedirectToAction("ListReports");
}

and my _MoveReportPartial looks like this:

<div id="dialog-confirm">
<div align="center">
    <h2>Please Confirm</h2>        
</div>

@using (Html.BeginForm("MoveReport", "ReportsWeb", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div tabindex="-1" role="dialog">

        <div class="modal-content">
            <p>Report @Model.Report.Name with ID @Model.Report.ReportDefinitionId </p>
            <p>Will be moved to:</p>

            @for (int i = 0; i < Model.MoveOptions.Count; i++)
            {
                <div class="radio">
                    <label><input type="radio" name="optradio">@Model.MoveOptions[i]</label>
                </div>
            }
            <div>
                <input type="submit" value="Move Report" />
            </div>
        </div>
    </div>
}

Answer 1

I don't think you're preventing the default behaviour of the ActionLink properly.

Try:

$('.move-modal').click(function (event) {
  event.preventDefault();
  $('<div/>').appendTo('body').dialog({
    close: function (event, ui) {
        dialog.remove();
    },
    modal: true
  }).load(this.href, {});
});

Because it's a jQuery handler, you can use event.preventDefault() instead of return false; . If your click handler uses return false to prevent browser navigation, it opens the possibility that the interpreter will not reach the return statement and the browser will proceed to execute the anchor tag's default behavior before that point. Using event.preventDefault() as the first line in the handler means you can guarantee that the default navigation behavior will not fire.

Secondly, your .load method call is wrong.

Change

.load(this.href, {}); 

to

.load(this.href);

The documentation at api.jquery.com/load states "The POST method is used if data is provided as an object; otherwise, GET is assumed." Because you're sending it an empty object, it assumes you want to use POST. There's no need to do this.