locked
How to pass externaly a keyname to JQuery from a ViewBag RRS feed

  • Question

  • User433211055 posted

    Hi,

    I would like to pass through the viewbag the name of the value field and the text field to put in my dropdownlist. This my code:

        <script type="text/javascript">
        
            var nameDDL = '@ViewBag.NameDDL';
            var dropdownId = '#' + nameDDL;
            var urlAction  = '@ViewBag.UrlAction';
            var keyField   = '@ViewBag.KeyField';
            var textField  = '@ViewBag.TextField';
        
            $(document).ready(
                function () {
                    $(window).on("load",function () {
                        $.ajax({
                            type: 'GET',
                            data: {
                                'EveID': $("#ddlEveType").val()
                                //'EveID': '1'
                            },
                            url: urlAction,
                            contentType: "application/json",
                            success: function (data) {
                                console.log(data);
                                
                                $.each(data, function (i, item) {
                                    $(dropdownId).append($('<option>', {
                                        This doesn't work ??????
                                        value: item. keyField ,
                                        text: item. textField
                                    }));
                                });    
                            }
                        });
                    });
                });
        </script>
    

    How to pass this parameters dynamcally from viewbag ?

    Tuesday, September 25, 2018 2:33 PM

Answers

  • User433211055 posted

    thanks

    I solved that :

    $(document).ready(
    function () {
    $(window).on("load",function () {
    $.ajax({
    type: 'GET',
    data: {
    },
    url: urlAction,
    contentType: "application/json",
    success: function (data) {
    console.log(data);
    $.each(data, function (i, item) {
    $(dropdownId).append($('<option>', {
        value: item[keyField],
        text: item[textField]
    }));
    });
    }
    });
    });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 26, 2018 9:10 AM

All replies

  • User475983607 posted

    How to pass this parameters dynamcally from viewbag ?

    The posted code has many errors,; design and logical.

    I recommend populating the select input in the View rather that when the DOM loads in the browser which is the cleaner approach.  IMHO, it does not make sense to write JavaScript content and looping constructs when you can just write one line of code in a View to populate a select.

    Basic example.

            [HttpGet]
            public ActionResult Index()
            {
                List<SelectListItem> items = new List<SelectListItem>()
                {
                    new SelectListItem()
                    {
                        Text = "Hello",
                        Value = "1",
                        Selected = false
                    },
                    new SelectListItem()
                    {
                        Text = "World",
                        Value = "2",
                        Selected = true
                    }
                };
    
                ViewBag.MySelect = items;
                return View();
            }
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div>
        @Html.DropDownList("SelectDemo", (List<SelectListItem>)ViewBag.MySelect)
    </div>
    
    

    You can learn more by going through the Getting Started tutorials in this site.

    Tuesday, September 25, 2018 3:05 PM
  • User-271186128 posted

    Hi cicciuzzo,

     $(dropdownId).append($('<option>', {
                                        This doesn't work ??????
                                        value: item. keyField ,
                                        text: item. textField
                                    }));

    Try to use the following code to add dropdownlist options:

    $(dropdownId).append('<option value="' + keyField + '">' + textField + '</option>');

    Best regards,
    Dillion

    Wednesday, September 26, 2018 3:30 AM
  • User433211055 posted

    thanks

    I solved that :

    $(document).ready(
    function () {
    $(window).on("load",function () {
    $.ajax({
    type: 'GET',
    data: {
    },
    url: urlAction,
    contentType: "application/json",
    success: function (data) {
    console.log(data);
    $.each(data, function (i, item) {
    $(dropdownId).append($('<option>', {
        value: item[keyField],
        text: item[textField]
    }));
    });
    }
    });
    });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 26, 2018 9:10 AM
  • User433211055 posted

    My objetive is to create a viewcomponet that load the data autonomously, calling internally the action.

    I thank you anyway for your observation

    BR

    Wednesday, September 26, 2018 9:14 AM
  • User475983607 posted

    cicciuzzo

    My objetive is to create a viewcomponet that load the data autonomously, calling internally the action.

    But your approach does not accomplish this task.

    View Components run on the server and are designed to be an encapsulated server objects not dependent on a View model.  A View Component cannot be called directly from AJAX unless it is within a View.  That means a separate action is required for the View Component.  This fact defeats the purpose of using a View Component in your current design..

    The View Component HTML is rendered in place. If the component renders JavaScript, you'll need to make sure any dependent JS files are loaded at the top of the HTML page which goes against modern practices. 

    Lastly, it takes two requests to populate a select when you could simply populate the select in the first request.  There is no reason for the AJAX request.

    Ultimately the design us up to you but as far as I can tell you are not using the technology properly.

    Wednesday, September 26, 2018 11:50 AM