redirect ViewBage automatically once selected

Question

User982203039 posted

Is there a way to automatically redirect the  when a department is selected? @Html.DropDownList("Departments",ViewBag.Departments as SelectList)  ? So once I select Main for example is redirects to Employees(string Department) with the department I selected?

Controller:

BranchesConn bCon = new BranchesConn();

public ViewResult Employees(string Branch)
{
ViewBag.Branches = new SelectList(bCon.Branches, "ID", "Branch1");
var branch = bCon.Branches.ToList();
var employees = from m in db.Employees
where m.Branch == Branch || Branch == null || Branch == ""
select m;
return View(employees.ToList());
}

View:

@Html.DropDownList("Branches", ViewBag.Branches as SelectList)

Answer 1

User475983607 posted

Use a jQuery event.  Make sure the code is below the drop down list.

    <script>
	    $('#Branches').change(function(){
		    window.location = '@Url.Action("someController", "someAction", new {Department = "someDepartment"})'
	    });
    </script>

Answer 2

User1520731567 posted

Hi Baze72,

As @mgebhard said,you could window.location to redirect:

window.location = '@Url.Action("someAction", "someController", new {Department = "someDepartment"})'

Else,you could also use ajax to return Json and change html( such as:ddl ) in success callback function,for example:

 $('#Branches').change(function(){
               $.ajax({
                   url: "/someController/Employees",
                   type: "POST",
                   dataType: "json",
                   data: { Branch: $('#Branches option:selected').val() },
                   success: function (data) {
                       $('#Branches').empty();
                       $.map(data, function (item) {                        
                           $('#Branches').append('<option value="' + item.xxx+ '">' + item.xxx+ '</option>');
                       })
                    
                   }
               })

Controller:

 [HttpPost]
        public JsonResult Employees(string Branch)
        {
           var branch = bCon.Branches.ToList(); 
           var employees = from m in db.Employees
                           where m.Branch == Branch || Branch == null || Branch == ""
                           select m;
      
            return Json(employees.ToList(), JsonRequestBehavior.AllowGet);
        }

Best Regards.

Yuki Tao

Answer 3

User982203039 posted

OK. Does this look correct? it is not redirecting at all: I know I still have a few clean up items but I would think it should still try to redirect.

View:

<p>

@Html.ActionLink("Create New", "Create")

<h4>
Branch: @Html.DropDownList("Branches", ViewBag.Branches as SelectList, "Select a Branch")
</h4>
<script>
$('#Branch').change(function(){
$.ajax({
url: "/Dept/Employees",
type: "POST",
dataType: "json",
data: { Branch: $('#Branches option:selected').val() },
success: function (data) {
$('#Branches').empty();
$.map(data, function (item) {
$('#Branches').append('<option value="' + item.xxx+ '">' + item.xxx+ '</option>');
})
}})

Controller:
public ViewResult Employees()
{
ViewBag.Branches = new SelectList(bCon.Branches, "ID", "Branch1");
var employees = from m in db.Employees
select m;
return View(employees.ToList());
}
[HttpPost]
public ViewResult Employees(string Branch)
{
ViewBag.Branches = new SelectList(bCon.Branches, "ID", "Branch1");
var employees = from m in db.Employees
where m.Branch == Branch || Branch == null || Branch == ""
select m;
return View(employees.ToList());
}

Answer 4

User475983607 posted

Baze72

OK. Does this look correct? it is not redirecting at all: I know I still have a few clean up items but I would think it should still try to redirect.

View:

<p>

@Html.ActionLink("Create New", "Create")

<h4>
Branch: @Html.DropDownList("Branches", ViewBag.Branches as SelectList, "Select a Branch")
</h4>
<script>
$('#Branch').change(function(){
$.ajax({
url: "/Dept/Employees",
type: "POST",
dataType: "json",
data: { Branch: $('#Branches option:selected').val() },
success: function (data) {
$('#Branches').empty();
$.map(data, function (item) {
$('#Branches').append('<option value="' + item.xxx+ '">' + item.xxx+ '</option>');
})
}})

Controller:
public ViewResult Employees()
{
ViewBag.Branches = new SelectList(bCon.Branches, "ID", "Branch1");
var employees = from m in db.Employees
select m;
return View(employees.ToList());
}
[HttpPost]
public ViewResult Employees(string Branch)
{
ViewBag.Branches = new SelectList(bCon.Branches, "ID", "Branch1");
var employees = from m in db.Employees
where m.Branch == Branch || Branch == null || Branch == ""
select m;
return View(employees.ToList());
}

There is no redirect plus there are issue with the code.  AJAX requires that you write code to update the DOM using the response of the AJAX request. 

My first example shows how to redirect the browser.

Answer 5

User982203039 posted

Like This?

<h4>

Branch: @Html.DropDownList("Branches", ViewBag.Branches as SelectList, "Select a Branch", new { id = "Branches" })
<script>
$('#Branches').change(function(){
window.location = '@Url.Action("Department", "Employees", new {Department = "Main"})'
});
</script>
</h4>

Answer 6

User475983607 posted

Like This?

<h4>

Branch: @Html.DropDownList("Branches", ViewBag.Branches as SelectList, "Select a Branch", new { id = "Branches" })
<script>
$('#Branches').change(function(){
window.location = '@Url.Action("Department", "Employees", new {Department = "Main"})'
});
</script>
</h4>

Looks correct.  Did you try the code and there is a problem?  Are there errors in Dev Tools Console?  Please try to be specific when posting questions so we are not guessing.

Answer 7

User982203039 posted

OK So this return the value of the DropList:

@Html.DropDownList("Branch", ViewBag.Branches as SelectList, "Select a Branch")
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$( "#Branch").change(function() {
alert($(this).val());
});

So now I just need to redirect to: @Html.ActionLink("Branch", "Employees", new { Branch = item.Branch }) but Item.Branch would be $(this).val(). Can this be done?

Answer 8

User475983607 posted

OK So this return the value of the DropList:

@Html.DropDownList("Branch", ViewBag.Branches as SelectList, "Select a Branch")
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$( "#Branch").change(function() {
alert($(this).val());
});

So now I just need to redirect to: @Html.ActionLink("Branch", "Employees", new { Branch = item.Branch }) but Item.Branch would be $(this).val(). Can this be done?

Concatenate the URL and querystring to build the URL.

    <script>
        $( "#Branch").change(function() {
	        window.location = '@Url.Action("Department", "Employees")?Branch=' + $(this).val()
        });
    </script>

Answer 9

User1520731567 posted

Hi Baze72,

OK. Does this look correct? it is not redirecting at all: I know I still have a few clean up items but I would think it should still try to redirect.

View:

<p>

@Html.ActionLink("Create New", "Create")

<h4>
Branch: @Html.DropDownList("Branches", ViewBag.Branches as SelectList, "Select a Branch")
</h4>
<script>
$('#Branch').change(function(){
$.ajax({
url: "/Dept/Employees",
type: "POST",
dataType: "json",
data: { Branch: $('#Branches option:selected').val() },
success: function (data) {
$('#Branches').empty();
$.map(data, function (item) {
$('#Branches').append('<option value="' + item.xxx+ '">' + item.xxx+ '</option>');
})
}})

Controller:
public ViewResult Employees()
{
ViewBag.Branches = new SelectList(bCon.Branches, "ID", "Branch1");
var employees = from m in db.Employees
select m;
return View(employees.ToList());
}
[HttpPost]
public ViewResult Employees(string Branch)
{
ViewBag.Branches = new SelectList(bCon.Branches, "ID", "Branch1");
var employees = from m in db.Employees
where m.Branch == Branch || Branch == null || Branch == ""
select m;
return View(employees.ToList());
}

What is your error message?

404? Is your controller name Dept or Department？

And you could refer to return of the httppost action Employees ,ajax can't receive data from return View(employees.ToList());

As @mgebhard said,you could window.location to redirect:

window.location = '@Url.Action("someAction", "someController", new {Department = "someDepartment"})'

Actually, this is the easiest way,but you need to pay attention to syntax of Url.Action,first actionname and then controllername.

Best Regards.

Yuki Tao