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

如何使用AJAX在下拉列表中根据选项更改调用局部视图？

2 个答案: