We help IT Professionals succeed at work.

How to create a dynamic ActionResult

109 Views
Last Modified: 2017-05-17
I have several menu items implemented as buttons.
Each menu item will hide or show a specific group of entry choices.
Once the choices are made the user clicks a continue button.

The code I have written doesn't scale well as the number of menu items increases ( as in my attachment)

I would like a better approach to implementing this logic. It seems I cannot dynamically create the action link parameters.

Any help in understanding the issues would be greatly appreciated
navigate.txt
Comment
Watch Question

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
try something like this

<button class="action" id=action1 action="action1">Action 1</button>
<button class="action" id=action2 action="action2">Action 2</button>
...
<button class="action" id=actionN action="actionN">Action N</button>

$(".action").on("click",function(){
  var action = $(this).attr("action");
  location.href = '@Url.Action(' + action + ', "myController")?dateFrom=' + startDate + '&dateTo=' + endDate ;
});

Open in new window

Author

Commented:
You know that's what I had tried. The error message is
'Too many characters in character literal'

It treats the action variable as part of the text because of when the substitution occurs with the RAZOR text I think
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
you have to wrap all with "

I dont see any issue here...

<button class="action" id=action1 action="action1">Action 1</button>
<button class="action" id=action2 action="action2">Action 2</button>
...
<button class="action" id=actionN action="actionN">Action N</button>

$(".action").on("click",function(){
  var action = $(this).attr("action");
  var url = '@Url.Action(' + action + ', "myController")?dateFrom=' + startDate + '&dateTo=' + endDate;
  console.log(url);
  //location.href = url; //un-comment this if it is ok
});

Open in new window


what do you get on sonsole after click? Press F12 - console...

Author

Commented:
That code does not compile. Here is a screenshot of the error message.
Error.png
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
what about this

function navigate()
{
  var action =  $('#choice').val();

  //location.href = '@Url.Action("action1", "myController")?dateFrom=' + startDate + '&dateTo=' + endDate ;
  location.href = '@Url.Action("' + action + '", "myController")?dateFrom=' + startDate + '&dateTo=' + endDate ;
}

Open in new window


if your org code works, this should work too...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
and this is fixed code for my suggestion above

<button class="action" id=action1 action="action1">Action 1</button>
<button class="action" id=action2 action="action2">Action 2</button>
...
<button class="action" id=actionN action="actionN">Action N</button>

$(".action").on("click",function(){
  var action = $(this).attr("action");
  var url = '@Url.Action("' + action + '", "myController")?dateFrom=' + startDate + '&dateTo=' + endDate;
  console.log(url);
  //location.href = url; //un-comment this if it is ok
});

Open in new window

Author

Commented:
What strikes about your solution is that when you append the action variable, .NET does the show it in 'white' ionstead it shows it in the color of my other text.

Also the action context is stored within the value attribute of the input statement, using your code, I have examined the content and it says Object HTMLCollection

            <button type="button" id="getMyDashboardJ" value="dashboardJ">Test Dashboard</button>
                var actionx = $(this).attr("action");
                alert('clicking'+actionx);

               var url = '@Url.Action("' + actionx + '", "myController")?dateFrom=' + startDate + '&dateTo=' + endDate + '&subject=' + selectedIndices + '&alerttype=Alert' + '&alertcategory=' + selectedCategory;
                console.log(url);

/myController/&#39;%20%2b%20actionx%20%2b%20&#39;?dateFrom=05/01/2017&dateTo=05/06/2017&subject=AlarmNet-I Degrade,&alerttype=Alert&alertcategory=
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
I am a bit lost here...

what is this? is it a function?

@Url.Action("actionx", "myController")

also here,
/myController/&#39;%20%2b%20actionx%20%2b%20&#39;?dateFrom=05/01/2017&dateTo=05/06/2017&subject=AlarmNet-I Degrade,&alerttype=Alert&alertcategory=

Open in new window


how that one is transferred into this

@Url.Action("actionx", "myController")
>>>
/myController/&#39;%20%2b%20actionx%20%2b%20&#39;

are you using some url re-write?

Author

Commented:
I am not sure what you mean by url-reqrite other than to say that I must compose the url at runtime based upon what button the user has chosen. each button contains (in the value property) the name of the method within the controller (myController) to execute. The additional information coming from other html inputs is appended onto the url as well.

I rename you action variable because I already  had an action variable named that.

Tonight I will isolate your solution and determine its merits

Author

Commented:
I have created an isolated view with a slight variation of your code within:

html:
           <button class="action" id=action1 action="action1">Action 1</button>

Jquery:
    $(".action").on("click", function () {
        alert('here');
        var action = $(this).attr("action");
        var startDate = '5/1/2017';
        var selectedIndices = 'AM Daily';
        var selectedCategory = '';
        var endDate = '5/10/2017';

        var url = '@Url.Action("' + action + '", "myController")?dateFrom=' + startDate + '&dateTo=' + endDate + '&subject=' + selectedIndices + '&alerttype=Alert' + '&alertcategory=' + selectedCategory;
        console.log(url);
        location.href = url; //un-comment this if it is ok
    });

resulting url:
http://localhost:57097/myController/'%20%2b%20action%20%2b%20'?dateFrom=5/1/2017&dateTo=5/10/2017&subject=AM Daily&alerttype=Alert&alertcategory=



I cant see you the substitution could ever succeed.
perhaps I was not clear to you on my requirement
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
what it should be? is this?

http://localhost:57097/myController/action?dateFrom=5/1/2017&dateTo=5/10/2017&subject=AM Daily&alerttype=Alert&alertcategory=
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
I am getting this and it looks ok to me...

@Url.Action("action1", "myController")?dateFrom=5/1/2017&dateTo=5/10/2017&subject=AM Daily&alerttype=Alert&alertcategory=

from the code @ ID: 42127722

Author

Commented:
The content that the action keyword contains is not being sent into the url.
I was expecting

http://localhost:57097/myController/'%20%2b%20action1%20%2b%20'?dateFrom=5/1/2017&dateTo=5/10/2017&subject=AM Daily&alerttype=Alert&alertcategory=
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
are you sure you have this

<button class="action" id=action1 action="action1">Action 1</button>

Author

Commented:
I pasted it from the code itself
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
do you have a link to test

I dont get how you end up with "action"

var action = $(this).attr("action");

should give you "action1"!

Author

Commented:
It does give you action1, the substitution just doesnt happen, I think because the razor substitution happens at a different time than the jquery execution??? or becaue the razor doesnt like expressions in the actiolink argument?
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
After my own research I found that most people pursued a different approach
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.