After jQuery Ajax invocation call , the application Fails to navigate to the ASP.NET MVC view that I want to show

Question

I'm using jquery DataTables to show some tabular data, and I also placed an edit link for each row in said jquery DataTables so that the user can edit data associated with a particular row if needed. ( Also, I have No clue how to use ASP.NET MVC Html helpers within jQuery DataTables so that is why I am using the html link in the following code )

jquery DataTable javascript:

   $("#resultCodeTable").dataTable({
            "processing": true,
            "serverSide": false,
            "destroy": shouldDestroy,
            "ajax": {
                "url": "../Admin/LoadResultCodes",
                "type": "GET",
                "datatype": "json",
                "data": function (data) {

                    data.actionCodeIDArg = actionCodeIDInQuestion;

                }

            },

....................................
............................
..............
            columnDefs: [
              {
{
                  targets: 1,
                  searchable: false,
                  orderable: false,
                  name: "EditResultCodeInQuestionReasonForArrears",
                  "data": "ID",
                  render: function (data, type, full, meta) {
                      if (type === 'display') {

                          data = '<a class="editResultCodeInQuestionReasonForArrears"  href="javascript:void(0)" data-id="' + full.ID + '">Edit RFAs</a>'
                      }

                      return data;
                  }
              },
....................................
............................
..............

Clicking on the aforementioned link will ensure that the point of execution reaches the following jQuery Event Handler method:

jQuery Event handler method/ function Javascript

$('#resultCodeTable').on('click', '.editResultCodeInQuestionReasonForArrears', function () {
    console.log(this.value);
    navigateToAParticularResultCodeAssociatedReasonForArrearsList($(this).data('id'));

});

The jQuery Ajax call successfully invokes the C# Controller's action because I see the Visual Studio's Debugger's point of execution reach said Controller's action, however, it fail to navigate to the view that I want to show.

jquery / javascript:

function navigateToAParticularResultCodeAssociatedReasonForArrearsList(resultCodeTable_ID) {
    console.log(resultCodeTable_ID);
    $.ajax({
         url: '../Admin/NavigateToAParticularResultCodeAssociatedReasonForArrearsList',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json;charset=utf-8",
        data: "{'" + "resultCodeTable_IDArg':'" + resultCodeTable_ID + "'}",
        cache: false,
    }).done(function (response, status, jqxhr) {


    })
.fail(function (jqxhr, status, error) {
    // this is the ""error"" callback
});

}

C#: ( in my AdminController.cs )

public ActionResult NavigateToAParticularResultCodeAssociatedReasonForArrearsList(int resultCodeTable_IDArg)
        {


            AParticularResultCodeAssociatedReasonForArrearsListViewModel aParticularResultCodeAssociatedReasonForArrearsListViewModel = new AParticularResultCodeAssociatedReasonForArrearsListViewModel();
            aParticularResultCodeAssociatedReasonForArrearsListViewModel.ResultCodeTable_ID = resultCodeTable_IDArg;
           return View("~/Areas/Admin/Views/Admin/AdminModules/Auxiliaries/AParticularResultCodeAssociatedReasonForArrearsList.cshtml", aParticularResultCodeAssociatedReasonForArrearsListViewModel);

        }

Razor / Html: (In my \\Areas\\Admin\\Views\\Admin\\AdminModules\\Auxiliaries\\AParticularResultCodeAssociatedReasonForArrearsList.cshtml view )

@model Trilogy.Areas.Admin.ViewModels.Auxiliaries.AParticularResultCodeAssociatedReasonForArrearsListViewModel

    @{
        ViewBag.Title = "AParticularResultCodeAssociatedReasonForArrearsList";
    }

    <h2>AParticularResultCodeAssociatedReasonForArrearsList</h2>

Could someone please tell me how I can change the code so that the view shows up after the jquery Ajax invocation?

Answer 1

可能在.done函数上，您将在响应中获取视图，您需要获取该响应并将其绑定到控件

Answer 2

You call the controller via AJAX, and sure it hits the controller action method, and the controller returns a view but this is your code that deals with whatever is returned from the AJAX call (from the controller):

.done(function (response, status, jqxhr) {})

You are doing absolutely nothing, so why would it navigate anywhere.

A better question you need to ask yourself, instead of fixing this, is why would you use AJAX and then navigate to another page. If you are navigating to a whole new page, new URL, then simply submit a form regularly (without AJAX) or do it via a link (which the user will click). Use AJAX post if you want to stay on the same page and refresh the page's contents.

Answer 3

@yas-ikeda , @codingyoshi , @code-first Thank you for your suggestions.

Here are the modifications that I had to make to resolve the problem(please feel free to suggest improvements):

Basically, I had to end up creating 2 separate Action methods to resolve the problem. In the jquery/Javascript code below, it is important to note the first action method '../Admin/RedirectToNavigateToAParticularResultCodeAssociatedReasonForArrearsList'

function navigateToAParticularResultCodeAssociatedReasonForArrearsList(resultCodeTable_ID) {
    console.log(resultCodeTable_ID);



    $.ajax({
        url: '../Admin/RedirectToNavigateToAParticularResultCodeAssociatedReasonForArrearsList',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json;charset=utf-8",
        data: "{'" + "resultCodeTable_IDArg':'" + resultCodeTable_ID + "'}",
        cache: false,
    }).done(function (response, status, jqxhr) {
        window.location.href = response.Url;

    })
    .fail(function (jqxhr, status, error) {
        // this is the ""error"" callback
     });

}

The purpose of the 1st action method called '../Admin/RedirectToNavigateToAParticularResultCodeAssociatedReasonForArrearsList' is to retrieve a url within a Json object.

    [HttpPost]
    public ActionResult RedirectToNavigateToAParticularResultCodeAssociatedReasonForArrearsList(int resultCodeTable_IDArg)
    {
        var redirectUrl = new UrlHelper(Request.RequestContext).Action("NavigateToAParticularResultCodeAssociatedReasonForArrearsList", "Admin", new { resultCodeTable_IDArg = resultCodeTable_IDArg });
        return Json(new { Url = redirectUrl });
    }

The purpose of the 2nd action method is to ultimately navigate to the ASP.NET MVC View that I want to show.

    public ActionResult NavigateToAParticularResultCodeAssociatedReasonForArrearsList(int resultCodeTable_IDArg)
    {


        AParticularResultCodeAssociatedReasonForArrearsListViewModel aParticularResultCodeAssociatedReasonForArrearsListViewModel = new AParticularResultCodeAssociatedReasonForArrearsListViewModel();
        aParticularResultCodeAssociatedReasonForArrearsListViewModel.ResultCodeTable_ID = resultCodeTable_IDArg;
        aParticularResultCodeAssociatedReasonForArrearsListViewModel.RFACodeList = actionCodeResultCodeBusinessService.GetSpecificResultCodeRFACodeList(resultCodeTable_IDArg);

       return View("~/Areas/Admin/Views/Admin/AdminModules/Auxiliaries/AParticularResultCodeAssociatedReasonForArrearsList.cshtml", aParticularResultCodeAssociatedReasonForArrearsListViewModel);

    }

However, I Dislike the fact that I have to use 2 action methods to navigate to the desired asp.net mvc view, therefore, please feel free to suggest improvements or even a totally different better solution.