How to call partial view based on option change in dropdown using AJAX?

Question

I have created parent view and partial view. In parent view, I have country dropdownlist. And it also shows partial view. When the page loads, it displays both dropdownlist and partial view list.

What I want is that, When I change the option in dropdownlist, the partial view displays based on the option selected.

I tried this code but no luck so far. I have pasted all the code which I tried. I am getting the data in return clsStakes; if I change in dropdown but partial is not reflecting the new record.

Please guide me.

My modal

   public class clsStakes
    {
        public string Country { get; set; }
    }

    public class ClsPartialStackes
    {
        public string Date { get; set; }
        public string Race { get; set; }
    }

Controller

public class HomeController : Controller
{

   [HttpGet]
   public ActionResult Home()
    {         
        return View();
    }       

    // Display Partial View
    public ActionResult PartialView(string countrylist, clsStakes clsStakes)
    {
        if(countrylist==null)
        {
            clsStakes.Country = "IRE";
        }
        else
        {
            clsStakes.Country = countrylist;
        }

        StakesDetails stakesDetails = new StakesDetails();
       return PartialView("~/Views/Stakes/_PartialStakes.cshtml", stakesDetails.StacksList(clsStakes.Country));

    }

}

View

@model AAA.Website.Models.Stakes.clsStakes
@Html.DropDownListFor(m => m.Country, new List<SelectListItem>
 {
     new SelectListItem {Value = "IRE", Text="Ireland" },
     new SelectListItem {Value = "ITY", Text = "Italy"},
     new SelectListItem {Value = "JPN", Text = "Japan" },
     new SelectListItem {Value = "NZ", Text = "New Zealand" },

  },
    new {@id="CountryList", @class = "form-control" })          

 <div id="mypartial"> </div>

Method to call the procedure to load list of items in partial

public class StakesDetails
    {
        clsUtilities clsUtilities = new clsUtilities();
        DataSet ds;
        public List<ClsPartialStackes> StacksList(string Country)
        {
            List<ClsPartialStackes> clsStakes = new List<ClsPartialStackes>();

            SqlParameter[] prms = new SqlParameter[1];
            string sSQL;
            sSQL = "exec GetStakes @Country";
            prms[0] = new SqlParameter("@Country", SqlDbType.VarChar);
            prms[0].Value = Country;
            ds = clsUtilities.CreateCommandwithParams(sSQL, prms);        
            DataTable dataTable = ds.Tables[0];
            foreach (DataRow dr in dataTable.Rows)
            {
                clsStakes.Add(
                    new ClsPartialStackes
                    {
                        Date = Convert.ToString(dr["mdate"]),                    
                        Race = Convert.ToString(dr["racename"]),                   
                    });
            }
            return clsStakes;
        }


    }

Script to load the partial

 $(document).ready(function () {
    var route = '@Url.Action("PartialView", "Home")';
     route = encodeURI(route);
     $('#mypartial').load(route);
    });

PartialView

@model IEnumerable<AAA.Website.Models.Stakes.ClsPartialStackes>


<table>
    <tr>
        <th>@Html.DisplayNameFor(m => m.Date)</th>
        <th>@Html.DisplayNameFor(m=>m.Race)</th>    
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.Race)               
            </td>         
        </tr>
    }
</table>

Script to call partial based on change in dropdown

$('#CountryList').change(function () {
         var countrylist = $(this).val();
                $.ajax({
                     url: '@Url.Action("PartialView", "Home")',
                     type: 'POST',
                    data: JSON.stringify({ countrylist: countrylist }),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (data) {
                        $("#mypartial").html(data);

                    }
                });
            });

Answer 1

When requesting partial views from MVC, you are returning HTML rendered on the server, so your ajax request must not be requesting json:

$.ajax({
    url: '@Url.Action("PartialView", "Home")',
    type: 'POST',
    data: JSON.stringify({ countrylist: countrylist }),
    dataType: 'json',
    contentType: 'application/json',
    success: function (data) {
        $("#mypartial").html(data);
    }
});

remove the line:

    dataType: 'json',

or change it to 'html'

Giving:

$.ajax({
    url: '@Url.Action("PartialView", "Home")',
    type: 'POST',
    data: JSON.stringify({ countrylist: countrylist }),
    contentType: 'application/json',
    success: function (data) {
        $("#mypartial").html(data);
    }
});

Answer 2

there is a typo in your code at:

 $("#mypartial".html(data);

and also change datatype and content type to

$('#CountryList').change(function () {
    var countrylist = $(this).val();
    $.ajax({
        url: '@Url.Action("PartialView", "Home")',
        type: 'POST',
        data: JSON.stringify({ countrylist: countrylist }),
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
           $("#mypartial").html(data);
        }
    });
});