How to refresh the view in asp.net core mvc after saving data using modal form?

Question

I have two tables say item and category. In asp.net core MVC I want to create Items under different categories. In the create item view I simply have a button to create new category, a input tag for name of the item and select tag populated with categories.

In case the user wants to create the item under a category which is not there in the drop-down, clicking the button to create new category will bring a modal form where the user will enter new category and save it. Soon after this I want the item view to get refresh so that the drop-down gets populated with newly created category.

Please explain how to achieve this in asp.net core MVC

Answer 1

Hi @Arun Khatri ,

In case the user wants to create the item under a category which is not there in the drop-down, clicking the button to create new category will bring a modal form where the user will enter new category and save it. Soon after this I want the item view to get refresh so that the drop-down gets populated with newly created category.

You can use JQuery Ajax to do that. After entering the new category and click the save button, in the button click event, you can user JQuery to get the entered value and use JQuery Ajax to transfer the new category to the action method, then in the action method, you can insert the new category to the database, and re-query database to get the latest categories and return it. Then, in the Ajax success function, you can get the latest categories and populate the dropdownlist. Afte that you can create new item with the new category.

Please refer to the following sample: in this sample, I use a DropDownlist option to create new category. you can change it to a button and use the button click event.

The CreateItem.cshtml page:

The Scripts:

More detail information, you can check the source code from here: 172957-createitemcshtml.txt 173026-homecontroller.txt 172958-model.txt

Then, the result is like this:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

this will be all written in javascript. you will need MVC to expose a web api you can call to add and list categories.

in client script, when the button add button is clicked, display a modal (using whatever client library you pick). the modal will have a form, when the modal save is clocked, an ajax call is don to save the new category, then a ajax call is done to get the new category list, the dropdown options list is updated, and modal closed.