ASP.NET MVC - Ajax.BeginForm vs Ajax.ActionLink

Question

I've noticed when I use Ajax.BeginForm (with a submit button) that the Model is passed to the Controller but when I use an Ajax.ActionLink it is not passed - or at least I have not discovered how to tap into it.

First question: How do you determine which is the better route to take?

Now, for a little deeper dive into one sample scenario: I have a model that has a couple dozen simple data type properties and a few List properties. The Create/Edit View is rendered with a Html.BeginForm(). The submit button returns the entire view model and I can then go through it and save all the data to the DB via the DB Model. Like I said I have a few List pieces as well. For example, I have a List of credit cards accepted which I render as a series of check boxes, a List of Services Provided also rendered as a list of check boxes. All of these are easy to deal with on the Form Post. However, I have one List that is basically a free-form text entry and I would like to have the textbox with an Add button followed by all of the List items, each with a delete button.

My Create/Edit view looks something like:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RainWorx.FrameWorx.MVC.ViewModels.DirectoryEdit>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="Column12">
        <div class="Shadow"></div>
        <h2 class="h2row"><%= Model.PageTitle%></h2>
        </div>
    <% using (Html.BeginForm())
       {%>
        <%: Html.ValidationSummary(true)%>

        <fieldset>
            <%--<legend>Fields</legend>--%>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Name)%>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Name, new { style = "width:20em;" })%>
                <%: Html.ValidationMessageFor(model => model.Name)%>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Address1)%>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Address1, new { style = "width:20em;" })%>
                <%: Html.ValidationMessageFor(model => model.Address1)%>
            </div>
...                

            <div class="editor-label">
                <%: Html.LabelFor(model => model.LookupAccepts)%>
            </div>
            <div class="editor-field">
                <hr />
                <% foreach (var a in Model.MyAccepts)
                   {
                       if (a.Checked)
                       { %>
                        <input type="checkbox" name="AcceptIDs" checked="checked" value="<%: a.ID %>" /> <%: a.Name%><br />
                    <% }
                       else
                       { %>                    
                        <input type="checkbox" name="AcceptIDs" value="<%: a.ID %>" /> <%: a.Name%><br />
                <% }
                   } %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.LookupServices)%>
            </div>
            <div class="editor-field">
                <hr />
                <% foreach (var a in Model.MyServices)
                   {
                       if (a.Checked)
                       { %>
                        <input type="checkbox" name="ServiceIDs" checked="checked" value="<%: a.ID %>" /> <%: a.Name%><br />
                    <% }
                       else
                       { %>                    
                        <input type="checkbox" name="ServiceIDs" value="<%: a.ID %>" /> <%: a.Name%><br />
                <% }
                   } %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.MyLicenses)%>
            </div>
            <div class="editor-field">
                <hr />
                <% Html.RenderPartial("EditLicense", model: Model); %>
            </div>

            <div class="editor-label">
                &nbsp;
            </div>
            <div class="editor-field">
                <input type="submit" value="Save" />
            </div>
        </fieldset>

    <% } %>
    </div>

    <div>
        <%: Html.ActionLink("Back to List", "Index")%>
    </div>

</asp:Content>

The Partial View looks like:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <%@ Import namespace="RainWorx.FrameWorx.MVC" %>

<% foreach (var license in Model.MyLicenses) { %>

<% } %>

My thought train for setting it up this way is pretty straight forward (I think it is anyways). I only have something to Ajax on the License section. I want to add one string after another without losing all of the information for the main model. And after the add is done I want to update the partial view with the updated List for it.

There is probably a better way to do this than what I laid out and if so, lay it on me. The main part I am trying to figure out right now (and quickly) is whether Ajax.ActionLink (and my Extension methods for it) are the right direction to go.

Answer 1

An Ajax.BeginForm simply ajaxifies the given form and when you submit it the values of all input fields that it contains are sent to the server. The only difference with a normal form is that the they are sent using AJAX.

On the other hand Ajax.ActionLink generates a simple anchor tag which performs an AJAX request to the given url. It won't send any additional values to the server unless you specify it.

How do you determine which is the better route to take?

Personally I don't use any of those. I use standard Html.BeginForm and Html.ActionLink and write the code manually to AJAXify them unobtrusively with jQuery (if I need to use Ajax of course).

For your scenario of implementing dynamic list editing you may take a look at the following blog post.