Click here to Skip to main content
14,875,227 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm new to web programming and I'm trying Ajax with MVC example as a sample project.
Filtering record On selecting value from combobox, but getting duplicate list instead of filtering in same html table.

This is Controller
public class TestController : Controller
    {
        private readonly User[] userData =
        {
            new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin},
            new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin},
            new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal},
            new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal},
            new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest}
        };

        public PartialViewResult GetUserData(string selectedRole = "All")
        {
            IEnumerable data = userData;
            if (selectedRole != "All")
            {
                var selected = (Role)Enum.Parse(typeof(Role), selectedRole);
                data = userData.Where(p => p.Role == selected);
            }
            return PartialView(data);
        }

        public ActionResult GetUser(string selectedRole = "All")
        {
            return View((object)selectedRole);
        }

    }


This is view GetUser.cshtml.cshtml
@using SampleMVC.Models
@model string           

@{
    ViewBag.Title = "GetUser";
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tableBody",
        OnBegin = "function1"
    };
}

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<script type="text/javascript">
    function function1() {
        $("#textbox1").text("function 1 called again");
    }
</script>

<h2>Get User</h2>
<table id="maintable">
    <thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
    <tbody id="tableBody">
        @Html.Action("GetUserData", new { selectedRole = Model })
    </tbody>
</table>

<div id="textbox1">123</div>

@using (Ajax.BeginForm("GetUser", ajaxOpts))
{
    <div>
        @Html.DropDownList("selectedRole", new SelectList(
        new[] { "All" }.Concat(Enum.GetNames(typeof(Role)))))
        <button type="submit">Submit</button>
    </div>
}


This is partial view GetUserData.cshtml
@model IEnumerable<SampleMVC.Models.User>

<table id="PartialTable">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FirstName)
            
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LastName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.BirthDate)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.BirthDate)
            </td>
            <td></td>
        </tr>
    }

</table>



What I'm trying to achieve is, on selection change of combo box table values should get filtered and Div tag with id=textbox1 should display value as mentioned in function1().

What I have tried:

If i replace my GetUser.cshtml view then it's working fine and updating the table with filtered values. But it doesn't behave same when I modify it as mentioned above.
@using SampleMVC.Models
@model string
@{
ViewBag.Title = "GetUser";
AjaxOptions ajaxOpts = new AjaxOptions {
UpdateTargetId = "tableBody"
};
}
<h2>Get User</h2>
<table>
    <thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
        <tbody id="tableBody">
            @Html.Action("GetUserData", new {selectedRole = Model })
        </tbody>
</table>

@using (Ajax.BeginForm("GetUser", ajaxOpts)) {
    <div>
        @Html.DropDownList("selectedRole", new SelectList(
        new [] {"All"}.Concat(Enum.GetNames(typeof(Role)))))
        <button type="submit">Submit</button>
    </div>
}
Posted
Comments
Afzaal Ahmad Zeeshan 22-Jan-17 13:53pm
   
Why don't you consider filtering them on the client-side? You can do that easily.
Sinisa Hajnal 23-Jan-17 4:06am
   
Clear the original list on button click. That way, when you get the data back you'll have clear table to fill out.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900