How to execute a controller method call in Javascript

Question

Good afternoon! I have the following controller action:

[HttpPost]
public ActionResult ShowComparisonResultSimpleViewFromJs(List<GetDocumentList_Result> documents,
        GetAgreementNumberKktShiftInfo_Result infoResult)
{
    ViewBag.DisplayName = CurrentUser?.DisplayName;
    ViewBag.Documents = documents;
    ViewBag.DocumentCount = Convert.ToString(documents.Count());

    return View("ComparisonResultSimpleView", infoResult);  
}

I also have an InputKktShiftView view that has a button click handler. In it I need to call the controller method specified above, as a result, the ComparisonResultSimpleView page is loaded. Here is an example of a button click handler:

<script>
function OnClick(s, e) {
    //Data for example:
    var parameterModel = {
        FnFactoryNumber: '1',//'9280440300664345',
        ShiftNumber: 38
    };

    $.ajax({
        type: 'POST',
        url: '/TaxcomProblems/GetInputKktShiftJsonResult',
        data: parameterModel
    }).success(function(data) {

        if (data.IsValid) {
            if (data.InfoResult != null) {

                var jsData = {
                    documents: data.Documents,
                    infoResult: data.InfoResult
                };

                //Here you need to call the /TaxcomProblems/ShowComparisonResultSimpleViewFromJs method

                //$.ajax({
                //    type: 'POST',
                //    url: '/TaxcomProblems/ShowComparisonResultSimpleViewFromJs',
                //    data: jsData,
                //    dataType:'html',
                //    success: function(result) {
                //        var view = $("ComparisonResultSimpleView");
                //        view.html(result);
                //    }
                //});

            } else {
                dxConfirm("Перейти на страницу выбора ККТ?")
                    .success(function() {
                        window.location.href = "/TaxcomProblems/ShowChoiceKktView";
                    });
            }
        }
    });

}

Here is the code for my ComparisonResultSimpleView page:

@using System.Web.UI.WebControls
@using BonusProgramAPI.Tools
@model BonusProgramAPI.EF.GetAgreementNumberKktShiftInfo_Result

@{
   ViewBag.Title = "Результаты для ККТ и смены";
   ViewBag.agreementNumber = Model?.agreementNumber;
   ViewBag.outletId = Model?.outletId;
   ViewBag.fnFactoryNumber = Model?.fnFactoryNumber;
   ViewBag.openDateTime = Model?.openDateTime.ToString("dd-MM-yyyy hh:mm:ss");
   ViewBag.shiftNumber = Model?.shiftNumber;
}

<script>
   function OnBtnGetKktInfoClick(s, e) {
      pcKktInfo.Show();
   }
</script>


@Html.DevExpress().FormLayout(settings =>
{
   settings.Name = "rootLayout";
   settings.Items.AddGroupItem(group =>
   {
     @* some code *@
   }
}).GetHtml()

@* PopupControls: *@
@{
    Html.RenderPartial("PopupControlKktInfoPartialView");
    Html.RenderPartial("PopupControlShiftInfoPartialView");
 }

Question: How do I call the ShowComparisonResultSimpleViewFromJs method of the TaxcomProblems controller so that the ComparisonResultSimpleView page displays? P.S.: If I use ajax, then I call the specified method correctly (all data is transferred to it correctly), but the specified page is not displayed, and the current page remains.

Answer 1

Ajax post will not refresh the page. You have to do it by yourself. Also you are sending the full page from the ShowComparisonResultSimpleViewFromJs action with the following code:

return View("ComparisonResultSimpleView", infoResult);

What you can do is make the ShowComparisonResultSimpleViewFromJs action return partial content (html) instead of full page content. And then add the returned data in a div on the success method of the ajax call.

To return partial view write:

return PartialView("~/views/ComparisonResultSimpleView.cshtml", infoResult);

Also in the javascript codes note that the element selector is missing a class or Id notation. You can simply write:

$("#ComparisonResultSimpleView").html(result);    

Answer 2

Your jquery selector is attempting to get the element

<ComparisonResultSimpleView></ComparisonResultSimpleView>

from here

success: function(result) {
                     var view = $("ComparisonResultSimpleView");
                     view.html(result);
                  }

Do you mean to select the element with id = ComparisonResultSimpleView ?

<div id="ComparisonResultSimpleView"></div>

You will need to add "#" to your selector like so:

success: function(result) {
                     var view = $("#ComparisonResultSimpleView");
                     view.html(result);
                  }

Want to know if the selector is correct? Run the following line in your page's browser console

$("#ComparisonResultSimpleView").length; // greater than zero means the number of elements matching selector. Zero means no match.