Как вызвать частичное представление на основе изменения параметра в раскрывающемся списке с помощью AJAX?

Question

Я создал родительский вид и частичный вид. По мнению родителей, у меня есть раскрывающийся список стран. И это также показывает частичное представление. Когда страница загружается, она отображает как раскрывающийся список, так и частичный список просмотра.

Что мне нужно, так это то, что при изменении параметра в раскрывающемся списке отображается частичное представление в зависимости от выбранного параметра.

Я попробовал этот код, но пока не повезло. Я вставил весь код, который я пробовал. Я получаю данные в return clsStakes;, если я изменяю выпадающий список, но частичное не отражает новую запись.

Пожалуйста, ведите меня.

Мой модал

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

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

Контроллер

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

    }

}

Посмотреть

@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>

Метод вызова процедуры для частичной загрузки списка элементов

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;
        }


    }

Скрипт для загрузки частичного

 $(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>

Скрипт для вызова частичного на основе изменения в раскрывающемся списке

$('#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

При запросе частичных представлений из MVC вы возвращаете HTML-код, отображаемый на сервере, поэтому ваш ajax-запрос не должен запрашивать 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);
    }
});

удалить строку:

    dataType: 'json',

или измените его на 'html'

Предоставление:

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

Answer 2

в вашем коде есть опечатка по адресу:

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

, а также измените тип данных и тип содержимого на

$('#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);
        }
    });
});