如何使用下拉菜单和部分视图过滤数据? [英] How to filter data using Dropdown and Partial View?

问题描述

好.我想在MVC应用程序中执行的工作是在有效的视图中显示表格名称，国家/地区等.现在，我正在尝试使用下拉列表对其进行过滤.下拉列表确实会被填充.问题是我的动作结果没有从jQuery调用.有什么想法可能会出错吗?

Ok.What I am trying to do here in MVC application is display a table Names, Country etc in a view which does work. Now, I am trying to filter it using a dropdown. The dropdown does get populated. The problem is my action result is not getting called from jQuery. Any ideas where I might be going wrong?

非常感谢.

这是我的模特

public partial class tblDropdownFilter
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
    public System.DateTime Birthdate { get; set; }
}

这是我的控制人

public class HomeController : Controller
{ 

   public ActionResult Index()
   {       
        DropdownFilterSampleEntities dfse = new DropdownFilterSampleEntities();
        ViewBag.Names = new SelectList(dfse.tblDropdownFilters, "ID", "Name");
        var a = dfse.tblDropdownFilters.ToList();
        return View(a);
    }

    public ActionResult GetNames(int id)
    {
        DropdownFilterSampleEntities dfse = new DropdownFilterSampleEntities();
        var a = dfse.tblDropdownFilters.Where(x => x.ID == id).ToList();
        return PartialView("_GetNames",a);
    }
}

这是我的观点.

@model IEnumerable<SampleDropdownFilter.Models.tblDropdownFilter>
@{
ViewBag.Title = "Index";
}

<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Date of Birth</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var items in Model)
        { 
         <tr>
        <td>
            @items.Name
        </td>
        <td>
            @items.Country
        </td>
        <td>
            @items.Birthdate
        </td>
        </tr>
        }
    </tbody>
</table>

@Html.DropDownList("Names", "Select a name")

<div id="target"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#Names").change(function () {
            type: 'get',
            url: '@Url.Action("GetNames")',
            dataType: 'html',
            data: { id: $(this).val() },
            success: function (result) {                   
                $("#target").html(result);
            },
            error: function (ex) {
                alert("Error");
            }
        });
    });
</script>

最后，这是我的部分看法.名称是_GetNames.cshtml

And finally, here is my partial view. The name is _GetNames.cshtml

@model SampleDropdownFilter.Models.tblDropdownFilter

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.DisplayFor(x=>x.Name)</td>
            <td>@Html.DisplayFor(x => x.Country)</td>
        </tr>
    </tbody>
</table>

推荐答案

@frozenmirage在脚本中尝试.

@frozenmirage Try this in your script..

    $(document).ready(function () {

       $("#Names").change(function () {

            var myVal = $(this).val();

            $.ajax({
                cache: false,
                type: "GET",
                url: '@Url.Action("GetNames", "Home")?id=' + myVal,
                success: function (response) {
                    $('#target').html(response);
                },
                failure: function (response) {
                    alert("Failure");
                }
            });
        });
    });
</script>

这篇关于如何使用下拉菜单和部分视图过滤数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！