Question

我希望在用户使用ajax更改下拉值时更改网格日期。这是我的C＃代码：

public ActionResult Index(string name)
    {
        ViewBag.Drop = db.Students.Select(r => r.Fname);
        var model = from r in db.Students
                    where r.Fname == name
                    select r;

        return View(model);
    }

这是cshtml文件：

 @using (Ajax.BeginForm("Index", new AjaxOptions
    {
        UpdateTargetId = "grid",

        HttpMethod = "GET"
    }
        ))
    {

         @Html.DropDownList("name", new SelectList(ViewBag.Drop));
         <input type = "submit" value = "submit" />
    }
    <div id= "grid">

    </div>

我的问题是，当我更改下拉值时，会再次显示所有视图。我不想看新视图，只想更改网格数据。我怎么能这样做？

Answer 1

你有一个只返回网格数据的动作方法吗？如果没有，请创建一个

public ActionResult GridData(string name)
{
   var gridItems=repo.GetCustomers(name).ToList();   
   //the above method can be replaced by your 
   // actual method which returns the data for grid

    return View(model);
}

我只是假设您拥有一个名为FirstName和LastName属性的客户模型，并且您希望在网格中显示客户列表。您可以用实际的类名和属性替换它们。

确保您有一个名为GridData.cshtml的视图，该视图将为您的网格呈现HTML标记

@model IEnumerable<YourNameSpace.Customer>
@{
  Layout=null;
}
<table>
@foreach(var item in Model)
{
  <tr><td>item.FirstName</td><td>item.LastName</td></td>
}

我会编写简单的（和干净）代码，而不是使用Ajax.BeginForm

@Html.DropDownList("name", new SelectList(ViewBag.Drop));
<div id= "grid"></grid>

<script type="text/javascript">
 $(function(){

   $("select[name='name']").change(function(){
      var url="@Url.Action("GridData","YourControllerName")"+"?name="+$(this).val();
      $("#grid").load(url);
   });   

 });    
</script>

更改网格内容取决于下拉值

1 个答案: