Kendo DropDown filter and show in GridView

Question

I have filter with dropdown cities. I wanna that when I choose city from dropdown lis and click button search to show data in gridview with this city.

First question

1) How to get value from dropdown and pass to button and call controller?

2) I tried without dropdown, when populate value directly in Read method but nothing, my gridview is empty.

This is my code

Partial View "Filter", View with gridview and method in controller that populate gridview.

@{
    ViewBag.Title = "Filter";    
}
<div class="filter-all">
    <div class="filter-dropdown">
  <div class="filter-part">
            <div class="custom-label-div">
                City:</div>
            <div class="defaultSize">
                @(Html.Kendo().DropDownList()
  .Name("City")
  .HtmlAttributes(new { style = "width:250px" })
  .DataTextField("CityName")
  .DataValueField("CityID")
  .OptionLabel("...")
  .DataSource(source =>
  {
      source.Read(read =>
      {
          read.Action("GetCities", "Filter");
      });
  })
   )
            </div>
        </div>
    </div>
    <div class="filter-buttons">
        <div class="button-filter-div">
            <input type="button" value="Search City" onclick="location.href='@Url.Action("Index", "MFS3")'" class="k-button" style="width: 80px"/>
            <input type="button" value="Cancel" onclick="location.href='@Url.Action("Index", "Preview")'" class="k-button" style="width: 80px"/>
        </div>
    </div>
</div>


@model IEnumerable<MFS_App.Models.MFS3ViewModel>
<div class="right-content shadow">
    <div class="preview-header">
        Preview Reports</div>
    <div class="preview-content">
        @Html.Partial("_Filter")
    </div>
</div>
<div class="parent-preview-content shadow">
    <div class="child-preview-content">
        @Html.Partial("_ReportsGridView")
        <div class="mfs-title">
        <div class="filter-preview-div">
            @(Html.Kendo().Grid(Model)
    .Name("GridMFS3")
            .Columns(columns =>
            {
                columns.Bound(p => p.FirstName).HtmlAttributes(new { style="width:50px"});
                columns.Bound(p => p.LastName).HtmlAttributes(new { style ="width:70px"});
                columns.Bound(p => p.Address).HtmlAttributes(new { style = "width:80px"});
                columns.Bound(p => p.Mail).HtmlAttributes(new { style = "width:100px" });
                columns.Bound(p => p.County).HtmlAttributes(new { style = "width:70px" });
                columns.Bound(p => p.City).HtmlAttributes(new { style = "width:50px" });                columns.Command(c => c.Edit());
            })
    .DataSource(source => 
    {
        source.Server()

              .Model(model => model.Id(m => m.MFS3_ID))
              .Read(read => read.Action("GetMFS", "MFS3", new { cityID = 251} )) 
              .Update(update => update.Action("Update", "MFS3"));
    })

    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    .Pageable()
    .Resizable(resize => resize.Columns(true))
    .HtmlAttributes(new { style = "width: 1850px" })
)

  private IEnumerable<MFS3ViewModel> GetMFS3(int cityID)
        {
            return HelperClass.dbUp.TBL_MFS_MFS3_Input.Select(p => new MFS3ViewModel
            {
                CITYID = p.CITIYID,
                MFS3_ID = p.MFS3_ID,
                FirstName = p. FirstName,
                LastName = p. LastName,
                p.Address = p. p.Address,
                .Mail = p. .Mail,
                County = p. County,
                City = p. City,
            }).Where(p => p.CITYID == cityID);
        }

Answer 1

I resolved this via jQuery and added parameter in my Index method

$('#btnSearch').click(function () {
        var cityID = $("#City").data("kendoDropDownList").value();
        document.location = "/MFS3/Index?cityId=" + cityID;
    });


  public ActionResult Index(int cityId)
        {
            return View(GetMFS3(cityId)); 
        }