How to use ajax functiom with c# function in razor page RSS

• • Reply
  herlhay

  None

  0 Points

  3 Posts

  How to use ajax functiom with c# function in razor page

  Jan 05, 2018 10:15 PM|herlhay|LINK

  I am trying to add an upload form for my ecommerce site, and I need to have select boxes for category and subcategory. When I choose a category, I want an ajax function to autopopulate the other select box options with a list of subcategories from my sql server table of subcategories. I haven't been able to get the url part of the ajax function working, nor have I been able to find the right url to use with my c# class and cshtml page. Thank you.
• • Reply
  A2H

  All-Star

  50841 Points

  9895 Posts

  Re: How to use ajax functiom with c# function in razor page

  Jan 06, 2018 01:38 AM|A2H|LINK

  
  

  herlhay

  I want an ajax function to autopopulate the other select box options with a list of subcategories from my sql server table of subcategories. I haven't been able to get the url part of the ajax function working, nor have I been able to find the right url to use with my c# class and cshtml page

  You can try with below implementation

  View Code

  @model MVCWebApplication.Models.CategoryViewModel
  @{
      ViewBag.Title = "Home Page";
  }
  <script>
      function populateSubCategory() {
          var categoryIDval = $("#drpdwnCategory").val();
          var subCategoryDropdown = $("#drpdwnsubCategoryDropdown");
          //Change the controller name and method name as per your design
          $.getJSON('@Url.Action("RetreiveSubCategory", "Home")', { categoryID: categoryIDval }, function (response) {
              // remove any existing options
              subCategoryDropdown.empty();
              //Loop through each items in dropdownlist
              $.each(response, function (index, item) {
                  //Add the items in dropdownlist
                  subCategoryDropdown.append($('<option></option>').val(item).html(item)
                  );
              });
          });
      }
  </script>
  
  <div class="row">
      <div class="col-md-4">
         Category @Html.DropDownListFor(j => Model.SelectedCategoryId, Model.Categories, "--Select--", new { @id = "drpdwnCategory", onchange = @"populateSubCategory()" }) <br />
         SubCategory <select id="drpdwnsubCategoryDropdown"></select>
      </div>
  </div>

  Above code needs Jquery reference, make sure you have proper jquery reference in your page

  Controller Code

  AdventureWorks2016CTP3Entities dbContext = new AdventureWorks2016CTP3Entities();
  
          public ActionResult Index()
          {
              CategoryViewModel cvm = new CategoryViewModel();
              //You can populate this value from database if needed
              cvm.SelectedCategoryId = 2;
  
              //This is sample code to fetch data, you can change this as per your need
              cvm.Categories = dbContext.Categories.ToList().Select(k => new SelectListItem
              {
                  Value = k.CategoryID.ToString(),
                  Text = k.CategoryName
              });
  
              return View(cvm);
          }
  
          //Code to populate SubCategory dropdownlist
          public JsonResult RetreiveSubCategory(int categoryID) 
          {
              dbContext.Configuration.ProxyCreationEnabled = false;
              var result = dbContext.SubCategories
                           .Where(j => j.CategoryID == categoryID)
                           .Select(k=> k.SubCategoryName)
                           .ToList();
              return Json(result, JsonRequestBehavior.AllowGet);
          }

  Model Class

  View Model

   public class CategoryViewModel
      {
          public int SelectedCategoryId { get; set; }
          public IEnumerable<SelectListItem> Categories { get; set; }
      }

  Entity Class

      public class Category
      {
          public int CategoryID { get; set; }
          public string CategoryName { get; set; }
      }

    public partial class SubCategory
      {
          public int SubCategoryID { get; set; }
          public string SubCategoryName { get; set; }
          public Nullable<int> CategoryID { get; set; }
      
          public virtual Category Category { get; set; }
      }

  

  Thanks,
  Aje
  My Blog | Dotnet Funda