CODEWITHSUNDEEP
ajaxtwitter-bootstrapbootstrap-modal
JohnC.IT
JohnC.IT

Reputation: 33

Why does Ajax Actionlink submit twice when returning a Partial View that is a bootstrap modal?

I've looked over the the times this question has been asked, and I've implemented any errors they had. Nevertheless, I'm still getting two processes running when I call an Ajax Actionlink and there's a bootstrap modal involved. Here are all the relevant codes. I'm including the Bundle to show only one of each of the unobtrusives are included:

Layout:

<div id="mainBody" class="container body-content">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Controller:

 public ActionResult ReleaseVersion(string LOCATION_NUMBER = "")
            {
               ...

                model.ReleaseVersionVMInfo = rvmodel;

                if (Request.IsAjaxRequest())
                {
                    return PartialView("_ReleaseVersion", model);
                }
                return PartialView("_ReleaseVersion", model);
            }

View:

                 <div class="col-xs-3">
                        <div class="row Padding_ExtraVert">
                            @Ajax.ActionLink("Release Version",
                            "ReleaseVersion",
                            "Stores",
                            new { LOCATION_NUMBER = Model.storeNbr },
                            new AjaxOptions
                            {
                                UpdateTargetId = "ReleaseModal",
                                InsertionMode = InsertionMode.Replace,
                                HttpMethod = "GET",
                                OnFailure = "storeSearchFailed"
                            },
                            new
                            {
                                @class = "col-xs-5 btn btn-sm button-v 
                                    button-alt-1 Button_StoreHead",
                                @id = "BtnViewRelease",
                                data_target = "#ReleaseModal",
                                data_toggle = "modal"
                            })
                        </div>

View being called by this Actionlink:

@model EpmPortal.Models.App.StoreReleaseVersionVM

@if (Model != null && Model.storeNbr != "0") { .... Close

Thank you for your help

Upvotes: 0

Views: 204

Answers (2)

kblau
kblau

Reputation: 2107

When I run the following and put a breakpoint in the action ReleaseVersion, it only hits this action once, so there is only one process.

Controller/Model:

public class StoreViewModel
{
    public int storeNbr { get; set; }
}

public class HomeController : Controller
{
    public PartialViewResult ReleaseVersion(string LOCATION_NUMBER = "")
    {
        return PartialView("_ReleaseVersion");  //, model
    }

    public ActionResult IndexValid4()
    {
        var storeViewModel = new StoreViewModel { storeNbr = 5 };
        return View(storeViewModel);
    }

Partial view _ReleaseVersion in share folder:

release version partial view

View:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>IndexValid4</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    @*MAKE SURE to put the next script in*@
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#LOCATION_NUMBER').click(function () {
                var store = $('#storeNbr').val();
                this.href = this.href.split("?")[0];
                this.href = this.href + '?LOCATION_NUMBER=' + encodeURIComponent(store);
            });
        })
    </script>
</head>
<body>
    <div>
        <a data-toggle="modal" data-target="#myModal">
            Click to Open modal
        </a>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">My Modal</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <label class="btnIEFix">You can also, Click in Grey Area Outside Modal To Close</label>
                    <button title="You can also, Click in Grey Area Outside Modal To Close" type="button" class="btn btn-secondary bootBtnMargin" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    @Html.HiddenFor(r => r.storeNbr, new { id = "storeNbr" })
    @*https://stackoverflow.com/questions/5838273/actionlink-routevalue-from-a-textbox*@
    @Ajax.ActionLink(
                                   "Trigger Ajax",
                                            "ReleaseVersion",
                                       null,
                                       new AjaxOptions
                                        {
                                            UpdateTargetId = "result",
                                            InsertionMode = InsertionMode.Replace,
                                            HttpMethod = "GET"
                                        },
                                                new
                                                {
                                                    id = "LOCATION_NUMBER",
                                                    @class = "col-xs-5 btn btn-sm button-vbutton-alt-1 Button_StoreHead",
                                                    data_target = "#myModal",
                                                    data_toggle = "modal"
                                                }),

    <div id="result"></div>
</body>
</html>

Upvotes: 0

JohnC.IT
JohnC.IT

Reputation: 33

Oh brother, it turns out it's something TOTALLY different than I expected. In another branch of my program, one I hadn't really started working on yet, I had a partial view in there and it had _Layout from the shared folder on the top - and nothing else but a title in the razor to identify it. That's what caused the duplicate run. I have no idea why. That code is never touched. Sorry about this.

Upvotes: 1

Related Questions