Setting razor variables in javascript

Question

I am trying to assign a razor variable with the contents of a combo box on my form from within a javascript function. Like so:

<script type ="text/javascript">
<!--
    function SomeFunction() {

        var hours = document.getElementById("Hours");
        var task = document.getElementById("TaskType_ID");
        @{            
            var tsk = @:task.value;            
         }

        @{            
        <text>
            hours.value = '@ViewBag.TaskTypes.GetHours(tsk)';
        </text>
        }

        return true;
    }

//-->
</script>

the line (and every other variation I've tried)

var tsk = @:task.value;

results in an error.

Ok you are mixing client (javascript) and server (asp.net / razor) technologies here, and it isn't going to work in anything like the form you are trying. You need to bridge the gap with AJAX. Am I correct in assuming you have two comboboxes and you want the options in the hours combobox to change when the user selects an option from the task combo box? — Chris Sainty
– Chris Sainty, Commented Jun 28, 2011 at 2:44
@RobG Razor is the latest syntax engine for creating pages in asp.net mvc 3. — Chris Sainty
– Chris Sainty, Commented Jun 28, 2011 at 2:45
Chris - as you say, the OP needs to separate server code from client code and should specify the outcome to achieved, not just post non-working code. — RobG
– RobG, Commented Jun 28, 2011 at 2:57
Hi Chris - I have a combo box that contains some task codes. during the onchange event for this combo box, I want to compute a number of hours (from an object passed in from the controller) and place this value in a text box. — TomDW
– TomDW, Commented Jun 28, 2011 at 3:01

Xnake · Accepted Answer · 2011-06-28 07:13:20Z

1

As Chris pointed out, you are mixing the client and server code. The javascript is the client code, and you need the data from the server to return the value you want by using ajax calling function(get/post). Here is the snippet code of what you can do about it:

$("#tasks").change(function(){
    $.get('url',$(this).val(), function(data){
        // data is the hours returned from the selected task
        $("#hours").val(data);
    });
});

Or instead of making calls to the server everytime you select a task, you can always store the values of the tasks in a variable. Thanks

answered Jun 28, 2011 at 7:13

Xnake

9407 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TomDW Over a year ago

thank you @Xnake. I'll try this and let everyone know how it went.

TomDW · Accepted Answer · 2011-07-01 19:24:47Z

okay. here's what i wound up doing. I no longer pass in an object into the view. I added a script that binds to the change event of my first field, and then called an action in my controller via ajax and puts the result into the second field. Like so:

<script type="text/javascript">

    $(document).ready(function () {
        $("#q").change(function () {
            $.ajax({
                type: "GET",
                url: "Home/Test?value=" + $('#q').get(0).value,
                success: function(msg) {
                    $('#x').get(0).value = msg;
                }
            });
        });
    });

</script>

thank you for leading me in the right direction. With all of the razor syntax, I lost sight of the hact that this is still html. I hope you all enjoyed watching me attempt to pound a square peg into a round hole!

Collectives™ on Stack Overflow

Setting razor variables in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related