Creating a new record using AJAX in ASP.NET-MVC

Question

I am having the hardest time wrapping my head around this. I recently asked this question Create/Edit/Save data in a jQuery pop-up for ASP.NET-MVC and Linq2Sql I'm sure that the response is the right way to go, but I just can't figure out how to write the back-end code to make it work. I originally made my site by following the nerddinner tutorial. I have a subcontracts model and a subcontracts controller. On my subcontract entry page, I'd like for there to be a pop-up/dialog box where the user can enter a new company if the company isn't already in the drop-down list. Do I need to create a new company controller? I wouldn't have a company model b/c the company table is linked to my subcontracts table within the subcontracts dbml.

Can anyone point me to an example somewhere? Or offer any help.

EDIT: When the company/create method is called, all of the fields are null.

Here's the code:

<div id="popupCreateCompany" title="Create a new company"> 
    <p>  
        <label for="company_name">Company Name:</label><br />
        <%= Html.TextBox("company_name") %>    
    </p>
    <p>
        <label for="company_desc">Company Description:</label><br />
        <%= Html.TextBox("company_desc") %>
    </p>  
    <p>
        <label for="address">Address:</label><br />
        <%= Html.TextBox("address") %>
    </p>
    <p>
        <label for="city">City:</label><br />
        <%= Html.TextBox("city") %>
    </p>
    <p>
        <label for="state">State:</label><br />
        <%= Html.TextBox("state") %>
    </p>
    <p>
        <label for="zip">Zip:</label><br />
        <%= Html.TextBox("zip") %>
    </p>
    <p>
        <label for="website">Website:</label><br />
        <%= Html.TextBox("website") %>
    </p>
 </div>  

jquery code:

            $("#create-company").click(function() {
            //centerPopup();
            //loadPopup();
            $('#popupCreateCompany').dialog(
                {
                    modal: true,
                    buttons:
                    {
                        'Add': function() {
                            var dialog = $(this);
                            var form = $(this).find('#popupCreateCompany');
                            $.post('/company/create', $(form).serialize(), function() {
                                dialog.dialog('destroy');
                            })
                        },
                        'Cancel': function() {
                            dialog.dialog('destroy');
                        }
                    }
                });

        });

Also, my fields show up as a separate box which is on top of the dialog.

Answer 1

You don't need to create a new controller. Submitting a form via jQuery is really no different from submitting a form via clicking a button with the mouse.

The code from the previous answer:

$.post('/company/new', $(form).serialize(), function() {
                            dialog.dialog('destroy');
                        }

is going to post every field of your form in a POST request, just like usual. If you name your form fields such that they represent properties of an object, and thus can be bound to a model object like usual, you can create your action method like normal:

public ActionResult New(CompanyDetails newCompany)
{
    if (ModelState.IsValid)
    {
       // Insert newCompany into database.
    }
}

You can also just use a FormCollection parameter, and use TryUpdateModel() to populate some object you create:

public ActionResult New(FormCollection postedValues)
{
    // Create a new Company() here and just call TryUpdateModel() on it:
    var company = new Company();
    TryUpdateModel(company);
    if (ModelState.IsValid)
    {
        /// Insert
    }
}

If for whatever reason your form fields can't match object properties, then you can take the "manual" way, and just search the FormCollection parameter for the field data you need, and do your business logic to construct a new company with the posted values.

Once you're done creating your company, you have to remember that the action method was called via ajax, and it's a jQuery callback that's going to handle the response. You may want to return a JsonResult that just indicates success or failure and simply close the dialog, or return a full view that the jQuery callback will handle as html data and display in the dialog.

Answer 2

The url I used in my answer on your previous question was just an example. You could just as easily have a method on the existing controller that creates a new company. As for not having a Company "model" -- I would submit that you do already have one. It's in the same data context as your Subcontract -- perhaps, what you mean is that you don't have a Company repository.

Depending on how you have structured your repository, you may or may not need a separate repository for the Company model. If you are using a repository per model pattern (strongly-typed repository), then you would want a separate repository when you are dealing directly with companies on their own. If you are using a multiple models per repository pattern (strongly-typed methods), then you probably don't need another one.

In any event, you need a method on some controller to handle creating the company. I'd probably go with a separate company controller since you may also want to have the ability to create new companies beforehand without respect to any particular contract. Uinsg a separate controller will segregate the logic for handling them leading to less coupling with your subcontract classes if you eventually need to expand the app.