CODEWITHSUNDEEP
jqueryajaxasp.net-mvc-5
JQuery
JQuery

Reputation: 905

Passing selected DropDownListFor value to Ajax

Have a form where values are being passed into an Ajax script and then to the controller. All manual entry ones work but anything in a dropdownlist doesn't seem to be passed back.

So for example:

<div style="display: table-row;">
    <div class="div-dd-label-text" , style="display: table-cell">
         @Html.LabelFor(model => model.Title)
    </div>
    <div class="div-dropdown-menu" , style="display: table-cell">
        @Html.DropDownListFor(model => model.Title, (SelectList)ViewBag.NameTitle, "Please select a title", new { htmlAttributes = new { @class = "dropdown", id = "txtTitle" } })
    </div>
    <div class="div-val-cell" , style="display: table-cell">
        @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
    </div>
    <div class="div-label-text" , style="display: table-cell">
        @Html.LabelFor(model => model.Initials)
    </div>
    <div class="div-EditorFor" , style="display: table-cell">
        @Html.EditorFor(model => model.Initials, new { htmlAttributes = new { @class = "div-form-control", id = "txtInitials" } })
    </div>
    <div class="div-val-cell" , style="display: table-cell">
        @Html.ValidationMessageFor(model => model.Initials, "", new { @class = "text-danger" })
    </div>
</div>

the drop down list returns a list of titles:

and I capture them here when the user submits the form:

<script>
    var urlAction = "@Url.Content("~/Treeview/_NewEmpDetails")";
    function AjaxGoodRedirect(urlAction) {
        console.log(urlAction);
        var form = $("#myForm");
        form.validate();
        if (form.valid()) {
            $.ajax({
                type: "POST",
                url: urlAction,
                data: JSON.stringify({
                    Title: $("#txtTitle").val()
                    , Initials: $("#txtInitials").val()

That then hits this:

[HttpPost]
public ActionResult _NewEmpDetails(NewEmp.First model)
{
    if (ModelState.IsValid)
    {
        var sessionValues = new MySessionValues();
        sessionValues.Employee = model;
        Session["MySessionValues"] = sessionValues;
    }
    return Json(new { ok = true, newurl = ("/Treeview/_NewEmpSecond") }, "application/json", JsonRequestBehavior.DenyGet);  
}

Redirects to the next form

public ActionResult _NewEmpSecond()
{
    var sessionValues = Session["MySessionValues"] as MySessionValues;
    ViewBag.NameTitle = sessionValues.Employee.Title;
    ViewBag.Initials = sessionValues.Employee.Initials;       
    return PartialView();
}

Currently I set the ViewBag properties to be the values for debugging and while the initials has a value when entered the nameTitle doesn't and I can't work out why

I have this in the next form to display the values for now:

<div> Value check for Title: @ViewBag.NameTitle </div>
<div> Value check for Initials: @ViewBag.Initials </div>

Can anyone see where I have gone wrong?

Upvotes: 0

Views: 90

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239430

You're passing an anonymous object composed of htmlAttributes to DropDownListFor. That's only for adding additional attributes when using EditorFor. For something like DropDownListFor, you just pass the anonymous object with the attributes:

@Html.DropDownListFor(model => model.Title, (SelectList)ViewBag.NameTitle, "Please select a title", new { @class = "dropdown", id = "txtTitle" })

As you have it now, the id is never being set on the select element, so the value isn't being selected by your JavaScript.

Upvotes: 1

Related Questions