How do I allow missing dropdown list items to be added to a database without leaving the page in my MVC application?

Question

It's something I've wondered about for some time now and it's easier in other frameworks I know. I have made an MVC5 web application using razor views and KendoUI with a generic repository for database access.

On the create a form of one of the entities I have there are some KendoUI drop-down list widgets i.e.

@(Html.Kendo().DropDownList()
  .Name("Manager")
  .Filter("contains")
  .DataTextField("ManagerName")
  .DataValueField("ManagerName")
  .DataSource(source =>
  {
      source.Read(read =>
      {
          read.Action("GetData", "Data");
      }).ServerFiltering(false);
  }))

This, very simply, grabs its data from the Datacontroller GetData method as JSON. There is no guarantee that all the Managers our users require will be in this list and so, to make life easier, I want to have a link that brings up a modal or something like that and allows them to add the missing Manager if they can't find it in the list but without leaving the Create view.

What is the best way to do this? Should I be looking at Asynchronous controllers top achieve this? Are there any examples that people know of?

Note: My Create form is in an Ajax format.

score 0 · Answer 1 · answered Apr 23 '18 at 13:37

You have to create a common action in a common controller. You're confusing async controllers, they are not for what you want. To see what MVC async controllers are about, check this.

You will need to just post common AJAX a request with the new item to be created and, after a successfull result, you add the newly created item in your dropdown list.

JS Code:

$("#ddl").kendoDropDownList({
    dataSource: {
        data: [{ Id: 1, Name: "John Doe"}, { Id: 1, Name: "Jane Doe"}]
    },
    dataValueField: "Id",
    dataTextField: "Name"
});

$("#add").on("click", function() {
    wnd.center().open();
});

let wnd = $("#wnd-container").kendoWindow({
    title: "Add Item",
    modal: true,
    visible: false
}).data("kendoWindow");

$("#add-item").on("click", function() {
    // Pretend this is a legit post request where your new item's data 
    // will be sent to the MVC action to be added on database.
    $.ajax({
        url: "https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js",
        success: function() {
            let ddl = $("#ddl").data("kendoDropDownList");

            ddl.dataSource.add({
                Id: 999,
                Name: $("#item-text").val()
            });

            wnd.close();

            ddl.select($(ddl.items()).last());
        }
    });
});

HTML Code:

<input id="ddl">
<button type="button" id="add">Add Item</button>
<div id="wnd-container">
    Item Text: <input id="item-text"><br>
    <button id="add-item" type="button">Add Item</button>
</div>

Demo

How do I allow missing dropdown list items to be added to a database without leaving the page in my MVC application?

1 Answers1