View not populate data after dropdown data selection - entity-framework

Question

I am work on MVC 5 and i fill a dropdown with state name of Country through ViewData and also in my view page i show the every state record. But i want, After selection of Dropdown value in view show only selected state value. this is my code that's not working
Controller
public ActionResult Index(int? id)
{
ViewData["State"] = new SelectList(db.state, "state_id", "name");
if (id!=null)
return View(db.state.Where(x => x.state_id == id));
else
return View(db.state.ToList());
}
View
#Html.DropDownList("ddlstate", (SelectList)ViewData["State"], "Select State", new { onchange = "Index(this.value);", #class = "form-control" })
<table class="table" id="statedetails">
<thead>
<tr>
<th>
State ID
</th>
<th>
State Name
</th>
<th>
City
</th>
<th>
Population
</th>
<th>
Education %
</th>
<th></th>
</tr>
</thead>
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
#Html.DisplayFor(modelItem => item.stateid)
</td>
<td>
#Html.DisplayFor(modelItem => item.statename)
</td>
<td>
#Html.DisplayFor(modelItem => item.city)
</td>
<td>
#Html.DisplayFor(modelItem => item.population)
</td>
<td>
#Html.DisplayFor(modelItem => item.eduction)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.offer_id }) |
#Html.ActionLink("Details", "Details", new { id = item.offer_id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.offer_id })
</td>
</tr>
</tbody>
}
</table>
javascript
<script type="text/javascript">
function Index(id) {
$.ajax({
url: "#Url.Action("Index","State")",
type: "POST",
data: { "id": id }
});
}
</script>