asp.net mvc & jquery dialog: What approach do I take to add items to a dropdownlist/select list without full postaback?

Question

Hi,

I am new to MVC and have a grasp of the basic model, but still doing everything with postbacks etc.

One aspect of the UI I want to build is to have a drop-down-list of items with a button to add an item to the database and refresh the list. Achieving this with WebForms was straight forward as everything was wrapped in UpdatePanels, but what is the best approach to achieve this using MVC?

Part of the markup for the list and button look like this:

<table>
    <tr>
        <td><%=Html.DropDownList("JobTitleSelectList", Model.JobTitleSelectList, "(select job title)", new { @class = "data-entry-field" })%></td>
        <td>&nbsp;</td>
        <td><a id="AddJobTitleDialogLink" href="javascript: addJobTitleDialog();" title="Add Job Title"><img id="AddJobTitleButtonImage" src="/Content/Images/Icons/16x16/PlusGrey.png" border="0" /></a></td>
    </tr>
</table>

The Dialog is a standard jquery Ui dialog, looks like this:

<div id="SingleTextEntryDialog" style="display:none">
        <table>
            <tr>
                <td>Name:</td>
                <td><input id="SingleTextEntryDialogText" type="text" size="25" /></td>
            </tr>
        </table>
    </div>

I am guessing I need to put this into a UserControl / PartialView (are they the same thing?) Also with the strongly typed View how do I pass the Model or just the SelectList Property to the UserControl or is this not the case?

Nor sure if there should be form in the dialog div? or how that is going to postback via ajax.

Some examples show a lot of ajax code in the page something like: $.ajax({...}); I assume doing this using jquery is more code than asp.net webforms, but there is just more code to see doing a "View Source" on a page?

Your comments appreciated.

Answer 1

You could either use AJAX or perform a full page reload after the button is clicked. In bother cases you could have two forms on your page: the first form will contain the dropdown list allowing the user to select an element and a second form which will contain an input field and add button. Both forms will post to different actions on your controller.

If you decide not not use AJAX here's how you could proceed. Add a form containing the job title selection:

<div id="selectjobcontainer">
<% using (Html.BeginForm("selectjob", "home")) { %>
    <%= Html.DropDownList("JobTitleSelectList", Model.JobTitleSelectList) %>
    <input type="submit" value="Select job title" />
<% } %>
</div>

Add another form which will allow the user to add a job title to the list:

<div id="addjobcontainer">
<% using (Html.BeginForm("addjob", "home")) { %>
    <%= Html.TextBox("JobTitle") %>
    <input type="submit" value="add job title" />
<% } %>
</div>

The AddJob action should add the job title to the model and render the same view which will update the jobs dropdown list.

If you decide to refresh the dropdown list using AJAX, the AddJob action should return a partial view containing the first form, meaning that you need to put its code into a separate ascx control which you will include into the main view.

All that is left is to ajaxify the second form using the jQuery form plugin:

$(function() {
    $('#addjobcontainer form').ajaxForm({
        success: function(html) {
            $('#selectjobcontainer').html(html);
        }
    });
});