Blog

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

2 replies

Last post Oct 25, 2018 08:13 AM by Zhi Lv - MSFT

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

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

50214 Points

11796 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)

Zhi Lv - MSF...

All-Star

45281 Points

6967 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›