CODEWITHSUNDEEP
javascriptasp.netajaxasp.net-mvc
ary
ary

Reputation: 959

MVC 5 Ajax refresh based on dropdownlist and button click

Below is code I found online sometime back. It refreshes section of form based on link click. I want to change this to have links in a DropDownList. Then based on its selection and a button click I want to perform the same action as link click.

I am having hard time figuring out how to read dropdownlist selected value. I tried searching here on SO, but not finding any simple example. Looks like most of them are based on javascript. I am hoping that there must be some simple solution without using javascript.

Controller

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

Partial View

@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>

View

@{
    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>

Upvotes: 1

Views: 1231

Answers (1)

user3559349
user3559349

Reputation:

You need to replace you Ajax.ActionLink()'s with a single Ajax.BeginForm() containing the dropdownlist

@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>

Note the above assumes you have the following view model

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

And that in the GET method that generate this view

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

Then you would have a single controller method

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

Upvotes: 2

Related Questions