基于下拉列表和按钮单击的MVC 5 Ajax刷新

时间:2015-10-29 05:24:17

标签: javascript asp.net ajax asp.net-mvc

以下是我在网上发现的代码。它会根据链接点击刷新表单部分。我想改变它以在DropDownList中有链接。然后根据其选择和按钮单击,我想执行与链接单击相同的操作。

我很难弄清楚如何阅读dropdownlist选择的值。我尝试在这里搜索,但没有找到任何简单的例子。看起来大多数都基于javascript。我希望在不使用javascript的情况下必须有一些简单的解决方案。

控制器

namespace WebApplication2.Controllers
{
    public class HomeController : Controller {
        DBEntities db = new DBEntities();
        // GET: /AllUsers/
        public ActionResult Index()
        {
            return View();
        }
        // Return all students
        public PartialViewResult All()
        {
            List<AspNetUser> model = db.AspNetUsers.ToList();
            return PartialView("_Users", model);
        }
        // Return Top3 students
        public PartialViewResult Top3()
        {
            List<AspNetUser> model = db.AspNetUsers.OrderByDescending(x => x.UserName).Take(3).ToList();
            return PartialView("_Users", model);
        }
    }
}

部分视图

@model IEnumerable<WebApplication2.Models.AspNetUser>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PhoneNumber)
            </th>
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PhoneNumber)
                </td>
            </tr>
        }
    </table>

查看

@{
    ViewBag.Title = "Home Page";
} 
<div style="font-family:Arial">
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <h2>Students</h2>
    @Ajax.ActionLink("All", "All",
    new AjaxOptions
    {
        HttpMethod = "GET",  UpdateTargetId = "divStudents", InsertionMode = InsertionMode.Replace 

    })
    <span style="color:Blue">|</span>
    @Ajax.ActionLink("Top 3", "Top3",
    new AjaxOptions
    {
        HttpMethod = "GET",   UpdateTargetId = "divStudents",   InsertionMode = InsertionMode.Replace  
    } )
    <br /><br />
    <div id="divStudents"  style="height: 600px; overflow: auto;"></div>
</div>

1 个答案:

答案 0 :(得分:2)

您需要使用包含下拉列表的单个Ajax.BeginForm()替换@model StudentSearchVM <h2>Students</h2> @using (Ajax.BeginForm("Filter", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "divStudents", InsertionMode = InsertionMode.Replace })) { @Html.DropDownListFor(m => m.Filter, Model.FilterList) <input type="submit" value="Search" /> } <div id="divStudents" style="height: 600px; overflow: auto;"></div>

public class StudentSearchVM
{
  public string Filter { get; set; }
  public SelectList FilterList { get; set; }
}

请注意,上面假设您有以下视图模型

StudentSearchVM model = new StudentSearchVM
{
  FilterList = new SelectList(new List<string>(){ "All", "Top 3" })
}
return View(model);

在生成此视图的GET方法中

public ActionResult Filter(string filter)
{
  if (filter == "All")
  {
    List<AspNetUser> model = db.AspNetUsers.ToList();
    return PartialView("_Users", model);
  }
  else
  {
    ....
  }
}

然后你会有一个控制器方法

from openerp.osv import fields, osv
class dev_person(osv.osv):
_name = "dev.person"
_description = "Person"
_columns = {
    'name': fields.char('Person', size=128, required=True),
    'properties': fields.many2one('dev.property', 'property_id', select=True),
   }
_sql_constraints = [
    ('name_uniq','unique(name)', 'You cannot have two people with the same name !')
    ]


class dev_property(osv.osv):
_name = "dev.property"
_description = "Property"
def _compute_persons(self, cr, uid, ids, name, args, context=None):
    ''' This function will automatically computes the persons related to particular property.'''
    result = {}
    person_obj = self.pool.get('dev.person')
    for person_data in self.browse(cr, uid, ids, context=context):
        person_ids = person_obj.search(cr, uid, [('standard_id', '=', person_data.id)], context=context)
        result[person_data.id] = person_ids
    return result
_columns = {
    'name': fields.char('Property', size=128, required=True),
    'person_ids': fields.function(_compute_persons, method=True, relation='dev.person', type="one2many", string='Persons'),
   }