Mvc ajax weird behaviour

See more:

Ajax

MVC

jQuery

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