All geek questions in one place

Asp.net MVC populate a list box using jQuery?

I have a list of recipients in the drop-down list on my form. I would like to populate another drop-down menu based on the selected recipient drop-down list item, without email messages and all that.

So, I created a method in my controller that does the work:

        private JsonResult GetCategories(int payeeId)
    {
        List<CategoryDto> cats = Services.CategoryServices.GetCategoriesByPayeeId(payeeId);
        List<SelectListItem> items = new List<SelectListItem>();

        foreach(var cat in cats)
        {
            items.Add(new SelectListItem {Text = cat.Description, Value = cat.CategoryId.ToString()});
        }

        return Json(items);

    }

Now I'm not sure what to add in my opinion to make this work.

At the moment, all I have is:

 <% using (Html.BeginForm())
   {%>

   <p>
   <%=Html.DropDownList("SelectedAccountId", Model.Accounts, "Select One..", null) %>
   </p>
   <p>
   <%=Html.DropDownList("SelectedPayeeId", Model.Payees, "Select One...", null) %>
   </p>

                         <input type="submit" value="Save" />
<%
    }%>

they fill out in order ... so when the user selects the SelectedPayeeId drop-down list, he must then populate a new (not yet created?) drop-down list that contains categories based on SelectedPayeeId.

, , JQuery ( JQuery.. , ), Payee onChange? , . , , , ?

+3
2

. jquery View/Master. jquery http://jquery.com/. <script src="/path/to/jquery.js"> <head> . (, , ). "SelectedCategoryId:"

<%=Html.DropDownList("SelectedCategoryId", null, "Select One...", new { style = "display:none;"}) %>

Drop Down, , . , . , - <script>, :

$(document).ready(function() { $('#SelectedPayeeId').change(function() { 
$.ajax({
  type: 'POST',
  url: urlToYourControllerAction,
  data: { payeeId: $(this).val() },
  success: function(data) { 
     var markup = '';
     for (var x = 0; x < data.length; x++ ) {
        markup += '<option value="' + data[x].Value + '">'+data[x].Text+'</option>';
     }
     $('#SelectedCategoryId').html(markup).show();
  }
}); }); });

, , DOM "SelectedPayeeId" ( ). AJAX URL . ( JSON ), html, . , html "SelectedCategoryId" , .

, , () , . jQuery http://docs.jquery.com/Main_Page, :

+8

GetCategories , .

jquery :

<script type="text/javascript">
    $(function() {
 $('#SelectedPayeeId').change(function() {
          $.get('<%= Url.Action("GetCategories", "YourControllerName") %>',
                    {payeeId: $(this).val()}, 
                    function(data) {
                       populateSelectWith($("#Category"), data);

           });
        });
   //Place populateSelectWith method here
});
</script>
The populateSelectWith can fill your dropdown with data like:

  function  populateSelectWith($select, data) {
    $select.html('');
    $select.append($('<option></option>').val('').html("MYDEFAULT VALUE"));
    for (var index = 0; index < data.length; index++) {
        var option = data[index];
        $select.append($('<option></option>').html(option));
      }
    }

, , .

jquery ajax get - , [HttpGet]

+1

Source: https://habr.com/ru/post/1788627/

More articles:


All Articles