How can I bind a DropDownList to an Ajax form with both post and get support?

Question

I have a registration form for registering personal attributes. I am using both included Ajax.BeginForm function and also JSON to serialize the form. This form is updating the attributes and also showing the attributes if available in DB. So if a user enter the values and click the save button it is serializing the form and saving it into the db. When a user call the page; it is also using JSON to fill the form from DB if there is a available record if not just showing a blank form as usual.

Please find a part of the View below.

@using (Ajax.BeginForm(
    "savepeople", 
    "people", 
    FormMethod.Post, 
    new AjaxOptions { OnComplete = "savePicture" }, 
    new { id = "frPeople" }))
{
    @Html.ValidationSummary(true, "Problem during saving...")
      <fr>
    <h2>
        Personal Details</h2>
    <br />
        <legend>Person</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.People.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.People.Title)
            @Html.ValidationMessageFor(model => model.People.Title)
        </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.People.Description)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.People.Description)
        @Html.ValidationMessageFor(model => model.People.Description)
    </div>

        <p>
            <input id="saveMarker" type="submit" value="Save" />
        </p>
}

So I am using a model like:

namespace MyProject.Models
{
    public class Profile
    {
        public People People { get; set; }
// I am also referencing other models here...
    }

    public partial class People
    {
        public int PeopleId { get; set; }
        public Guid UserId { get; set; }

        public string Title { get; set; }
        public string Description { get; set; }
// It has other attributes also...
}

And controller has the classic post and get functions compatible with JSON to call and update the page.

My problem is: I am already able to handle these operations with TextBox's but I want to add a predefined DropDownList to use it for both saving/updating and also showing the values if it has a saved record in db.

Do you have any idea about how tho handle this issue?

score 1 · Accepted Answer · edited May 23 '17 at 10:34

This answer explains pretty good on how to use DropDownLists : Create a Dropdown List for MVC3 using Entity Framework (.edmx Model) & Razor Views && Insert A Database Record to Multiple Tables

If you need kind of dictionary data for the DropDownList you can either create a ViewModel that can contain your PeopleClass and the dictionary collection for the dropdown like :

public class EmployeeAddViewModel
{
    public People people { get; set; }
    public Dictionary<int, string> dropdownValues { get; set; }
}

or you can assign the collection to a ViewBag variable. Try reading the Q&A linked above and if you will stumble upon a particular issue, feel free to ask :)

How can I bind a DropDownList to an Ajax form with both post and get support?

1 Answers1