Redirecting to view when selected index changed on dropdown in Asp.Net MVC RSS

• • Reply
  vijayarajans...

  None

  0 Points

  1 Post

  Redirecting to view when selected index changed on dropdown in Asp.Net MVC

  Oct 16, 2018 02:51 PM|vijayarajanse|LINK

  Hello All,

  I have an issue currently where I am using a Jquery fullcalendar plugin in Asp.Net MVC to display a course details(Course Name, Level, Course Discipline, Start Date, End Date etc..,) based on Month and Date. When loading the View in the browser, the page is displaying course details based on the Month and year and for the specific date columns. But when i am trying to change the dropdown value i have two dropdowns where I have a Parent dropdown and based on selection of values in the parent dropdown the values will get populated in the second dropdown. So that is also working fine.

  Next step is I'm trying to pass the selected value of the second dropdown through ajax service URL in the on change method of discipline dropdown, the value is getting passed to the controller, but not the same controller which i used while the initial site load since i was facing an MVC error when i was trying to redirect to the same controller. So i passed the value to a new controller and based on the value i need to pass Json value to the same View again so that the Json value needs to be fed to the events attribute in the fullcalendar Jquery code as per the selected item to be displayed at runtime during on change of discipline drop down.

  Here only i'm facing issue where I have written logic to collect the values and parse as Json, but when i'm trying to pass the Json value to the view i'm not able to pass it as Jsonresult also since it is not redirecting to my view itself. Even i tried using Actionresult and tried to pass my Json value as session variable so that i can get it in the corresponding view and pass it to the events. But as per my understanding it is not at all hitting the view for the second time from the other controller. Even when i passed the name of the view also i'm not able to get the value in the on change of drop down. Can anybody kindly suggest how to handle this? Sorry for my lengthy question since i thought to elaborate my issue in detail.

  This is the fullcalendar plugin sample which we downloaded and modified based on our requirement - https://fullcalendar.io/

  Updated the code below:

  This is the first controller code:

  public ActionResult CourseDetails()
          {
              var dataSourceId = RenderingContext.CurrentOrNull.Rendering.DataSource;
              var countryListdataSource = Sitecore.Context.Database.GetItem("{BD785CF5-0740-4EEF-9D8F-735A482970DD}");
              var calDaysdataSource = Sitecore.Context.Database.GetItem("{B9D9A314-9FE7-4512-9F2A-953878D0CFD2}");
              var categoriesDataSource = Sitecore.Context.Database.GetItem("{702A84C6-D9C9-4822-A22A-617E4C55DF43}");
              var coursesDataSource = Sitecore.Context.Database.GetItem("{6D71BC6A-797C-4408-B8BA-B785BFCAFB3E}");
  
              CoursesCalendar viewModel = new CoursesCalendar();
              {
                  viewModel.CountryList = countryListdataSource.Children;
                  viewModel.CalendarDays = calDaysdataSource.Children;
                  viewModel.CategoriesList = categoriesDataSource.Children;
                  viewModel.CoursesList = coursesDataSource.Children;
              };
  
              Sitecore.Foundation.SitecoreExtensions.Extensions.LMSExtensions.GetClasses();            
              return View("_CategoriesDD", viewModel);            
          }

  View code:

  @using Newtonsoft.Json
  @{
      string varCourse = "";
      string varCourse1 = "";
      object getCourseDate = "";    
      string disciplineName = "";
      string coursedata = "";
      string coursevalue = "";
      if (Session["datacourse"] == null)
      {
          coursevalue = "";
      }
      else
      {
          coursevalue = Session["datacourse"].ToString();
      }
      string datacourse = "";
      string datacourse1 = "";
      //Global Variable    
      var result = "";
      if (Model != null)
      {
          string industoryGroup = LMSExtensions.GetIndustoriesGroup();        
          datacourse = ViewBag.Course;
          datacourse1 = ViewBag.Course1;
      }
  }
  
  
  @Scripts.Render("~/scripts/jquery-1.10.2.js")
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDansqiNDcYWaZTT_PIq4l1yuyYnGK0HL4&callback=myMap"></script>
  <script src="/scripts/moment.min.js"></script>
  <script src="/scripts/jquery.min.js"></script>
  <script src="/scripts/fullcalendar.js"></script>
  
  <div class="container pt-5">
      <div class="row">
          <div class="col-md-5 text-left mb-2 calenderDownloadLink">
              <a href="#" class="link-text"><img src="images/icons/pdf.png" alt="PDF"> <span>Download Class Calender</span></a>
          </div>
          <div class="col-md-7 text-left dateBlock">
              <div class="form-group">
              </div>
          </div>
          <div class="clearfix"></div>
          <div class="col-md-6">
              <form class="form-inline">
                  <select class="form-control mr-1" Id="IndustoryGroupDD">
                      <option>Industry Group</option>
                      <option>Loremd sit</option>
                      <option>Loremd sit</option>
                  </select>
                  <select class="form-control mr-1" Id="DisiplineDD" onchange="GetClassDetails()">
                      <option>Discipline</option>
                      <option>Loremd sit</option>
                      <option>Loremd sit</option>
                  </select>
                  <div class="form-group">
                      <div class="dropdown">
                          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                                  aria-expanded="true" onchange="GetClassDetails()">
                              Select Location
                              <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu chekclistDropdwn">
                              @if (Model != null)
                              {
                                  foreach (var item in Model.CountryList)
                                  {
                                      <li><input type="checkbox">@item.Fields["Location Name"]</li>
                                  }
                              }
                          </ul>
                      </div>
                  </div>
                  <div class="form-group calenderMap">
                      <a href="#googleMap" class="map" data-toggle="collapse" aria-expanded="false">
                          <img src="images/icons/map.png" data-target="#googleMap" class="img-responsive cal_small" align="right">
                      </a>
                  </div>
              </form>
          </div>
          <div class="col-md-3 CalenderTabs searchBlock Search">
              <div class="form-group">
                  <div class="input-group">
                      <input type="text" class="form-control BorderRight0 BoxShadow0" placeholder="Search here..">
                      <div class="input-group-addon whiteBG cursor"><i class="fas fa-search"></i></div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div id="googleMap1" class="collapse" aria-expanded="false" style="width:100%;height:400px;margin:10px 0;"></div>
  <div class="container pb-5">
      <div id="calendar"></div>
  </div>
  @if (Model != null)
  {
      List<string> dateList = new List<string>();
      string startdt = "";
      string enddt = "";
      string actualDate = "";
      string courseName = "";
      string duration = "";
      string level = "";
      string discipline = "";
      string register = "";
      string courseId = "";
      string classDiscipline = "";
      varCourse += "[";
      foreach (var item in Model.CountryList)
      {
          startdt = DateTime.ParseExact(item.Fields["Start Date"].ToString(), "dd-MM-yyyy", System.Globalization.CultureInfo.InvariantCulture).ToString("yyyy-MM-dd");
          enddt = DateTime.ParseExact(item.Fields["End Date"].ToString(), "dd-MM-yyyy", System.Globalization.CultureInfo.InvariantCulture).ToString("yyyy-MM-dd");
          actualDate = item.Fields["Start Date"].ToString();
          courseName = item.Fields["Course Name"].ToString();
          duration = item.Fields["Duration"].ToString();
          level = item.Fields["Level"].ToString();
          discipline = item.Fields["Discipline"].ToString();
          //register = item.Fields["Register Link"].ToString();
          register = string.Empty;
          courseId = item.Fields["Course Id"].ToString();
  
          foreach (var courseItem in Model.CoursesList)
          {
              string courseItemCID = courseItem.Fields["Course ID"].ToString();
              if (courseId == courseItemCID)
              {
                  string courseCatID = courseItem.Fields["Course Category"].ToString();
                  foreach (var categoryItem in Model.CategoriesList)
                  {
                      string catID = categoryItem.Fields["ID"].ToString();
                      string depth = categoryItem.Fields["Depth"].ToString();
                      if (courseCatID == catID && depth == "3")
                      {
                          string parentID = categoryItem.Fields["Parent ID"].ToString();
                          foreach (var disciplineItem in Model.CategoriesList)
                          {
                              string disciplineID = disciplineItem.Fields["ID"].ToString();
                              string disciplineDepth = disciplineItem.Fields["Depth"].ToString();
                              string disciplineParentID = disciplineItem.Fields["Parent ID"].ToString();
                              if (parentID == disciplineID && disciplineDepth == "2" && disciplineParentID != "0")
                              {
                                  classDiscipline = disciplineItem.Fields["Name"].ToString();
                              }
                          }
                      }
                  }
              }
          }
  
          varCourse += "{start: '" + startdt + "', course: '" + courseName + "', duration: '" + duration + "', level: '" + level + "', discipline: '" + classDiscipline + "', register: '" + register + "'}, ";
          varCourse1 = "{start: '" + startdt + "', course: '" + courseName + "', duration: '" + duration + "', level: '" + level + "', discipline: '" + classDiscipline + "', register: '" + register + "'}, ";        
      }
      varCourse = varCourse.Remove(varCourse.LastIndexOf(','));
      varCourse += "]";
      coursedata = varCourse;
  }
  
  @section scripts{
      <script type="text/javascript">
  
          $(document).ready(function() {
              var serviceURL = '/api/feature/LMS/GetIndustoriesInfo';
              var industoryGroupDD = document.getElementById("IndustoryGroupDD");
              //industoryGroupDD.addEventListener("change", GetDisiplineInfo);
              industoryGroupDD.addEventListener("change", function () {
  
                  GetDisiplineInfo();
              });
  
              $.ajax({
                  type: "GET",
                  url: serviceURL,
                  data: param = "",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: successFuncIG,
                  error: errorFunc
              });
  
  
              function successFuncIG(data, status) {
                  if (data != undefined)
                  {
                      alert('success');
                  }
  
              }
  
              function errorFunc() {
                  console.log('Internal Server Error');
              }
  
              function GetDisiplineInfo() {
                  var IGID = industoryGroupDD.options[industoryGroupDD.selectedIndex].getAttribute('data-id');
                  if (IGID != "" && IGID != undefined)
                  {
                      serviceURL = '/api/feature/LMS/GetDisciplineInfo/?id=' + IGID;
                      $.ajax({
                          type: "GET",
                          url: serviceURL,
                          data: param = "",
                          contentType: "application/json; charset=utf-8",
                          dataType: "json",
                          //success: successFuncD,
                          //error: errorFunc
                          success: function(){
                              //your code here
                              alert('success')
                          },
                          error: function(){
                              //your code here
                              alert('fail')
                          }
                      });
                  }
              }
  
              function successFuncD(dataD, status) {
                  var DisiplineDD = document.getElementById("DisiplineDD")
                  if (dataD != undefined && dataD.length>0) {
                      var sessionVal = '@Html.Raw(coursevalue)';
                      alert('success');
                  }
              }            
  
              $("#DisiplineDD").change(function () {
                  var disciplineDD = document.getElementById("DisiplineDD");
                  var DisName = disciplineDD.options[disciplineDD.selectedIndex].getAttribute('value');
                  alert('Discipline Changed');
                  if (DisName != "" && DisName != undefined)
                  {
                      serviceURL = '/api/feature/LMS/GetCourseDetails/?disname=' + DisName;
  
                      //serviceURL = '/api/feature/LMS/GetDisciplineInfo/?id=' + IGID;
                      $.ajax({
                          type: "GET",
                          url: serviceURL,
                          data: param = "",
                          contentType: "application/json; charset=utf-8",
                          dataType: "json",
                          success: successFuncD,                        
                          error: function(){
                              //your code here
                              alert('fail')
                          }                        
                      });
  
                      @if (Model != null)
                      {
                          datacourse1 = ViewBag.Course1;
                      }
                      var discipline = '@Html.Raw(disciplineName)';
                      console.log(discipline);
                      alert(discipline);                    
                      var coursedata = @Html.Raw(coursedata);
                      console.log(coursedata);
                      var events = @Html.Raw(coursevalue);
                      $('#calendar').fullCalendar('removeEvents');
                      $('#calendar').fullCalendar('addEventSource', events);                    
                  }
              });
  
              function successFuncDis(dataD, status) {                
                  if (dataD != undefined && dataD.length>0) {
  
                      alert('success');
                  }
              }
  
                  $('#calendar').fullCalendar({
                      header: {
                          left: '',
                          center: 'prev title next',
                          right: 'month,basicWeek,basicDay'
                      },
                      defaultDate: '2018-08-06',
                      navLinks: true, // can click day/week names to navigate views
                      editable: true,
                      eventLimit: true, // allow "more" link when too many events
                      events: @Html.Raw(coursedata),                        
                      eventRender: function (event, element, view) {
                          var el = element.html();                            
                          element.find('.fc-title').prepend('<button class="btn btn-theme-outline btn-small btn-block btn-bold">' + event.register + '</button>');
                          element.find('.fc-title').prepend('<ul class="EventTime"><li><b>Duration:   </b></li><li class="oneLine courseFont">' + event.duration +' days </li></ul>');
                          element.find('.fc-title').prepend('<ul class="EventTime"><li><b>Level:  </b></li><li class="oneLine courseFont">' + event.level + '</li></ul>');
                          element.find('.fc-title').prepend('<ul class="EventTime"><li><b>Discipline: </b></li><li class="oneLine courseFont">' + event.discipline + '</li></ul>');
                          element.find('.fc-title').prepend('<ul class="EventTime"><li><b>End Date:   </b></li><li><font class="day">02</font><sup>nd</sup><font class="Month">Dec</font></li></ul>');
                          element.find('.fc-title').prepend('<ul class="EventTime"><li><b>Start Date: </b></li><li><font class="day">' + event.start + '</font><sup>nd</sup><font class="Month">Dec</font></li></ul>');
                          element.find('.fc-title').prepend('<p>' + event.course + '</p>');
                      },
                  });
  
              });
  
      </script>
  }

  Second controller code:

  namespace Sitecore.Feature.LMS.Controllers
  {
      public class LMSRecordsController : Controller
      {
          public ActionResult GetCourseDetails(string disname)
          {
              //return Sitecore.Feature.LMS.Repositories.CalendarCourseDetails.GetCourseDetails(disname);
              string varCourse = "";
              string varcourse1 = "";
              var countryListdataSource = Sitecore.Context.Database.GetItem("{BD785CF5-0740-4EEF-9D8F-735A482970DD}");
              var calDaysdataSource = Sitecore.Context.Database.GetItem("{B9D9A314-9FE7-4512-9F2A-953878D0CFD2}");
              var categoriesDataSource = Sitecore.Context.Database.GetItem("{702A84C6-D9C9-4822-A22A-617E4C55DF43}");
              var coursesDataSource = Sitecore.Context.Database.GetItem("{6D71BC6A-797C-4408-B8BA-B785BFCAFB3E}");
  
              CoursesCalendar viewModel = new CoursesCalendar();
              {
                  viewModel.CountryList = countryListdataSource.Children;
                  viewModel.CalendarDays = calDaysdataSource.Children;
                  viewModel.CategoriesList = categoriesDataSource.Children;
                  viewModel.CoursesList = coursesDataSource.Children;
              };
  
              //Code for getting the course details as Json output to be passed to the eventrender function of the Calendar Plugin
              if (viewModel != null)
              {
                  List<string> dateList = new List<string>();
                  string startdt = "";
                  string enddt = "";
                  string actualDate = "";
                  string courseName = "";
                  string duration = "";
                  string level = "";
                  string discipline = "";
                  string register = "";
                  string courseId = "";
                  string classDiscipline = "";
                  string disciplineName = "";
                  StringBuilder TheListBuilder = new StringBuilder();
                  TheListBuilder.Append("[");
                  varCourse += "[";
  
                  foreach (var item in viewModel.CountryList)
                  {
                      startdt = DateTime.ParseExact(item.Fields["Start Date"].ToString(), "dd-MM-yyyy", System.Globalization.CultureInfo.InvariantCulture).ToString("yyyy-MM-dd");
                      enddt = DateTime.ParseExact(item.Fields["End Date"].ToString(), "dd-MM-yyyy", System.Globalization.CultureInfo.InvariantCulture).ToString("yyyy-MM-dd");
                      actualDate = item.Fields["Start Date"].ToString();
                      courseName = item.Fields["Course Name"].ToString();
                      duration = item.Fields["Duration"].ToString();
                      level = item.Fields["Level"].ToString();
                      discipline = item.Fields["Discipline"].ToString();
                      register = item.Fields["Register Link"].ToString();
                      courseId = item.Fields["Course Id"].ToString();
  
                      foreach (var courseItem in viewModel.CoursesList)
                      {
                          string courseItemCID = courseItem.Fields["Course ID"].ToString();
                          if (courseId == courseItemCID)
                          {
                              string courseCatID = courseItem.Fields["Course Category"].ToString();
                              foreach (var categoryItem in viewModel.CategoriesList)
                              {
                                  string catID = categoryItem.Fields["ID"].ToString();
                                  string depth = categoryItem.Fields["Depth"].ToString();
                                  if (courseCatID == catID && depth == "3")
                                  {
                                      string parentID = categoryItem.Fields["Parent ID"].ToString();
                                      foreach (var disciplineItem in viewModel.CategoriesList)
                                      {
                                          string disciplineID = disciplineItem.Fields["ID"].ToString();
                                          string disciplineDepth = disciplineItem.Fields["Depth"].ToString();
                                          string disciplineParentID = disciplineItem.Fields["Parent ID"].ToString();
                                          if (parentID == disciplineID && disciplineDepth == "2" && disciplineParentID != "0")
                                          {
                                              classDiscipline = disciplineItem.Fields["Name"].ToString();
                                          }
                                      }
                                  }
                              }
                          }
                      }                    
                  }
                  if (disname == classDiscipline)
                  {
                      disciplineName = classDiscipline;
                      //classDiscipline += classDiscipline;
                  }
                  else
                  {
                      disciplineName = "";
  
                  }
                  varcourse1 += "[";
                  if (disciplineName == "")
                  {
                      TheListBuilder.Append("{");
                      TheListBuilder.Append("start: '" + "");
                      varCourse += "{start: '" + "" + "', course: '" + "" + "', duration: '" + "" + "', level: '" + "" + "', discipline: '" + "" + "', register: '" + "" + "'}, ";
                      varcourse1 += "{start: '" + "" + "', course: '" + "" + "', duration: '" + "" + "', level: '" + "" + "', discipline: '" + "" + "', register: '" + "" + "'}, ";                    
                  }
                  else
                  {
                      varCourse += "{start: '" + startdt + "', course: '" + courseName + "', duration: '" + duration + "', level: '" + level + "', discipline: '" + disciplineName + "', register: '" + register + "'}, ";
                      varcourse1 += "{start: '" + startdt + "', course: '" + courseName + "', duration: '" + duration + "', level: '" + level + "', discipline: '" + disciplineName + "', register: '" + register + "'}, ";
                  }
                  varCourse = varCourse.Remove(varCourse.LastIndexOf(','));
                  varcourse1 = varcourse1.Remove(varcourse1.LastIndexOf(','));
                  varCourse += "]";
                  varcourse1 += "]";
              }
  
              //string data = "";
              // *** Course data passed to viewbag **** //
              ViewBag.Course = varCourse;
              ViewBag.Course1 = varcourse1;
              //Session["datacourse"] = null;
              Session["datacourse"] = varCourse;
  
  
              //return JsonConvert.SerializeObject(varCourse);
              //return varCourse;
  
              return View();
          }        
      }
  }

  Thanks

  Vijay

• • Reply
  bruce (sqlwo...

  All-Star

  58254 Points

  15681 Posts

  Re: Redirecting to view when selected index changed on dropdown in Asp.Net MVC

  Oct 16, 2018 03:19 PM|bruce (sqlwork.com)|LINK

  normally your controller action called by ajax, should return Json(), not a view.  If the action returns a view, the browser will not display it, the javascript ajax success callback, needs to display the html. see the jQuery .html() method for adding a html string to the dom.

  bruce (sqlwork.com)
• • Reply
  Zhi Lv - MSF...

  All-Star

  45489 Points

  7008 Posts

  Microsoft

  Re: Redirecting to view when selected index changed on dropdown in Asp.Net MVC

  Oct 25, 2018 08:13 AM|Zhi Lv - MSFT|LINK

  Hi vijayarajanse,

  vijayarajanse

  Here only i'm facing issue where I have written logic to collect the values and parse as Json, but when i'm trying to pass the Json value to the view i'm not able to pass it as Jsonresult also since it is not redirecting to my view itself. Even i tried using Actionresult and tried to pass my Json value as session variable so that i can get it in the corresponding view and pass it to the events. But as per my understanding it is not at all hitting the view for the second time from the other controller. Even when i passed the name of the view also i'm not able to get the value in the on change of drop down. Can anybody kindly suggest how to handle this? Sorry for my lengthy question since i thought to elaborate my issue in detail.

  You could use a partial view to display the data list, please refer to the following code:

  Code in index view:

  @Html.DropDownListFor(m => m.EmployeeId, Model.EmployeeListItems, "---Select Employee---", new
  {
      Class = "ddlStyle",
      id = "ddlEmployee"
  }) 
  <div id = "partialDiv" >@Html.Partial("_EmpTestPartial") </div> 
  <script type="text/javascript">
      $(document).ready(function()
      {
          $("#ddlEmployee").on("change", function()
          {
              $.ajax(
              {
                  url: '/Home/GetEmployeeRecord?EmployeeId=' + $(this).attr("value"),
                  type: 'GET',
                  data: "",
                  contentType: 'application/json; charset=utf-8',
                  success: function(data)
                  {
                      $("#partialDiv").html(data);
                  },
                  error: function()
                  {
                      alert("error");
                  }
              });
          });
      }); 
  </script>  

  Code in controller:

  // GET: /Employee/  
  public ActionResult Index()  
  {  
      var employeeModel = new EmployeeModel();  
      employeeModel.listEmp = GetEmployeeDataFromDB();  
      //Set default emp records  
      employeeModel.EmployeeId = employeeModel.listEmp.First().EmployeeId;  
      employeeModel.EmpName = employeeModel.listEmp.First().EmpName;  
      employeeModel.Salary = employeeModel.listEmp.First().Salary;  
      return View(employeeModel);  
  }  
    
  /// <summary>  
  /// This method will return PartialView with Employee Model  
  /// </summary>  
  /// <param name="EmployeeId"></param>  
  /// <returns></returns>  
  public PartialViewResult GetEmployeeRecord(int EmployeeId)  
  {  
      var employeeModel = new EmployeeModel();  
      employeeModel.listEmp = GetEmployeeDataFromDB();  
      var emp = employeeModel.listEmp.Where(e => e.EmployeeId == EmployeeId).FirstOrDefault();  
      //Set default emp records  
      employeeModel.EmployeeId = emp.EmployeeId;  
      employeeModel.EmpName = emp.EmpName;  
      employeeModel.Salary = emp.Salary;  
      return PartialView("_EmpTestPartial", employeeModel);  
  }

  More details, please refer to the following articles:

  https://www.c-sharpcorner.com/blogs/drop-down-list-selected-index-changed-event-in-mvc

  https://forums.asp.net/t/1542765.aspx?Render+PartialView+according+to+selected+item+in+dropdown+list

  Best regards,
  Dillion

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.