How to bind Grid List on select on changed dropdrown list .

We need to follow this steps
Step - 1
public ActionResult Index()
{
    ViewBag.ProjectCategory = db.DNS_ProjectCategory.ToList();
     return View();
}
public ActionResult ProjectListByCategory(string CategoryID = "")
{

if (CategoryID != "")

{

var lstProject = (from m in db.DNS_Projects where m.ProjectCategory == CategoryID select m).ToList();

return PartialView("ProjectListByCategory", lstProject);

}

else

{

var lstProject = (from m in db.DNS_Projects select m).ToList();

return PartialView("ProjectListByCategory", lstProject);

}

}





Step - 2 PartialView





@model IEnumerable<SocialLikeGroups.Models.EntityModel.DNS_Projects>

<style>

hr {

-moz-border-bottom-colors: none;

-moz-border-image: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

border-color: #EEEEEE -moz-use-text-color #FFFFFF;

border-style: solid none;

border-width: 1px 0;

margin: 18px 0;

}


.RightAlign {

width: 100%;

text-align: right;

}

</style>

<div class="RightAlign">

<a href='@Url.Action("Create", "Project")' class="btn btn-success">AddNew Project</a>

</div>

<hr />


<div class="panel panel-primary">

<div class="panel-heading">

<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Project List</h3>

</div>

<div class="panel-body">

<div id="shieldui-grid1">

<table>

<tr>

<th>

ID

</th>

<th>

@Html.DisplayNameFor(model => model.ProjectName)

</th>


<th>

@Html.DisplayNameFor(model => model.ProjectURL)

</th>


<th>

@Html.DisplayNameFor(model => model.ProjectCategory)

</th>

<th>Online</th>

<th>Edit</th>

<th>Details</th>

<th>Delete</th>

</tr>


@foreach (var item in Model)

{

<tr>

<td>

@Html.DisplayFor(modelItem => item.ProjectID)

</td>

<td>

@Html.DisplayFor(modelItem => item.ProjectName)

</td>


<td>

@Html.DisplayFor(modelItem => item.ProjectURL)

</td>


<td>

@Html.DisplayFor(modelItem => item.ProjectCategory)

</td>

<td><a class="btn btn-success" href="@item.ProjectURL" target="_blank">Online</a></td>

<td>

<a href='@Url.Action("Edit", "Project", new { id = item.ProjectID})' class="btn btn-success">Edit</a>





</td>

<td>

<a href='@Url.Action("Details", "Project", new { id = item.ProjectID})' class="btn btn-success">Details</a>





</td>

<td>


<a href='@Url.Action("Delete", "Project", new { id = item.ProjectID })' class="btn btn-success">Delete</a>

</td>

</tr>

}


</table>

</div>

</div>

</div>




Step - 3 Main Index Action with view





@model SocialLikeGroups.Models.EntityModel.DNS_Projects

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}


@using (Html.BeginForm())

{

<div>

<div class="col-md-9">

@Html.DropDownListFor(model => model.ProjectCategory, new SelectList(ViewBag.ProjectCategory as System.Collections.IEnumerable, "Name", "Name", new { @class = "form-control"}), new { id = "DDLProjectCategory" })

</div>

</div>

<hr />

<div id="dialog"></div>

}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script type="text/javascript">

$("#ShowDiv").show();

$("#DDLProjectCategory").change(function ()

{

var ID = $(this).val();

$.ajax({

type: "Post",

url: '@Url.Action("ProjectListByCategory", "Project")',

data: { CategoryID: ID },

dataType: "html",

success: function (data)

{

alert(data);

$("#ShowDiv").hide();

$('#dialog').html(data);

},

error: function (req, status, error)

{

alert(error);

}

});

})

</script>

<div id="ShowDiv">

@Html.Action("ProjectListByCategory", "Project")

</div>

I think It is helpful for you.