In the realm of ASP.NET, the Razor FormExtensions.BeginForm Method holds the

In my current view, there is a dropdown list that allows the user to select an option which will then redirect them to another page or controller. I am using JavaScript to retrieve the selected value from the dropdown list, but I am facing difficulties when trying to manipulate Html.BeginForm. The following snippet is part of my view:

@{  var newView=0;
    var page = "";
    var cont = "";
}
<script type="text/javascript" language="javascript">

function run() {
    newView = document.getElementById('views').value;
}

 function ButtonClicked() {

    alert("View selected: " + newView );
    // update variables page and cont here?
}

</script>

<select name="views" id="views" onchange="run()">
    <option value="0"> </option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

@using (Html.BeginForm(page, cont, FormMethod.Post))
{
    <button onclick="javascript:ButtonClicked()" type="submit" class="btn"> Go </button>
}

Is there a way for me to update the action of the submit button in a Razor view?

I have attempted to replace "Index" and "Home" with variables and update them within my functions, but it does not seem to be functioning as expected. Any suggestions on how to resolve this issue would be greatly appreciated.

-----Note: I revised my question to provide more clarity regarding the specific problem I am facing

Answer №1

To achieve the desired functionality of redirecting to a specific view based on the selected value in a dropdown list, you can implement the following approach:

    <select name="views" id="views" onchange="viewChosen()">
        <option value="0"> </option>
        <option value="action1">Option 1</option>
        <option value="action2">Option 2</option>
    </select>
    <script type="text/javascript">
        function viewChosen() {
            var url = '/Home/' + $('#views').val();
            var myView = $('#views').val();
            $.post(url);
        }
    </script>

Upon selecting Option 1, the user will be redirected to Home/action1. Similarly, selecting Option 2 will lead to redirection to Home/action2.

Answer №2

In order to redirect to a different page or controller when selecting an option from the dropdown menu, you can employ the

@Html.ActionLink("name of the option","Action","Controller")
method. This segment of code belongs in the navigation bar and in the view you wish to display, you can utilize @Html.beginForm:

<li>@Html.ActionLink("Home", "Menu", "Menu")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>

Could you provide more details on what specifically is not functioning as expected?

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

JavaScript Regular Expressions: Naming Conventions

While many of us are familiar with naming conventions in R, regular expressions remain uncharted territory for me and the most dreaded aspect of my programming endeavors. As I dive back into JavaScript, I am grappling with creating precise RegExp to valida ...

Transferring an array of any size from Java to PHP and effectively managing it in PHP

In my system, I have a HashMap that stores event-outcome pairs as two strings. The first string can be any positive integer (representing the id), and the second string is the possible outcome ('1', 'X', or '2'). For example, ...

Updating from MailMessage 1.1 to MailMessage 2.0 in ASP.NET

Currently, I am facing a challenge with an outdated 1.1 site that is utilizing the deprecated MailMessage class from the System.Web.Mail namespace. To resolve this issue, I have updated it to use the MailMessage class from the System.Net.Mail namespace. Ho ...

Having trouble submitting a form in React JS

I'm facing an issue with my form where I am trying to print the data in console upon submission, but for some reason it's not working. The form is not submitting and I can't figure out why. Below is the code I have written. Any help would be ...

Guide to smoothly scroll to a specific Label using GSAP's scrollTrigger and scrubbing within a Timeline

Currently facing an issue with a scrollTrigger Timeline where I need a button to scroll to a specific position. I attempted using seek but it did not work, and even the ScrollTo plugin lacks support for this functionality. The Timeline created using gsap ...

Exploring Parquet Files with Node.js

Looking for a solution to read parquet files using NodeJS. Anyone have any suggestions? I attempted to use node-parquet but found it difficult to install and it struggled with reading numerical data types. I also explored parquetjs, however, it can only ...

Is it possible to return an array of middleware from one middleware to another in Express JS?

Looking to display shop information through a route. The route setup is as follows: router.param('userId',getUserById) router.get("/store/:storeName/:userId?",isAuthenticated,getStoreDetail) My goal is to send different responses based ...

"Troubleshooting tip: encountering a SyntaxError message stating 'import declarations may only appear at top level of a module'? Here's

After downloading fetch-jsonp by running npm i fetch-jsonp and adding its dependency to my package.json, I attempted to import it using the following code at the top of my main.js: import fetchJsonp from 'fetch-jsonp'; However, I kept encounter ...

Tips on emphasizing all div elements and incorporating navigation to each of them

I am seeking a method to enhance a div with highlighting when there is a click or mouseover event. For instance, changing or adding a border color using JavaScript on click or mouseover is straightforward. Recently, I have been contemplating the idea of a ...

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

Align the reposition button with the pagination in the datatables

I am looking to adjust the placement of my buttons. The buttons in question are for comparison, saving layout, and printing. I would like them to be inline with the pagination, as I am using datatables here. <table id="sparepart_id" cellspacing="0" ...

How can I switch to another screen from the menu located within my Parent Component?

I've been working on adding a customized navigation menu to my react-native app, but I'm currently facing the challenge of not being able to navigate to the corresponding screens of the selected menu items. I tried using this.props.navigation.nav ...

Capture stream as an image

What is the best way to capture a stream as an image and save it in temporary files? ...

What could be causing the removeChild() method to fail when trying to delete a list item in JavaScript DOM manipulation?

Check out this interactive shopping list. You can add items, delete them, and mark them as completed. Adding and deleting items works fine, but there's an issue when toggling them. Issue (occurs when toggling multiple list items) If you add 3 items ...

ExpressJs does not support query parameters with the router.get method

I am currently working on developing an Express app. Here is the code snippet I am using: const express = require("express"); const router = express.Router(); router.get("/:id", ControllerHandler(UserController.getSingle, GetUserReque ...

What sets apart the concept of asynchrony in C# from that in JavaScript?

When working with Python and JavaScript, a common issue arises due to blocking the event loop. This occurs when code is executed in a single thread and only one synchronous operation can be performed at a time. Interestingly, this problem does not seem t ...

What is the procedure for obtaining the factory of an element in situations where the element's class is not

Currently, I am facing a challenge with React where I have a single React element and I want to generate additional elements with the same class. The issue is that I am not aware of the class name, only the instance of the element. When using React.create ...

When attempting to utilize VueJs v-bind:type on an input element, it appears to be ineffective when the type property name is

Code: <!DOCTYPE html> <html> <head> <title>Creating a Vue app</title> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3046455570021e061e0100">[ ...

Having trouble with installing NPM and ng commands, neither of them is working. I may have to uninstall everything and begin from scratch

Learning Angular and how to use the terminal is all new to me. I recently installed NPM and attempted to use ng serve, but encountered a series of issues. At this point, I am considering completely uninstalling everything so I can start fresh. I've d ...

Unable to establish a connection with the default port on Mongo DB while utilizing Node.js

I am new to using Node.js and I'm trying to establish a connection with MongoDB in my Node.js application, but I'm encountering issues. Here is the code snippet: var mongo = require("mongodb"); var host="127.0.0.1"; var port=mongo.Connection.DE ...