partial view by ajax from action method in MVC

Getting partial view by ajax from action method in MVC

---

Add controller to your MVC application : MyDatesController

---

using MyApp.Common;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyApp.Controllers
{
    public class MyDatesController : Controller
    {
       public ActionResult GetDates()
        {
            return View();
        }


       [HttpPost]
       public ActionResult ShowDates(DateTime startDate, DateTime endDate)
       {
           if (startDate > endDate)
           {
               return new EmptyResult();
           }
           List<DateTime> lst = new List<DateTime>();
           for (var d = startDate; d <= endDate;d=d.AddDays(1) )
           {
               lst.Add(d);
           }
               return PartialView("_mydatepartial", lst);
       }

       
    }
}

---

Add PartialView view to views/MyDates : naming = _mydatepartial.cshtml

---

@model List<System.DateTime>
           @{
               int srno = 1;
           }
<style>
    .noworking{
        background-color:rgb(190, 31, 14);
        color:white;
    }
</style>
<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="panel-title"> Days</div>
    </div>
    <div class="panel-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Sr No</th>
                    <th>Day</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    var tdcss = "";
                    if (item.Date.DayOfWeek == DayOfWeek.Sunday || item.Date.DayOfWeek== DayOfWeek.Saturday)
                    {
                        tdcss = "noworking";
                    }
                    <tr>
                        <td class="@tdcss">@srno</td>
                        <td class="@tdcss">@item.DayOfWeek</td>
                        <td class="@tdcss">@item.Date.ToString("dd, MMM yyyy")</td>
                    </tr>
                    srno++;
                }
            </tbody>
        </table>

    </div>
</div>
           

---

Add view to the following action method

public ActionResult GetDates()
{
return View();
}

---

view should look like this

---

@{
    ViewBag.Title = "GetDates";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@Styles.Render("~/Content/Date")
<style>
    .bg-warning{
        background-color:rgb(215, 205, 93);
    }
</style>
<div class="form-horizontal">
    <div class="form-group">
        <div class="col-md-2">

            <label class="control-label">Start Date</label>
            @Html.TextBox("StartDate", "", htmlAttributes: new { @class = "form-control mydate" })

        </div>
        <div class="col-md-2">
            <label class="control-label">End Date</label>

            @Html.TextBox("EndDate", "", htmlAttributes: new { @class = "form-control mydate" })

        </div>
        <div class="col-md-1">
            <label class="control-label">&nbsp;</label>
            <button type="button" id="btnSearch" class="btn btn-success"><i class="glyphicon glyphicon-search"></i> Search</button>
        </div>

    </div>
    <div class="form-group">
        <div class="col-md-5">
            <div id="dates">

            </div>
        </div>
    </div>
</div>
@section scripts{
    @Scripts.Render("~/bundles/Date");
    <script>
        $(function () {
            $('.mydate,input[type="datetime"]').datepicker({
                format: 'dd/MM/yyyy',
                clearBtn: true,
                autoclose: true
            });


            $('#btnSearch').click(function () {

                if ($('#StartDate').val() == "" || $('#EndDate').val() == "" || $('#WorkingHours').val() == "") {
                    return;
                }
                GetDates();
            });

        });



        function GetDates() {

            var startDate = $('#StartDate').val();
            var endDate = $('#EndDate').val();
            var urlr = "@Url.Action("ShowDates", "MyDates")";
            $.ajax({
                url: urlr,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "html",
                data: "{startDate:'" + startDate + "',endDate:'" + endDate + "'}",
                success: function (data) {
                 
                    $('#dates').html(data);
                }
            });
        }
}