asp.net Razor FormExtensions.BeginForm Method variable

Question

My view has a dropdown list, that depending on the option selected, will redirect you to another page/controller. I'm using javaScript to get the selected value of my dropdown list but have trouble trying to manipulate Html.BeginForm. Here 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>
}

How can I update the action of submit button in Razor view?

I tried to replace "Index" and "Home" for variables and update them in my functions, but its not working....any ideas?

-----Note: I updated my question to be more specific with my problem

What is "not working"? What happens and in what way does your code fail? Also note that if you're writing JavaScript then you're going to want to examine the actual rendered HTML. This server-side code means nothing to JavaScript. — David, Sep 16 '16 at 17:11
Sorry, I wasn't specific enough to explain what I want to achieve. I was planning to update the variables in some function and base on that use @using (Html.BeginForm but, obviously it does take the value of those variables when rendering the page at first which is before the "update". Still stuck — Rolando F, Sep 16 '16 at 18:57
It's still not clear what you mean by "manipulate Html.BeginForm", etc. It sounds like you may be misunderstanding the difference between server side code and client side code. — David, Sep 17 '16 at 03:17
When I mentioned "manipulate" is because, as you can see in my code, I have "page" and "cont" variables in Html.BeginForm() method. I was trying to "manipulate, update, modify" those variables so I can redirect user to a specific page. Now I understand that it is not a good idea since the page and values are rendered with "page" and "cont" initial values. As stated in my question I was asking for ideas because I'm not an expert — Rolando F, Sep 19 '16 at 14:10
Are you trying to redirect the user from JavaScript or from server-side code? You can't update server-side variables from client-side code, the entire scope of those variables has ended and they are gone by the time client-side code renders. What you *can* do, however, is actually redirect the user. Have you looked up how to perform a redirect in JavaScript? (http://stackoverflow.com/questions/4744751/how-do-i-redirect-with-javascript) Is anything still preventing that from happening? — David, Sep 19 '16 at 14:17
Just trying to redirect from client-side, not really doing nothing in server-side. I'm just redirecting the user to a different view for which I have a specific controller. I found a similar post in which someone posted this: var url = '/Admin/Administration'; window.location.replace(url); return false; I added those lines in my function and it is doing the job, however, I'm not familiar with this "return false" part. is it ok like that? is secure? As I said, it is doing the job but want to make sure before going further...thanks for all the help =) — Rolando F, Sep 19 '16 at 14:36

score 1 · Answer 1 · edited Sep 16 '16 at 19:37

1

I understand that you need to redirect to another page/controller when you click in some option of the dropdown menu, you can use @Html.ActionLink("name of the option","Action","Controller") to redirect to another controller like this (this is part of a navbar) and you can have the @Html.beginForm in the view you want to load:

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

But please explain better what is "not working"?

edited Sep 16 '16 at 19:37

YakovL

7,557
12
62
102

answered Sep 16 '16 at 17:55

Douglas Figueroa

675
6
17

I updated my question with the right info so my question can be more specific, so basically I was trying to updated some global variables and usen them in the form, which obviously is not working. – Rolando F Sep 16 '16 at 20:31
The form doesn't load correctly i think or i'm wrong? because of the page and cont variables, other thing if i'm wrong the `ButtonClicked` function is triggered or not? i wonder this to see where the error is. – Douglas Figueroa Sep 17 '16 at 01:21
I was using ButtonClicked() and run() to get the value selected in the dropdownlist, and then base on that, update "page" and "cont", at first I was thinking about update those variables in one of those function methods, but the page is rendered with the initial values of those global variables, so in that way is not going to work – Rolando F Sep 19 '16 at 14:01

score 1 · Accepted Answer · answered Sep 16 '16 at 18:39

1

I think you need when changed selected value, redirect to view that selected in dropdown list. For this you can do like this:

    <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>

If you select Option 1, redirect to Home/action1 and If you select Option 2, redirect to Home/action2.

answered Sep 16 '16 at 18:39

Ali Soltani

9,589
5
30
55

Do I still need to wrap my button with any form? If yes, how? Because it is just not doing the post – Rolando F Sep 16 '16 at 20:36
You didn't need to use button. `onchange` method in dropdownlist is just enough. – Ali Soltani Sep 17 '16 at 05:59
I need to add the button anyway, but in my case that $.post(url) is not redirecting my page. However, I found another post in which someone recommended to add these lines to the function method: window.location.replace(url); return false; ....like this is working for me, but not really sure of why the return false is needed.. – Rolando F Sep 19 '16 at 13:50
`return false` prevent from page being submitted. – Ali Soltani Sep 19 '16 at 14:13

asp.net Razor FormExtensions.BeginForm Method variable

2 Answers2