0

I have a problem that I was stacked on for a while. I am rather new to this stuff so please be patient. I think it is like very simple to solve but I am running circles now. My intention is to make a simple alert that informs that method was completed. As you can see below my first attempt was made with simple string and if statement. I dont want to reload the page any more but now I have a problem that method ends later than alert script starts.
So I have a controller:

        [HttpPost]
    public ActionResult Executor(LMCMainViewModel model)
    {
        var curlsExecutor = _curls;
        var applicationPurgeCurl = curlsExecutor.GetApplicationCurl(model);
        var temporary = model.SuccessExecutionStatus = curlsExecutor.CurlCaller(model.ApplicationList.ApplicationCurl);
        var tempListOfApplications = PopulateModel(model);
        model.ApplicationList.ListOfApplications = tempListOfApplications.ApplicationList.ListOfApplications;
        model.SuccessExecutionStatus = temporary;
        return View("ListOfApplications", model);
    }

And I have my view:

                @model LMC.Models.LMCMainViewModel
            @{
                ViewData["Title"] = "Liberation";
            }
            @using (Html.BeginForm("HeaderString", "LMC"))
            {
            }
            @using (Html.BeginForm("Executor", "LMC", FormMethod.Post))
            {

                <div class="col-sm-2" asp-action="ListOfApplications">
                    @Html.DropDownListFor(x => x.ApplicationList.ChosenApplication, Model.ApplicationList.ApplicationListItem, new { @id = "DropdownID" })
                </div>

                <div class="col-sm-2 col-sm-push-5">
                    @Html.HiddenFor(x => x.ApplicationList.ApplicationListItem)
                    <input class="btn ctn-success" id="submit" type="submit" value="Submit" />
                    <button id="submitButtonAjax" type="button" class="btn btn-success">Ajax button</button>

                    <div class="col-sm-12">
                        @Html.Label(null, (Model.SuccessExecutionStatus ? "Success" : " "),
                       new { Style = Model.SuccessExecutionStatus ? "color: green;" : "color: red;" })


                    </div>
                </div>
            }

Than I tried to implement many variations of Ajax script but I got so twisted that I can't even post you the best one... One thing I know is that when I remove: @using (Html.BeginForm("Executor", "LMC", FormMethod.Post)) and try to place it into Ajax it simply doesn't work. My intention is to have something that would work like this:

    <script type="text/javascript">
    $("#submitButtonAjax").on("click", function () {
        $.ajax({
            type: 'POST',
            url: "/LMC/Executor",
            success: function () {
                alert("Went well");
            }
    });
</script>

I tried to convert controller method return into Json but it didnt work as well. I would appreciate any advices, where I can read about anything similar(I am aware that there are probably many similar topics, but I wan't able to implement anything that was working into my code, because I find my question one step backwards in comparison to others), or maybe it is that easy and I am missing something and you can just post a solution. Anyway, many thanks for any help.

  • I don't think `$.ajax` does what you think it does. It's not going to magically make your page async. I'd suggest reading up on how this works some more – Liam Oct 11 '17 at 13:38
  • Possible duplicate of [Submitting HTML form using Jquery AJAX](https://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax) – Liam Oct 11 '17 at 13:39

1 Answers1

0

The ajax call should look like bellow

 $( document ).ready(function() {
        $("#submitButtonAjax").on("click", function () {
            var postData = {
                FirstPropertyOfTheModel: ValueForTheFirstProperty,
                SecondPropertyOfTheModel: ValueForTheSecondProperty,
            };

        $.ajax({
            type: 'POST',
            url: "/LMC/Executor",
            data:postData,
            success: function () {
                alert("Went well");
            },
            error: function () {
                alert("Opssss not working");
            }
        });
    });
    });

data is the value for the model of ActionResult method of the controller. The FirstPropertyOfTheModel and SecondPropertyOfTheModel will be replaced by the name of property and assign the corresponding value respectably. At url you can use

'@Url.Action("Executor", "LMC")'

so the ajax will look like

 $( document ).ready(function() {
            $("#submitButtonAjax").on("click", function () {
                var postData = {
                    FirstPropertyOfTheModel: ValueForTheFirstProperty,
                    SecondPropertyOfTheModel: ValueForTheSecondProperty,
                };

            $.ajax({
                type: 'POST',
                url: '@Url.Action("Executor", "LMC")',
                data:postData,
                success: function () {
                    alert("Went well");
                },
                error: function () {
                    alert("Opssss not working");
                }
            });
        });
        });
sina_Islam
  • 669
  • 7
  • 14