c# - 如何使用 AJAX 根据下拉列表中的选项更改调用局部 View ？

Question

我已经创建了父 View 和局部 View 。在父 View 中，我有国家/地区下拉列表。它也显示局部 View 。页面加载时，它会同时显示下拉列表和部分 View 列表。

我想要的是，当我更改下拉列表中的选项时，部分 View 会根据所选选项显示。

我试过这段代码，但到目前为止运气不好。我已经粘贴了我尝试过的所有代码。我在 return clsStakes; 中获取数据，如果我在下拉列表中进行更改但部分未反射(reflect)新记录。

请指导我。

我的模态

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

    }

}

查看

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

局部 View

@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 请求部分 View 时，您将返回在服务器上呈现的 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);
    }
});