Changing drop-down-list population into buttons instead

Question

I've managed to populate an MVC Razor with drop-down-lists, but I cannot seem to figure out how to use buttons instead of a drop-down-list have buttons act the same way for each Section that is distinct. Is there a way that I can auto populate the web grid from the click of a button on Section which is a subset of PlantLoction? I need the name of each button according to Section and to show only that Section information based on PlantLocation. The Drop Down Lists work fine with getting the info, but need to make buttons instead of a drop down list for each section based on Plant Location. I'm stuck and need to make drop down functionality on lists into buttons instead.

 [CODE]

@model YardDog.Model.YardDogModel
@{
Layout = null;
ViewBag.Title = "Yard Dog";
WebGrid webGrid = new WebGrid(source: Model.LocationDatas, canPage: 
true, canSort: true, sortDirectionFieldName: "Section", rowsPerPage: 50);
webGrid.Pager(WebGridPagerModes.All);
}

  @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "formYardDog" }))
            {
                for (int i = 0; i < Model.Section.Count; i++)
                {
                    //@Html.TextBoxFor(model => model.Section, "Section", new { onchange = 
     "document.forms[0].submit();", @id = "ddlSection", @class = "ddlSection" }) @:Item
                    //@Html.TextBoxFor(model => model.Section, new { onchange = 
     "document.forms[0].submit();", @id = "ddlSection", @class = "ddlSection", placeholder = 
       @Html.DisplayNameFor(model => model.Section)})
        <button type="submit" value=model.Section onchange = "document.forms[0].submit();"> 
     @Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("Section")</button>
                   
                }
                <br /><br /><br />
                @Html.DropDownListFor(model => model.Section, Model.Section, "Section", new { 
     onchange = "document.forms[0].submit();", @id = "ddlSection", @class = "ddlSection" })
                @Html.DropDownListFor(model => model.PlantLocation, Model.PlantLocation, 
        "PlantLocation", new { onchange = "document.forms[0].submit();",
        @id = "ddlWarehouses", @class = "ddlWarehouses" })
            }
            <br /> <br />
            @using (Html.BeginForm("Index", "Home", FormMethod.Post))
            {
                <!-- Create a New Row for Admin only, LocationID autopopulated. -->
                <!--<input id="Input_LocationID" class="NewRow" type="text" 
       placeholder="LocationID" disabled="disabled" /> -->
                <label id="AddNewRow_Lbl" class="AddNewRow_Lbl">Add New Row: </label>
                @Html.TextBoxFor(model => model.Input_Location, new { id = "Input_Location", 
         Class = "NewRow", placeholder = "Location" })
                @Html.TextBoxFor(model => model.Input_Section, new { id = "Input_Section", 
        Class = "NewRow", placeholder = "Section" })
                @Html.TextBoxFor(model => model.Input_TrailerNumber, new { id = 
       "Input_TrailerNumber", Class = "NewRow", placeholder = "TrailerNumber" })
                @Html.TextBoxFor(model => model.Input_CarrierName, new { id = 
        "Input_CarrierName", Class = "NewRow", placeholder = "CarrierName" })
                @Html.TextBoxFor(model => model.Input_CommodityLoadStatus, new { id = 
          "Input_CommodityLoadStatus", Class = "NewRow", 
           placeholder = "CommodityLoadStatus" })
                @Html.TextBoxFor(model => model.Input_PlantLocation, new { id = 
        "Input_PlantLocation", Class = "NewRow", placeholder = "PlantLocation" })
                <button id="NewRowSubmitButton" type="submit" 
          OnClick="NewRowSubmitButton_Click()">Submit</button>

            }
            <hr />
            @webGrid.GetHtml(tableStyle: "webgrid-table",
     headerStyle: "webgrid-header",
     footerStyle: "webgrid-footer",
     alternatingRowStyle: "webgrid-alternating-row",
     selectedRowStyle: "webgrid-selected-row",
     rowStyle: "webgrid-row-style",
     mode: WebGridPagerModes.All,
     htmlAttributes: new { @id = "webGrid" },
     columns: webGrid.Columns(
     webGrid.Column(header: "LocationID", format: @<span 
     class="label">@item.LocationID</span>, style: "LocationID"),

     webGrid.Column(header: "Location", format: @<span>
            <span class="label">@item.Location</span>
            <input id="Location" class="inputEditData" type="text" value="@item.Location" 
     style="display:none" placeholder="Location" />
        </span>, style: "Location"),

     webGrid.Column(header: "Section", format: @<span>
            <span class="label">@item.Section</span>
            <input id="Section" class="inputEditData" type="text" value="@item.Section" 
       style="display:none" placeholder="Section" />
        </span>, style: "Section"),

        webGrid.Column(header: "TrailerNumber", format: @<span>
            <span class="label">@item.TrailerNumber</span>
            <input id="TrailerNumber" class="inputEditData" type="text" 
       value="@item.TrailerNumber" style="display:none" placeholder="TrailerNumber" />
        </span>, style: "TrailerNumber"),

       webGrid.Column(header: "CarrierName", format: @<span>
            <span class="label">@item.CarrierName</span>
            <input id="CarrierName" class="inputEditData" type="text" 
        value="@item.CarrierName" style="display:none" placeholder="CarrierName" />
        </span>, style: "CarrierName"),

       webGrid.Column(header: "LoadCommodityStatus", format: @<span>
            <span class="label">@item.LoadCommodityStatus</span>
            <input id="LoadCommodityStatus" class="inputEditData" type="text" 
   value="@item.LoadCommodityStatus" style="display:none" placeholder="LoadCommodityStatus" />
        </span>, style: "LoadCommodityStatus"),

    webGrid.Column(header: "DateLoaded", format: @<span class="label">@item.DateLoaded</span>, 
       style: "DateLoaded"),

       webGrid.Column(header: "PlantLocation", format: @<span>
            <span class="label">@item.PlantLocation</span>
            <input id="PlantLocation" class="inputEditData" type="text" 
         value="@item.PlantLocation" style="display:none" placeholder="PlantLocation" />
        </span>, style: "PlantLocation"),

        webGrid.Column(header: "Actions", format:@<span class="link">
            <a class="Edit" href="javascript:;">Edit</a>
            <a class="Clear" href="javascript:;">Clear</a>
            <a class="Update" href="javascript:;" style="display:none">Update</a>
            <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>


        </span>)))
     //===================================//
     //Model: 
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;
 using ClassLibraryQualityBI.DAL;
 using ClassLibraryQualityBI.Container;
 using System.ComponentModel.DataAnnotations;

   namespace YardDog.Model
{

public class YardDogModel
{
    ContYardDogAdmin ContYardDogData = new ContYardDogAdmin();
    //Two Properties for DropDownList.
    public List<LocationData> LocationDatas { get; set; }
    public List<LocationData> LocationDatasSection { get; set; }
    public List<SelectListItem> PlantLocation { get; set; }
    public List<SelectListItem> Section { get; set; }
    public List<SelectListItem> ListDuplicates { get; set; }


    //Allow the data to be transfered (Backend into SQL Server).
    [Required]
    public string Input_Location { get; set; }

    [Required]
    public string Input_Section { get; set; }
    
    public string Input_TrailerNumber { get; set; }
    
    public string Input_CarrierName { get; set; }
    public string Input_CommodityLoadStatus { get; set; }

    [Required]
    public string Input_PlantLocation { get; set; }
    //YardDogModel YardDogDatas = new YardDogModel();
    //string TrailerNumber = Input_TrailerNumber;

      }
    }
     
     //===================================//
      //C Sharp Code: HomeController

    // GET: Home
    public ActionResult Index()
    {
        YardDogModel model = PopulateModel(null, null);

        return View(model);
    }
    //Controls DropDownList PlantLocation/Section Selection.
    [HttpPost]
    public ActionResult Index(string plantLocation, string section)
    {
        YardDogModel model = PopulateModel(plantLocation, section);

        return View(model);
    }

    //Population Controller. References list selection.
    public static YardDogModel PopulateModel(string country, string city)
    {
        using (PW_YardDogDataEntitiesModel3 entities = new PW_YardDogDataEntitiesModel3())
        {
            YardDogModel model = new YardDogModel()
            {
                LocationDatas = (from c in entities.LocationDatas
                                 where c.PlantLocation == country && c.Section == city && 
   c.Section == c.Section && c.PlantLocation == country || string.IsNullOrEmpty(country) || 
   string.IsNullOrEmpty(city) && c.PlantLocation == country
                                 select c).ToList(),

                Section = (from c in entities.LocationDatas
                           where !string.IsNullOrEmpty(c.Section) && c.Section != null && 
  country == c.PlantLocation
                           select new SelectListItem { Text = c.Section, Value = c.Section 
  }).Distinct().ToList(),

                PlantLocation = (from c in entities.LocationDatas
                                 where (c.PlantLocation == c.PlantLocation)
                                 select new SelectListItem { Text = c.PlantLocation, Value = 
  c.PlantLocation }).Distinct().ToList()
            };
            return model;
        }
    }

    [/CODE]

Update: Populated buttons with values using a for loop.

     [CODE]
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "formYardDog" }))
            {
               //Loop to Get Dictionary List Buttons with Distinct Section Values. 
                for (int i = 0; i < Model.Section.Count; i++)
                {
                   <input type="submit" value= @Model.Section[i].Value id="ddlSectionButtons", new { onchange = "document.forms[0].submit();" class = "ddlSection" }/>
                }

                <!--Populates All Sections Button-->
                <button value="PopulateModel(model => model.Section.ToList());" type="submit" onchange="document.forms[0].submit();"> @Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("All")</button>
                <br /><br /><br />
                @Html.DropDownListFor(model => model.Section, Model.Section, "Section", new { onchange = "document.forms[0].submit();", @id = "ddlSection", @class = "ddlSection" })
                @Html.DropDownListFor(model => model.PlantLocation, Model.PlantLocation, "PlantLocation", new { onchange = "document.forms[0].submit();", @id = "ddlWarehouses", @class = "ddlWarehouses" })
            }

     [/CODE]

Update 2: Was able to get the Section values in the webGrid that are Distinct for each button in the Razor HTML Index Page. Now, just need to figure out the "All" button with populating the webGrid with all the Section Values for PlantLocation...

      [CODE]
            @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "formYardDog" }))
            {
                //Loop to Get Dictionary List Buttons with Distinct Section Values. 
                for (int i = 0; i < Model.Section.Count; i++)
                {
                   <input type="submit" name="@Html.NameFor(model=>model.Section)" value= @Model.Section[i].Value id="ddlSectionButtons", new { onclick = "document.forms[0].submit();" class = "ddlSectionButtons" }/>
                }

                <!--Populates All Sections Button-->
                <input value="All" type="submit" name="@Html.NameFor(model=>model.Section.ToList())" onchange="document.forms[0].submit();"/>
                <br /><br /><br />
                @Html.DropDownListFor(model => model.Section, Model.Section, "Section", new { onchange = "document.forms[0].submit();", @id = "ddlSection", @class = "ddlSection" })
                @Html.DropDownListFor(model => model.PlantLocation, Model.PlantLocation, "PlantLocation", new { onchange = "document.forms[0].submit();", @id = "ddlWarehouses", @class = "ddlWarehouses" })
            }
      [/CODE]

Answer 1

This is what I did. But now I just need to know how to apply css to each button when in focus (selected}.

View:

                @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "formYardDog" }))
            {
                //Loop to Get Dictionary List Buttons with Distinct Section Values.
                for (int i = 0; i < Model.Section.Count; i++)
                {

                    <input type="submit" name="@Html.NameFor(model => model.Section)" [email protected][i].Value id="ddlSectionButtons" , new { onclick="document.forms[0].submit();" class="ddlSectionButtons" onClick="focusMe(this);" } />

                }
                <!-- All Sections Button for PlantLocation -->
                <button text="All" value=" " type="submit" name="@Html.NameFor(model => model.Section)" , new { onclick="document.forms[0].submit();" onClick="focusMe(this);" id="ddlSectionAllButton" class="ddlSectionButtons" placeholder="All" hidden="hidden" })>All</button>

                <!-- No need for Second Section Drop-Down Box -->
                //Html.LabelFor(model => model.Section, "All", new { onchange = "document.forms[0].submit();", id = "ddlSectionAllButtonLbl", Class ="ddlSectionButtons", placeholder = "All" })


                //Testing button selection (Below):
                //@Html.TextBoxFor(model=>model.Section, new { Class = "name", placeholder="All", type="submit", value=" " })

            }
 <script>
  $("body").on("click", ".ddlSectionButtons", function () {

   $('#formYardDog')[0].submit().is(this).children('.ddlSectionButtons').focus();

 });
  </script>