locked
Using JQuery to write Razor syntax RRS feed

  • Question

  • User1771308999 posted

    In an effort to create a more dynamic form - I've come across the challenge of creating a dynamic form that involves select option.

    I have a database with list of category and use @foreach to collect those value to input as option within select.

    However, when I use JQuery to create a new select option, I'm unable input @foreach inside .append(). It ends up reading as plain text -- is there a way to incorporate a Razor syntax into JQuery such as .append()??

    Sample:

    $("#add-new-selectfield").append("<div><select>@@foreach(var option in db.Query('SELECT * FROM Table')){<option value='@@option.Category'>@@option.Category</option>}</select></div>");

    Many thanks in advance! I also welcome an alternative approach too!

    Wednesday, June 3, 2015 10:59 AM

Answers

  • User281315223 posted

    jQuery is really only capable of working with client-side elements that exist in the DOM and likewise the Razor View Engine is server-side and will be executed prior to your jQuery calls. Because of this, you aren't really going to intermingle the two as your existing code demonstrates, however there may be a few options that you could use to accomplish this :

    • Consider executing and building your actual <select> element when the page is loaded and simply hide it somewhere in the page. This way you could simply display it whenever it was needed.
    • You could consider making an actual AJAX call and return your elements, loop through them and build your <select> list on the fly after that.

    But in my opinion, simply building it when the page is loaded might be the best bet :

    <!-- Your hidden element -->
    <div id='categories' style='display:none'>
        <select>
            @@foreach(var option in db.Query('SELECT * FROM Table')){
               <option value='@@option.Category'>@@option.Category</option>
            }
        </select>
    </div>
    
    // Append your element later
    $("#add-new-selectfield").append($("#categories"));

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 3, 2015 11:06 AM

All replies

  • User281315223 posted

    jQuery is really only capable of working with client-side elements that exist in the DOM and likewise the Razor View Engine is server-side and will be executed prior to your jQuery calls. Because of this, you aren't really going to intermingle the two as your existing code demonstrates, however there may be a few options that you could use to accomplish this :

    • Consider executing and building your actual <select> element when the page is loaded and simply hide it somewhere in the page. This way you could simply display it whenever it was needed.
    • You could consider making an actual AJAX call and return your elements, loop through them and build your <select> list on the fly after that.

    But in my opinion, simply building it when the page is loaded might be the best bet :

    <!-- Your hidden element -->
    <div id='categories' style='display:none'>
        <select>
            @@foreach(var option in db.Query('SELECT * FROM Table')){
               <option value='@@option.Category'>@@option.Category</option>
            }
        </select>
    </div>
    
    // Append your element later
    $("#add-new-selectfield").append($("#categories"));

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 3, 2015 11:06 AM
  • User1771308999 posted

    That did the trick.

    It's simple enough, but this also means I have to set up a fixed number of input field for this. Not exactly what you'd called dynamically created on the fly.

    So what suggestions do you have for an effective dynamically created form that also take data from database on the fly? Such as creating select option with options derived from database, checkbox with checklist derived from database, etc but the select option and/or checkbox are created dynamically..

    Is such approach possible?

    Wednesday, June 3, 2015 1:27 PM