Home/ Questions/Q 6237129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:58:14+00:00

First off, I am an ASP.NET MVC noob. It’s my first project with ASP.NET

  • 0

First off, I am an ASP.NET MVC noob. It’s my first project with ASP.NET MVC, so I am still learning. My background is mostly in WPF and XAML for the past two years.

So here is my problem: I have three cascading ListBoxes. The second listbox data is dependent on the first, and the third is dependent on the second. I want to use Ajax refreshes to fill the data in each list.

Here is my Index.cshtml:

@model WebApplication.Models.DevelopmentModel

<!DOCTYPE html>

<html>
<head>
    <title>Dashboard</title>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

<body class="body" scroll="auto">

    <div class="page">
            <div class="content">

                <div id="lists">

                    @Html.Partial("DevelopmentListsView", Model)

                </div>
            </div>
    </div>

</body>
</html>

My DevelopmentListsView.cshtml looks like this:

@model WebApplication.Models.DevelopmentModel

@using (Ajax.BeginForm("Index", "Development", new AjaxOptions() { UpdateTargetId = "lists" } ))
{
    @Html.ListBoxFor(m => m.SelectedApplication, new SelectList(ViewBag.Applications), new { onchange = "this.form.submit();" })
    @Html.ListBoxFor(m => m.SelectedVersion, new SelectList(ViewBag.Versions), new { onchange = "this.form.submit();" })
    @Html.ListBoxFor(m => m.SelectedFlow, new SelectList(ViewBag.Flows) )
}

My Model looks like:

public class DevelopmentModel
{
    public string SelectedApplication { get; set; }
    public string SelectedVersion { get; set; }
    public string SelectedFlow { get; set; }
}

And my Controller looks like this:

public class DevelopmentController : Controller
{
    //
    // GET: /Development/

    public ActionResult Index()
    {
        FillViewBag();

        return View(new DevelopmentModel());
    }


    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(DevelopmentModel model)
    {
        FillViewBag(model);

        return PartialView("DevelopmentListsView", model);
    }


    private void FillViewBag(DevelopmentModel model = null)
    {
        //Magic to get all three lists dependent on the available data in the model:

        ViewBag.Applications = applications;
        ViewBag.Versions = versions;
        ViewBag.Flows = flows;
    }

}

Now, I want to use Ajax callbacks to retrieve the data, so it won’t refresh every time, but when I click one of the Listbox items, the page then only shows the DevelopmentListsView view after that, not refreshing anything..

Can someone tell me what I am doing wrong?

Thanks for looking!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Figured out my own question:

    I had two errors:

    I missed the jquery script include in the Index.cshtml:

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

    And I used the wrong submit (it should have been the jQuery submit):

    $(this.form).submit()

    The submit placed inside my models

    @model WebApplication.Models.DevelopmentModel

@using (Ajax.BeginForm("Index", "Development", new AjaxOptions() { UpdateTargetId = "lists" } ))
{
    @Html.ListBoxFor(m => m.SelectedApplication, new SelectList(ViewBag.Applications), new { onchange = "$(this.form).submit()" })
    @Html.ListBoxFor(m => m.SelectedVersion, new SelectList(ViewBag.Versions), new { onchange = "$(this.form).submit()" })
    @Html.ListBoxFor(m => m.SelectedFlow, new SelectList(ViewBag.Flows) )
}

    Hope this helps someone some day ;).

    • 0