Posting DropDownList Value to MVC Controller - post

Question

I'm trying to take information from a DropDownList and post the SelectListItem "Value" to another ActionResult method in the controller. The controller it will be passed to will take an integer value and use it in another query.
My controller method for populating the DropDownList is as follows:
public ActionResult SelectCategory()
{
var model = new TestTypesViewModel();
var query = (from ab in db.Tbl_Admin_Batch
from ub in db.Tbl_Admin_User_Batch
where ub.User_Id == 45875 && ab.Batch_Id == ub.Batch_Id
select ab).ToList();
model.Test_Types = query.Select(c => new SelectListItem
{
Text = c.Batch_Name,
Value = c.Batch_Id.ToString()
}).ToList();
return View(model);
My ViewModel for TestTypesViewModel is as follows:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace HFI_Assessment_Administration.ViewModels
{
public class TestTypesViewModel
{
public int Batch_ID { get; set; }
public string Test_Type { get; set; }
public IEnumerable<SelectListItem> Test_Types { get; set; }
}
}
I'm new to MVC and trying to keep things simple, I know Batch_ID and Test_Type haven't been specified, but I'm not sure if they are even necessary at this point.
Any advice or help would be greatly appreciated, many thanks!
EDIT:
I now have a View for SelectCategory as follows:
#model HFI_Assessment_Administration.ViewModels.TestTypesViewModel
#{
ViewBag.Title = "SelectCategory";
}
#using (Html.BeginForm("Practice", "WebFormUserList"))
{
#Html.DropDownListFor(x => x.Batch_ID, Model.Test_Types)
<input type="submit" />
}
The controller it is being passed to is as follows:
[HttpPost]
public ActionResult Practice(TestTypesViewModel model, int Parent_ID = 45875)
{
var query = (from u in db.Users
join ur in db.User_Relationship on u.User_ID equals ur.Child_ID
join ub in db.Tbl_Admin_User_Batch on u.User_ID equals ub.User_Id
join ut in db.User_Tests on u.User_ID equals ut.User_ID into ps
from ut in ps.DefaultIfEmpty()
join lu in db.Lookups on u.First_LanguageID equals lu.LookupID
where ur.Parent_ID == Parent_ID && ub.Batch_Id == model.Batch_ID
group new { u, lu, ut } by new
{
u.User_ID,
u.Forename,
u.Surname,
u.Client_Code,
u.User_Name,
u.Password,
u.Email,
u.Gender,
u.Report_date,
u.EmailDate,
u.Job_Function,
lu.LookupValue
} into g
select new UserViewModel
{
User_ID = g.Key.User_ID,
Forename = g.Key.Forename,
Surname = g.Key.Surname,
Client_Code = g.Key.Client_Code,
User_Name = g.Key.User_Name,
Password = g.Key.Password,
Email = g.Key.Email,
Gender = g.Key.Gender,
Report_Date = g.Key.Report_date,
Email_Date = g.Key.EmailDate,
Test_Count = g.Count(p => p.ut.Test_ID != null),
Test_Completed = g.Count(p => p.ut.Completed != null),
Job_Function = g.Key.Job_Function,
Lookup_Value = g.Key.LookupValue
}).ToList();
return View(query);
}
The View for Practice is as follows:
#model IEnumerable<HFI_Assessment_Administration.ViewModels.UserViewModel>
#{
ViewBag.Title = "ChildUsers";
}
<h2>Practice</h2>
<div>
#{
var grid = new WebGrid(Model);
}
#grid.GetHtml(
tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
columns: grid.Columns
(
grid.Column(columnName:"User_ID", header: "User ID", style: "text-align-center"),
grid.Column(columnName:"Forename", header: "Forename", style: "text-align-center"),
grid.Column(columnName:"Surname", header: "Surname", style: "text-align-center"),
grid.Column(columnName:"Client_Code", header: "Client Code", style: "text-align-center"),
grid.Column(columnName:"User_Name", header: "User Name", style: "text-align-center"),
grid.Column(columnName:"Password", header: "Password", style: "text-align-center"),
grid.Column(columnName:"Email", header: "Email", style: "text-align-center"),
grid.Column(columnName:"Gender", header: "Gender", style: "text-align-center"),
grid.Column(columnName:"Report_Date", header: "Report Date", style: "text-align-center"),
grid.Column(columnName:"Email_Date", header: "Email Date", style: "text-align-center"),
grid.Column(columnName:"Test_Count", header: "Count", style: "text-align-center"),
grid.Column(columnName:"Test_Completed", header: "Completed", style: "text-align-center"),
grid.Column(columnName:"Job_Function", header: "Job Function", style: "text-align-center"),
grid.Column(columnName:"Lookup_Value", header: "Language", style: "text-align-center")
)
)
</div>
Everything is fine until I try to go to the next page of the grid or try to sort the grid. Upon where I get the error, Server Error in "/" Application. The resource cannot be found.

Answer 1

There are many ways to achieve that. You could either use a standard <form> tag or use AJAX to send the value.
Let's see the first case:
#model TestTypesViewModel
#using (Html.BeginForm("SomeAction", "SomeController"))
{
#Html.DropDownListFor(x => x.Test_Type, Model.Test_Types)
<button type="submit">OK</button>
}
and now in your target action:
[HttpPost]
public ActionResult SomeAction(TestTypesViewModel model)
{
// model.Test_Type will contain the selected value here
// Notice that if you intend to return the same view as the GET action
// (SelectCategory.cshtml) you should assign the Test_Types property on
// your model by querying your database the same way you did in the GET action
// before passing this model to the view. If on the other hand you intend to
// redirect here you don't need to assign it.
}
A second possibility is to use AJAX. So you could for example give your dropdownlist an id and have some link that when clicked it will invoke the target controller action sending it the selected value using AJAX:
#Html.DropDownListFor(x => x.Test_Type, Model.Test_Types, new { id = "testTypeDdl" })
#Html.ActionLink("click me", "SomeAction", null, new { id = "myLink" })
and then when some button or link is clicked use the $.ajax request:
$(function() {
$('#myLink').click(function() {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
data: { selectedValue: $('#testTypeDdl').val() },
success: function(result) {
alert('The value was submitted to the server');
}
});
return false;
});
});
and now your controller action could have the following signature:
public ActionResult SomeAction(string selectedValue)
{
// Process the selected value here and return some result.
// This result could either be a PartialView or a JsonResult
// depending on your requirements.
}