MVC jQuery take value from dropdownlist

Question

I am pretty new to programing and so far I got great help for my project from the questions and the answers of other members here on stackoverflow, but i stumbled across this problem and I dont know how to solve it so any help is welcome :)

I have this droddownlist that populates from a jQuery:

@Html.DropDownListFor(Model => Model.labs,
       new SelectList(
          Enumerable.Empty<SelectListItem>(), 
          "labsn", 
          "labdescr"),
          "Choose Lab", 
          new { id = "ddllab" })

I want to create a button (or an html.actionlink) that will take the selected value labsn and redirect me to another page where I will be creating a new table (a labclasses table) where the labsn is FK so I want the labsn field to be auto filled with the selected value from the previous page

and also I want another button that will delete the lab table with the labsn that is selected and any labclasses with that labsn as FK.

The pages ActionResult that I want to be redirect to:

public ActionResult Create_LabClasses()
{
    return View();
}

Thank you all for your time.

Answer 1

I assume that you have a link in your view with labsn dropdown. Then you can use a little of jquery to change the href of your link.

1) Define your link to redirect to another action that accepts labsn

<a href="#" id="labsnAnchor">Go</a>

2) Hook up to the dropdown list change event in jquery and in the handler change href according to the selected value. This javascript has to be embedded in the view because it uses @Url.Action helper.

$('#ddllab').onchange(function(){
   val selectedValue = $(this).val();
   var link = $('#labsnAnchor');
   link.attr('href', '@Url.Action("LabInfo", "YourController")' + '?labsn=' + selectedValue );
});

3) Create an action in your controller that will accept labsn.

public ActionResult LabInfo(int labsn)
{ 
 ...
}

EDIT

If you want a delete functionality then I would recommend to use a FORM and a Post action on the server side.

1) You can create a form in your view with a hidden value that will contain labsn and a submit button

@using(Html.BeginForm('DeleteLab', 'YourController')
{
  <input type="hidden" value="LabsnToDelete"/>
  <input type="submit" value="Delete"/>
}

2) Modify the hidden value using same javascript as for the anchor

 $('#ddllab').onchange(function(){
   val selectedValue = $(this).val();
   var link = $('#labsnAnchor');
   link.attr('href', '@Url.Action("LabInfo", "YourController")' + '?labsn=' + selectedValue     );
   $('#LabsnToDelete').val(selectedValue); // just add this line to set LabsnToDelete value
});

3) And create a controller action that will accept post requests to delete labs

public ActionResult DeleteLab(int labsnToDelete)
{
    ...
}