locked
Rookie Question RRS feed

  • Question

  • User-600908858 posted

    I am just exploring with MVC 3 and have hit a little snag.  I've watched a few tutorials and perused sample code.  What I THINK I want to do is:

    - Run some javascript in the onload of the <body> in my _Layout.cshtml

    - Obtain a few values from the client browser that I will be able to reference in my View (Index.cshtml)

    If I had the following javascript function in the <HEAD> of my _Layout.cshtml:

    <script type="text/javascript">

    function get_stuff(){

       var info = jsfunc.property;

    }

    </script>

    How can I make the value of the info variable into something that I can use in my View?

    I tried adding it to the ViewBag within the javascript function.

    @ViewBag.InfoVar = info;

    But that causes my javascript to bomb.

    I am sure this is simple as can be and probably one of the conceptual things I don't get about MVC at this point.  I am however sick and tired of Googling and looking for the answer.

    Thanks!

    Steve

    Wednesday, March 9, 2011 5:20 PM

Answers

  • User1682618242 posted

    The ViewBag is available on the server only before the view gets rendered. At the client side (in the browser) there is no ViewBag. You can use jQuery as suggested above to update a html tag.

    In _layout use:

    <script type="text/javascript">
        $(document).ready(function(){
               var data = CallYourFunction();
               $('#someDivID').html(data);
        });
    </script>

    where someDivId is the id of the html tag you want to update

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 10, 2011 12:21 AM
  • User327753758 posted

    change this;

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

    $(function myfunc() { });

    </script>

     

    to this;

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

    function myfunc() { }

    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 10, 2011 6:26 PM

All replies

  • User1904378495 posted

    That's not going to work. You can't send values collected in Javascript to server side code (@) via the ViewBag.

    Also, I believe razor layouts are evaluated inside out, meaning the view page is rendered and then merged into the outside layout.

    The best way to do this is to remove the onload function and instead use JQuery in your View. In your view add something like

    <script type="text/javascript">

      $(function(){

      var info = jsfunc.property;

      });

    </script> 

     

    That is the equivalent of a function called during onload and will fire when the view loads. 

    Wednesday, March 9, 2011 6:21 PM
  • User-600908858 posted

    Thanks for the response.  I wasn't really trying to pass it to the server side, I was trying to pass between layers.  The View page didn't like my javascript but the layout layer did.  So really I would want to pass it from the _layout to the view.  Just wanted to display something within an HTML element on the view.  Tried the ViewBag.

     

    Wednesday, March 9, 2011 10:05 PM
  • User1682618242 posted

    The ViewBag is available on the server only before the view gets rendered. At the client side (in the browser) there is no ViewBag. You can use jQuery as suggested above to update a html tag.

    In _layout use:

    <script type="text/javascript">
        $(document).ready(function(){
               var data = CallYourFunction();
               $('#someDivID').html(data);
        });
    </script>

    where someDivId is the id of the html tag you want to update

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 10, 2011 12:21 AM
  • User-600908858 posted

    THANKS! I have it working now. At least the client side stuff I wanted to do. This is such a paradigm shift and w/o a local resource I'm having a hard time grasping some of the concepts. Check me on whether I did this properly, or believable.

    In the <head> of my _Layout.cshtml I have:

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

    $(function myfunc() { });

    </script>

    In my View I have:

    @section Scripts { <script type="text/javascript"> $(document).ready(function () { myfunc(); }); </script> }

    Then back over in the <body> of my _Layout.cshtml I have:

    @RenderSection("Scripts", required: false)

    That is working and is getting the info I require from the browser. However, since I put it in my _Layout.cshtml in my Shared folder it is running whenever any View is called. How can I restrict this so that it is only called when for one (or more) particular Views?

    Thanks!

    Steve

    Thursday, March 10, 2011 3:32 PM
  • User327753758 posted

    change this;

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

    $(function myfunc() { });

    </script>

     

    to this;

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

    function myfunc() { }

    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 10, 2011 6:26 PM