Are there any ways to pass an onClick function to a controller in React?

To prevent duplicate numbers from being generated, I added a button that, when clicked by a user, displays a message indicating that the value is being saved to avoid duplicates. However, when attempting to handle this on the server side controller, I encountered a status 302 POST error under Inspect element->Network->Status 302 -> POST -> FILE (GenerateCodes).

   @using (Html.BeginForm("GenerateCodes", "Codes", FormMethod.Post))
   {
  <div class="box-header">
  <div class="row">
  <div class="col-md-3 text-right">
  <!--Disable button for about 3 second after click button-->
   <button type="submit" id="ok"  class="btn btn-primary btn-lg" onclick="return DisplayProgressMessage(this, 'Saving...');">Generate</button>
   <script>
   function DisplayProgressMessage(ctl, msg) {
   $(ctl).prop("disabled", true);
   $(ctl).text(msg);
   return true;
   }
   </script>
  </div>
  </div>
  </div>
  }

My Codes.cs controller.

    protected void DisplayProgressMessage(object sender, EventArgs e)
    {
    //Something
    Response.Write("DD");
    }

Answer №1

Ensure that the method name in your controller matches the action specified in the Html.BeginForm() helper method by naming it "GenerateCodes". Additionally, make sure that the parameters in the method correspond to either the model from your .cshtml view or have no parameters if working without a model. Lastly, don't forget to add the [HttpPost] attribute to the controller method to indicate that it is receiving form submissions.

[HttpPost]
public IActionResult GenerateCodes()
{
    //Perform necessary actions here
}

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

Running JavaScript code when the route changes in Angular 6

Currently, I am in the process of upgrading a website that was originally developed using vanilla JS and JQuery to a new UI built with Angular and typescript. Our site also utilizes piwik for monitoring client activity, and the piwik module was created i ...

The Electron forge project from publisher-github is failing to detect the environment variable GITHUB-TOKEN

I've set up my .env file with the correct token, but I encountered an error when trying to publish my package on GitHub. An unhandled rejection has occurred inside Forge: Error: Please set GITHUB_TOKEN in your environment to access these features at n ...

Choosing a String and Performing a Double Click in Selenium with Java

My textbox is disabled, and it includes the following attributes: <div id="writingactivityId2" class="boxSize ng-pristine ng-untouched ng-valid ng-valid-required redactor_editor writingActivityDisabled" ng-focus="editing()" redactor="" readonly="" ng- ...

Using JQuery within Angular 4 is a valuable tool for enhancing the functionality

As a newcomer to Angular, I am experimenting with using jQuery alongside Angular 4. In my search for information, I stumbled upon this question on Stack Overflow. Inside the question, there was an example provided that can be found here. However, when att ...

Creating a type definition for the createSelector function based on the useQuery result

Struggling to find the correct typings for the createSelector res parameter from redux-js, especially in TypeScript where there are no examples or explanations available. The only guidance is provided in JS. const selectFacts = React.useMemo(() => { ...

Is it possible to send an ajax request following a fetch post?

I am facing an issue with a fetch post and subsequent ajax request in my code: $(document).on('change', '.item-select', function() { fetch(`/row/${entity}/${relation}/${optionValue}`,{ method: 'POST' }) ...

Trouble arises when emitting events in Vue using eventHub

In the development of my component, there arises a need to emit an event at a specific point in its lifecycle. This emitted event is intended to be listened to by another sibling component. To facilitate this communication, I am utilizing an event hub. H ...

Begin anew with Flip.js

Currently, I am incorporating the jquery flip plugin from nnattawat.github.io/flip to establish a card flipping mechanism on my website. I have successfully implemented the method outlined in the documentation to unregister the flip event from the elemen ...

Retrieve the information following a redirection

There is a page '/order/new' with 2 dropdown menus for customer and their address, along with a button that redirects to choose products to add to the order. The selected products are saved in an array called 'hh' which receives data fr ...

Ensuring the sort icon is constantly displayed in MudDataGrid

Is there a way to keep the sort icon visible at all times in mudgrid without any default sorting using mudblazor? I have implemented the advanced data grid from the following link:- I have attempted using sortable=true on both the column and datagrid but ...

What is the best way to cycle through a nested JS object?

I am currently utilizing useState and axios to make an API call, retrieve the response, and pass it to a Component for rendering. const [state,setState] = useState([]); const getCurrData = () => { axios.get('working api endpoint url').then(r ...

Discover the process of retrieving all workday dates using Angular

Currently, I am working on a project in Angular that involves allowing employees to record their work hours. However, I am facing a challenge in figuring out how to gather all the work dates and store them in an array. Here is what I have attempted so fa ...

Navigating to two separate webpages concurrently in separate frames

I am working on creating a website with frames, where I want to set up a link that opens different pages in two separate frames. Essentially, when you click the link, one page (such as the home page in a .html file) will open in frame 1 on the left side, ...

What is the reason behind HTML5Boilerplate and other frameworks opting for a CDN to host their jQuery files

When it comes to loading jQuery, HTML5Boilerplate and other sources[citation needed] have a standard process that many are familiar with: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window. ...

Javascript - readjust weight distribution accordingly when a weight is removed

I am in possession of a dataset that shows the proportion of each test contributing to the final grade. In cases where a student has missed one or more tests, the weight is redistributed accordingly among the tests they did take. I want to determine how ...

Attempting to display items using the map method, pulling in text from an array

I am working with an array state that tracks the text entered by the user in a text field. My goal is to display this text within a component so users can see what they have previously entered. However, I am facing an issue with my Hashtags component when ...

What is the best way to store and retrieve all the variable data from a .js file on a user's device?

I'm looking for a way to save and load multiple variables in JavaScript that determine a "save" state. These variables are stored in a file named "variables.js." Is there a simple method to easily save all the information in this file and then load i ...

Engaging in payment processing

Currently facing a significant dilemma. I am utilizing Stripe as my payment gateway, which functions in a two-step process: Collect billing information to generate a token Charge the client using the generated token The issue arises because the token ca ...

Automatically copy any chosen selection on the page to the clipboard

Is there a way to copy any selection from a webpage to the clipboard, regardless of where it is located on the page (div, text input, password input, span, etc.)? I have created a function that can retrieve the selected text, but I am struggling with sett ...

Utilize an unmanaged assembly as a point of reference

Currently, I am facing an issue with referencing a managed DLL in my .NET project without having to copy it into the output directory. The objective is for my program to run the DLL from its installed location, wherever that may be. However, the problem ar ...