Showing items in the same page after selecting from a dropdown control - asp.net-mvc

Question

I have a controller with an Index action which returns a ViewModel and a GetCategories action which should return a partial view.
So here is my CategoryController.cs file:
public class CategoryController : Controller
{
public ActionResult Index()
{
CategoryViewModel ob = new CategoryViewModel();
ob.LoadLanguages();
return View(ob);
}
public ActionResult GetCategories(int langID)
{
CategoryViewModel ol = new CategoryViewModel();
ol.LoadCategoriesByLanguage(langID);
if (Request.IsAjaxRequest())
return PartialView("GetCategories",ol);
In my Index.cshtml view I create a dropdown list and, when the user selects an element, it makes an Ajax request to the getCategories action and on success I should load the GetCategories partial view. The problem is that it redirects me to a new page and I can no longer see my dropdown.
Here is my Index.cshtml file:
#model Onion.Web.ViewModels.CategoryViewModel
<script>
$(document).ready(function () {
$("#ddlLanguages").change(function () {
$.ajax({
type: 'GET',
url: '#Url.Action("GetCategories")' + '?langId=' + this.value,
data: {},
success: callbackFuntion('#Url.Action("GetCategories")' + '?langId=' + this.value),
error: function () { alert('Error'); }
});
});
});
function callbackFuntion(url){
window.location = url;
}
</script>
#Html.DropDownList("Languages", new SelectList(Model.lstLanguages, "LanguageID", "Name"), "SELCT LANGUAGE----->",new { id = "ddlLanguages" })
}
And here is my Category.cshtml file:
#model Onion.Web.ViewModels.CategoryViewModel
<table>
<tr>
<td>ID</td>
<td>Title</td>
</tr>
#foreach (var item in Model.lstCategoryLanguages)
{
<tr>
<td>#item.Title</td>
<td>#item.ShortDescription</td>
</tr>
}
</table>
I can't beleve how easy it is in web forms and here i'm struggling for hours. Is there a better way to do all this. Thank you in advance

Answer 1

I slightly modified your Models and made it working prototype, from here you can get the concept and apply it to your models -
Models -
public class CategoryViewModel
{
public List<string> DDLItems { get; set; }
}
public class CategoryNewViewModel
{
public string Name { get; set; }
}
Controller -
public class MyPartialController : Controller
{
public ActionResult Index()
{
CategoryViewModel ob = new CategoryViewModel();
ob.DDLItems = new List<string>();
ob.DDLItems.Add("1");
ob.DDLItems.Add("2");
ob.DDLItems.Add("3");
return View(ob);
}
public ActionResult GetCategories(int langID)
{
CategoryNewViewModel ol = new CategoryNewViewModel();
if (langID == 1)
ol.Name = "One";
else if (langID == 2)
ol.Name = "two";
else
ol.Name = "three";
return PartialView("GetCategories", ol);
}
}
Index View -
#model MVC.Controllers.CategoryViewModel
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$("#DDLCategories").change(function () {
$.ajax({
type: 'GET',
url: '#Url.Action("GetCategories")',
data: {langID : $('#DDLCategories').val()},
success: function (result) { $('#container').html(result); },
error: function () { alert('Error'); }
});
});
});
</script>
<h2>Index</h2>
#Html.DropDownList("DDLCategories", new SelectList(Model.DDLItems), "--Choose any Item--")
<div id="container"> </div>
GetCategories Partial View -
#model MVC.Controllers.CategoryNewViewModel
#Model.Name
When you select a item in Dropdownlist, then the corresponding partialview will be loaded in the div.
Output -

Answer 2

It's normal because you execute a redirection in your success callback.
You can use load function of jQuery to load your partial view in a div of your dom.
<div id="categoriesPlace"></div>
<script>
$(document).ready(function () {
$("#ddlLanguages").change(function () {
$("#categoriesPlace").load('#Url.Action("GetCategories")' + '?langId=' + this.value, function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
alert( msg + xhr.status + " " + xhr.statusText );
}
}
});
});
</script>