Passing a DropDown string from a View to a Controller method

Question

My question is a two part question.

1) I am trying to pass a string from my Index view into a method (UpdateView(string selectProductionLine)) via an ajax call. I can get the ajax call to call the method but I am unable to get the string to be anything but null.

2) After this method (UpdateView(string selectProductionLine)) is called, I want it to update the model and then call a partial view with that updated method. Currently I cannot get it to call that partial view.

I have been looking at several different attempts at this, links below, and have been unable to get this to work. My JS is not all that great, I am still a beginner, and I am having trouble combining what others have done.

Index View:

@(Html.Kendo().DropDownList()
      .Name("productionLine-dropdown")
      .DataTextField("Name")
      .DataValueField("Id")
      .DataSource(source =>
      {
           source.Read(read => { read.Action("GetDropDownList", "Home"); });
      })
      .Events(e =>
      {
           e.Close("OnClose");
      })
)
<div id="Dashboard">
@Html.Partial("~/Views/Home/_Home.cshtml", Model)
</div>

Java Script:

function OnClose() {
    var selectProductionLine = $("#productionLine-dropdown").data("kendoDropDownList").value();
    $("#Dashboard").load('/Home/UpdateView', selectProductionLine);
}

function DropDownValue() {
    var value = $("#productionLine-dropdown").data("kendoDropDownList").value();
    return { selectProductionLine: value };
}

Controller:

public ActionResult _Home(DisplayViewModel dvm)
{
    return PartialView(dvm);
}

public ActionResult UpdateView(string selectProductionLine)
{
    DisplayViewModel dvm = new DisplayViewModel();
    //Some logic
    return PartialView("~/Home/_Home.cshtml", dvm);
}

Questions:

1) Pass a string from the Index into the UpdateView() method.

2) Call the _Home partial view from the UpdateView() with the new ViewModel.

Thanks!

Updating PartialView mvc 4

Refreshing MVC PartialView with new Model on DropDownList Change

Passing a List/model from a View to a controller

https://cmatskas.com/update-an-mvc-partial-view-with-ajax/

Answer 1

Ok there is two issues here.

Javascript

First, change your .Load method to simply concatenate the selecProductionLine value to the end of the URL as such.

var selectProductionLine = $("#productionLine-dropdown").data("kendoDropDownList").value();
$("#Dashboard").load("/Home/UpdateView/" + selectProductionLine);

Controller Action

Second, you will need to change the UpdateView function to take in Id like so.

public ActionResult UpdateView(string Id)
{
    DisplayViewModel dvm = new DisplayViewModel();
    ProductionLine pl = _productionLineService.Find(Id);
    dvm.ProdLine = new ProductionLineViewModel
    {
        Id = pl.Id,
        CreatedAt = pl.CreatedAt,
        Name = pl.Name,
        ActiveLine = pl.ActiveLine,
        ComputerName = pl.ComputerName,
        UPE = pl.UPE
   };
   return PartialView("~/Home/_Home.cshtml", dvm);
}

This is because the default route in RouteConfig.cs uses {controller}/{action}/{id} as the default routing for any requests.

RouteConfig

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}