CODEWITHSUNDEEP
c#htmlasp.net-mvcasp.net-mvc-4razor
tehlothi
tehlothi

Reputation: 93

How to pass back model to controller using razor dropdownlist

I have a DropDownListFor control that I am wanting to show a display value that resides in a property within a model/class (this is the Rule class.) The view's model is actually a collection of these model/classes. However, when I select the item from the DropDownList, I want to send back the entire model as a parameter. I have this working perfectly with the following code, but the Name property within the parameter is coming back as null. The other properties all have appropriate values.

View Code:

@model List<StockTrader.Web.Data.Rule>

@{
    ViewBag.Title = "Configure Rules";
}

<h2>@ViewBag.Title</h2>

<h4>Choose a rule to edit:</h4>
<form method="post" id="rulesform" action="SaveRules">

@Html.DropDownListFor(m => m.First().RuleID, new SelectList(Model.AsEnumerable(), "RuleID", "Name"))

<div style="margin-bottom: 15px;">
    <label>Value:</label><br />
    <input type="number" name="Value" style="margin-bottom: 15px;" /><br />
    <button>Save Value</button>
</div>

Controller Code:

public ActionResult SaveRules(Rule model)
{
    //do something
}

Rule Class:

public class Rule
{
    public int RuleID { get; set; }

    public string Name { get; set; }

    public int Value { get; set; }

    public bool IsDeleted { get; set; }
}

We do have Kendo controls, so if another control would be more appropriate, that is an option.

I would be glad to provide anymore code or information you might need.

Any thoughts or ideas?

EDIT:

So it turns out this is what I needed to do, the accepted answer got me to this point so I'm going to leave it checked.

View Code (w/script included):

@Html.DropDownListFor(m => m.First().RuleID, new SelectList(Model.AsEnumerable(), "RuleID", "Name"), new { id = "ruleid", @onchange = "CallChangefunc(this)" })
@Html.HiddenFor(m => m.First().Name, new { id = "rulename" })

function CallChangefunc(e) {
    var name = e.options[e.selectedIndex].text;
    $("#rulename").val(name);
}

Upvotes: 3

Views: 1371

Answers (2)

Amit
Amit

Reputation: 26266

it can be achieved by using UIHint

On your model class, on the RuleID property, add an annotation for UIHint. It basically lets you render a partial (cshtml) for the property. So, on the partial, you can have the template for generating the dropdwon with required styling. When Page is generated. Now you can use the same Html.DropDownListFor for RuleID and UI generates a dropdown for it.

This will avoid having additional jQuery code to get the dropdown value, and code is more concise and testable.

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

You will need a hidden field for it,and use dropdownlist on change event on client side to update hidden field:

@Html.DropDownListFor(m => m.First().RuleID, new SelectList(Model.AsEnumerable(), "RuleID", "Name"),new { id= "ruleid" })
@Html.HiddenFor(m=>m.First().Name,new { id="rulename" })

and jquery code:

$("#ruleid").change(function(){

  $("#rulename").val($(this).text());

});

Second option isif Rule collection is coming from database you can fetch RuleName by using id to by querying db in action.

Upvotes: 2

Related Questions