How do I choose to either store data from a dropdownlist of entries from another table, or manually input the data?

Question

Just to preface, I'm a complete noob and need all the help I can get.

I'm currently making a web application database that stores entries. It would store Staff and Role information. I'm using an EntityFramework with asp.net MVC setup. Below are my tables in the database

Staff
+--=-----+----------+
|  id    |  int     |
|  name  |  string  |
|  role  |  string  |
+--------+----------+

Role
+--=-----+----------+
|  id    |  int     |
|  name  |  string  |
+--------+----------+

When creating entries for Staff, for its role column, users will either have a choice of reading a dropdownlist of values populated by the Role table, or manually input the value for Role.

If users use values from the dropdownlist, the value's name (Role name) would be stored as the string in Staff role, rather than the id.

If users choose to manually input the value for the role column, then that value would automatically be added to the Role table after the Staff entry is created.

Visually, this is what I'm trying to do:

https://i.stack.imgur.com/GfATW.png

https://i.stack.imgur.com/xAiR0.png

This is what I have for my code in the Create.html file for Staff

    <div class="form-group">
        @Html.LabelFor(model => model.role, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("RoleList", null, htmlAttributes: new { @class = "form-control" })
            @Html.EditorFor(model => model.role, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.role, "", new { @class = "text-danger" })
        </div>
    </div>

It's missing things like the checkbox, but I'm stuck on how to input it in properly to do the functionality I'm looking for.

And here's my controller code for the creation part in Staff:

    // GET: Staff/Create
    public ActionResult Create()
    {
        ViewBag.RoleList = new SelectList(db.Roles, "roleid", "roleName");//
        return View();
    }

    // POST: Staff/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "staffid,staffName,org,role")] Staff staff)
    {
        if (ModelState.IsValid)
        {
            db.Staves.Add(staff);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.RoleList = new SelectList(db.Roles, "roleid", "roleName");//
        return View(staff);
    }

Thanks for any help! Let me know if you need more info.

Answer 1

You already do a code for use case add role from Dropdown or from textbox using Checkbox .

If checkbox checked then disable dropdown using jquery .

After submitting form , you need to pass checbox checked value also .

If value is checked then you need to insert a Role first then you need to insert a staff otherwise you need to insert only staff details.

Thanks .