Challenge encountered with TypeScript integration in the controller

I am currently in the process of converting a website from VB to C# and incorporating TypeScript. I have successfully managed to send the data to the controller. However, instead of redirecting to the next page, the controller redirects back to the same page.

function formSubmission(submitId, submitUrl, formData, validation) {
    if (!submitId || hasSubmit)
        return false;
    if (validation) {
        if (!$("#empApp form").validate().form())
            return false;
        hasSubmit = true;
    }
    hasSubmit = true;

    $(".modal").modal("show");
    $.ajax({
        type: "POST",
        url: submitUrl,
        data: formData,
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            window.location.href = "/employment/application/references";
        },
        error: function (xhr, ajaxOptions, error) {
            $(".modal-body").html("<h3>" + status + "<small>" + error + "</small></h3>");
            setTimeout(function () {
                $(".modal").modal("hide");
            }, 100);
            window.location.href = "/employment/application/work-experience";
        }
    });
}

The Controller code can be viewed in full here.

[HttpPost, Route("Work-Experience")]
public ActionResult WorkExperience(List<EmploymentApplicationWorkExperience> appExperience)
{
    EmploymentApplication empAppSession = getApplication();
    if (!HasSession()) { return InvalidAppSession(); };
    SetupViewBag();
    if (!empAppSession.Steps.HasFlag(EmploymentApplication.ApplicationStepTypes.EducationSkills))
    {
        return PartialView(GetApplicationStepError());
    }
    if (ModelState.IsValid)
    {
        if (appExperience != null)
        {
            empAppSession.ApplicationWorkEperiences = appExperience;
            empAppSession.StepCompleted(EmploymentApplication.ApplicationStepTypes.Workexperiences);
            updateApplicationStep(empAppSession.Steps);
            updateApplicationWorkExpriences(empAppSession.ApplicationWorkEperiences);
            updateApplication(empAppSession.Application);
            return RedirectToAction("References");
        }
        return PartialView(GetApplicationView("WorkExperience"), empAppSession.ApplicationWorkEperiences);
    }
    else
    {
        return PartialView(GetApplicationView("WorkExperience"), empAppSession.ApplicationWorkEperiences);
    }
}

Answer №1

After eliminating an unnecessary filter from the Controller that was causing it to return the current page when invalid, the issue of post back was resolved and the page continued smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding the expiry date/time to the verification email sent by AWS Cognito

After some investigation, I discovered that when a user creates an account on my website using AWS Cognito, the verification code remains valid for 24 hours. Utilizing the AWS CDK to deploy my stacks in the AWS environment, I encountered a challenge within ...

The reason for the Jest failure is that it was unable to locate the text of the button

As someone who is new to writing tests, I am attempting to verify that the menu opens up when clicked. The options within the menu consist of buttons labeled "Edit" and "Delete". However, the test fails with the message: "Unable to find an element with te ...

OnDrop event in React is failing to trigger

In my current React + TypeScript project, I am encountering an issue with the onDrop event not working properly. Both onDragEnter and onDragOver functions are functioning as expected. Below is a snippet of the code that I am using: import * as React from ...

Forbidden access to Azure WebJob

I've encountered an issue with creating a local service for my app as a WebJob. Despite extensive searching online, I have not been able to find a solution that works for me. The Stack Overflow thread referenced here does not address my specific probl ...

Prevent the bootstrap dropdown menu from closing when encountering a login error during form validation using ajax and codeigniter

I encountered an issue with my dropdown menu login that utilizes bootstrap ajax and codeigniter. When I attempt to submit the form and there is an error, I have to click multiple times before the error message appears because the dropdown menu keeps closin ...

Obtain information from a JSON file based on a specific field in Angular

The structure of the JSON file is as follows: localjson.json { "Product" :{ "data" : [ { "itemID" : "1" , "name" : "Apple" , "qty" : "3" }, { "itemID" : "2" , "name" : "Banana" , "qty" : "10" } ] ...

Clever ways to refresh the current page before navigating to a new link using ajax and jQuery

Here's a different perspective <a href="{{$cart_items->contains('id',$productItem->id) ? route('IndexCart'): route('AddToCart')}}" class="item_add" id="{{$productItem->id}}"><p class="number item_price ...

Context API is failing to work in components that use children when the version is v16.6.0 or higher

Currently, I am utilizing the latest context API of React (v16.6.0 or higher) by specifying the public static contextType inside the component that consumes the context. Everything works smoothly unless the component declaring the Provider directly include ...

Gaining entry to the primary visual element of a ContentPresenter that contains a DataTemplate

In my current project, I am utilizing the Adorner model in conjunction with drag and drop functionality. To achieve this, I am creating a DataTemplate using a ContentPresenter and placing it on the Adorner layer of the control/window. However, I am encou ...

What are the new features for listening to events in Vue 3?

Currently, I am manually triggering an event: const emit = defineEmits<{ (e: 'update:modelValue', value: string | number): void }>() // [..] <input type="text" :value="modelValue" @input="emit(&apos ...

Trouble with AJAX/PHP form failing to transmit data

Hello everyone, I have created a form that is designed to send messages without reloading the page. I followed a tutorial from and adapted it to fit my requirements. Here is the PHP code: <?php session_start(); // Define some constants define( "RECIPI ...

What is the best method for converting an Object with 4 properties to an Object with only 3 properties?

I have a pair of objects: The first one is a role object with the following properties: Role { roleId: string; name: string; description: string; isModerator: string; } role = { roleId:"8e8be141-130d-4e5c-82d2-0a642d4b73e1", ...

What could be causing the global npm package to not be utilized for module dependencies?

My typescript and ts-node are already installed globally. In my package.json file, I have the necessary configurations to run tests with npm test. Everything works fine since ts-node and typescript are installed as local modules. { "name": "two_sum", ...

Unable to receive JSON data from Ajax call

I'm encountering an issue with the WordPress feed in Json format (). When trying to read it using an ajax request, I am unable to retrieve any data in the success callback and instead receiving an error alert. Below is the snippet of my code: $.ajax( ...

Running Javascript based on the output of PHP code

I have been working on my code with test.php that should trigger some Javascript when my PHP code, conditional.php, detects input and submits it. However, instead of executing the expected "Do Something in Javascript," it outputs "Not empty" instead. I fin ...

Enhancing many-to-many relationships with additional fields in Objection.js

I have a question that I haven't been able to find a clear answer to in the objection.js documentation. In my scenario, I have two Models: export class Language extends BaseId { name: string; static tableName = 'Languages'; st ...

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...

"Toggling a switch alters the appearance following the submission of a form

Recently, I incorporated a switch toggle into my form to help filter products. I followed this guide. However, after submitting the form, the page reloads using ajax and the switch toggles back to its initial style before being toggled again. What could be ...

Saving the link to the search results for future reference

Procedure: onSearch(searchString) { if (this.props.history) { this.props.history.push( "/details?search=" + encodeURIComponent(searchString) ); } } Explore Bar: <Search onKeyPress={(event) => ...

What is the correct way to implement fetch in a React/Redux/TS application?

Currently, I am developing an application using React, Redux, and TypeScript. I have encountered an issue with Promises and TypeScript. Can you assist me in type-defining functions/Promises? An API call returns a list of post IDs like [1, 2, ..., 1000]. I ...