Passing Value from Kendo DDL to ActionLink/ActionImage without submitting values

Question

VS'12 KendoUI InternetApplication Template C# asp.net EF Code First

I got 2 dropdownlist pages 1 page uses the DropDownList For Posting values to a ModelView the other is just returning by ID.

Qeustion

Basically i want to stay in the view with a DDL that a user can select from. Left of this DDL there is a Actionlink that should be able to go to a new ACtion with the selected parameter. But my model values are always null. How does one pass this value?

DropDownList

                <label for="Prospects">Prospect:</label>
                @(Html.Kendo().DropDownListFor(m=>m.Prospects)
                      //.Name("clients")
                      .HtmlAttributes(new { style = "width:300px"}) //, id = "clients"})
                      .OptionLabel("Select Prospect...")
                      .DataTextField("ProspectName")
                      .DataValueField("ProspectID")
                      .DataSource(source => {
                           source.Read(read => {
                               read.Action("GetCascadeProspects", "AddCCCTRST");
                           });
                      })
                  )

ActionLink

@Html.ActionImage("ADD", "Prospect", new { id=Model.Prospects.FirstOrDefault() } , "~/Images/Navigation/Add.PNG", "Add")

..., new { id=Model.Prospects.FirstOrDefault() } ,...,...) 
// the Model is null here, how can i pass my value to this actionlink / actionimage?

(The ActionImage is from This Post) if the code needs posted here please advise. (the custom ActionImage is working i just can't pass the value.... )

UPDATES Model

public class ViewModelCCTRST
{
    public string Clients { get; set; }
    public IEnumerable<dbClient> AvailableClients { get; set; }
    public string Prospects { get; set; }
    public IEnumerable<dbProspect> AvailableProspects { get; set; }
    public string Countys { get; set; }
    public IEnumerable<dbCounty> AvailableCounties { get; set; }
    public string TownShips { get; set; }
    public IEnumerable<dbTownShip> AvailableTownShip { get; set; }
    public string Ranges { get; set; }
    public IEnumerable<dbRange> AvailableRanges { get; set; }
    public string Sections { get; set; }
    public IEnumerable<dbSection> AvailableSection { get; set; }
    public string Tracts { get; set; }
    public IEnumerable<dbTract> AvailableTracts { get; set; }
}

Controller *A JsonResult GET Method and Post Request

    public JsonResult GetCascadeTracts(int sections)
    {
        var tract = db.Tracts.AsQueryable();

        if (0 != sections)
        {
            tract = tract.Where(o => o.SectionID == sections);
        }

        return Json(tract.Select(o => new { TractID = o.TractID, TractName = o.TractNumber }),    JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult Index(ViewModelCCTRST model)
    {

        if (ModelState.IsValid)
        {

            //string clt = model.Clients;
            string pro = model.Prospects;
            string cnt = model.Countys;
            string twn = model.TownShips;
            string rng = model.Ranges;
            string sct = model.Sections;
            string trt = model.Tracts;

            return Content(cnt + twn + rng + sct + trt);
        }
        else
        {
            return Content("");
        }
    }

**As Discussed below i do have values in my Post method, but i do not have any values in my View(This is where i want to be able to have values to use my Actionlinks w/o refreshing the page) also, If I tie the Model.(w/e the data is) into the action links they give me a null reference.

Paritosh · Answer 1 · 2013-09-05T12:51:57.180

1

You can use kendo template for this. Reference: Kendo DropDownList / Customizing templates

@(Html.Kendo().DropDownList()
      .Name("customers")
      .HtmlAttributes(new { style = "width: 400px" })
      .DataTextField("ContactName")
      .DataValueField("CustomerID")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetCustomers", "Home");
          });
      })
      .Height(300)
      .Template("<img src=\"" + Url.Content("~/Content/web/Customers/") +  "${data.CustomerID}.jpg\" alt=\"${data.CustomerID}\" />" +
                        "<dl>" +
                            "<dt>Contact:</dt><dd>${ data.ContactName }</dd>" +
                            "<dt>Company:</dt><dd>${ data.CompanyName }</dd>" +
                        "</dl>")
)

UPDATE

You are getting null value because you haven't assign Name to your kendo control. Without doing this, the control value will not be bind to your model.

@(Html.Kendo().DropDownListFor(m=>m.Prospects)
                  .Name("Prospects")         // assign appropriate name
                  .HtmlAttributes(new { style = "width:300px"}) //, id = "clients"})
                  .OptionLabel("Select Prospect...")
                  .DataTextField("ProspectName")
                  .DataValueField("ProspectID")
                  .DataSource(source => {
                       source.Read(read => {
                           read.Action("GetCascadeProspects", "AddCCCTRST");
                       });
                  })
              )

edited Sep 05 '13 at 12:51

answered Aug 28 '13 at 19:14

Paritosh

11,144
5
56
74

`Error 1 The best overloaded method match for 'Kendo.Mvc.UI.Fluent.DropDownListBuilderBase.Template(string)' has some invalid argument` **and** `Error 2 Argument 1: cannot convert from 'System.Web.Mvc.MvcHtmlString' to 'string' ` when running 2nd sample of your answer. – Don Thomas Boyle Aug 28 '13 at 19:55
I think the error you are facing is because there is no string for template in the argument of `Template`. You have to pass the data as argument for `Add` action method. I don't know what is your logic, but I can tell you, that the error you are facing is `@Url.Action(\"Add\", new { id = Model.Prospects.FirstOrDefault()})` due to this. Refer to the link I have provided for Kendo, it will definitely help you.. – Paritosh Aug 29 '13 at 04:12
I think we are miscomunicating, I'm strying to figure out why in `@Url.Action(\"Add\", new { id = Model.Prospects.FirstOrDefault()}` this part `new { id = Model.Prospects.FirstOrDefault()` isn't holding a value. This is how i'm accessing the data from my controller after a submit so maybe its not there because no submit? - in that case the qeustion is still there , how to get the selected value from the DDL to my actionlink. Values are `[Null]` – Don Thomas Boyle Sep 04 '13 at 20:08
@DonThomasBoyle: Please share the code for controller ActionMethod. What you are expecting to pass. Also, show the Model class, so that I can get idea about it.. – Paritosh Sep 05 '13 at 05:49
are you wanting the full controller? ill post just one of the Get and the Post for now let me know if this suffices – Don Thomas Boyle Sep 05 '13 at 12:32
1

@DonThomasBoyle: i have updated the answer. You need to assign `Name` property properly... See this: [how to pass the ID of the kendo Ui dropdown selected value onto the controller?](http://stackoverflow.com/questions/12054298/how-to-pass-the-id-of-the-kendo-ui-dropdown-selected-value-onto-the-controller) – Paritosh Sep 05 '13 at 12:52
i was under the assumption that when using the `For` Keyword as in `DropDownListFor` the name is handled automatically. - i Will change and test asap!! – Don Thomas Boyle Sep 05 '13 at 13:07
the template your giving me is great if I wanted to have more data in my DropDowns, this is however NOT what i am trying to accomplish. Is there a way for me to use `.Template(@Html.ActionImage("ADD", "Prospect", new { id="editLink_Prospect" } , "~/Images/Navigation/Add.PNG", "Add"))` or somehow get the id from the DDL into the standalone ActionLink? – Don Thomas Boyle Sep 05 '13 at 13:34
After the last update i attempted i was hoping to see change by using `id="${data.ProspectID}" ` in my actionlink, but it returns itself as a string not a Script Function. – Don Thomas Boyle Sep 05 '13 at 13:37
Not wasting points, though i cam up with my own solution i think this was very helpful, therefor you get the bounty , before it expires, thanks for all you attempts and help, ill be using template in the future. – Don Thomas Boyle Sep 11 '13 at 20:37

score 1 · Accepted Answer · edited May 23 '17 at 12:05

add id to Actionlink

@Html.ActionLink("Add", "Create", new { controller = "Client"}, new {id="AddClient"})

add to catch onclick events

 $('#AddClient').click(function (e) {
    var val = $("#Clients").val();
    var href = "/Client/Create/" + val;
    this.href = ""; //clears out old href for reuse
    this.href = href; //changes href value to currently slected dropdown value
});

srcs

Passing Value from Kendo DDL to ActionLink/ActionImage without submitting values

2 Answers2