MVC 3 Ajax.BeginForm submit issue

Question

im trying to submit a form by pressing a button that eventually will refresh the table

this is the form :

@{
AjaxOptions ajaxOpts = new AjaxOptions
{
    Confirm = "start ???",
    UpdateTargetId = "MainTable",
    InsertionMode = InsertionMode.Replace,
    Url = Url.Action("Refresh","MainScreen"),
    LoadingElementId = "loading",
    LoadingElementDuration = 2000,



};}
@using (Ajax.BeginForm(ajaxOpts)){

<div id="loading" style="display: none; color: Red; font-weight: bold">
    <p>
        Loading Data...</p>
</div>

<div id="header">

    <input type="button" value="Submit Form" />

</div>
<table id="MainTable">
    <tr>
        <th>
            ServiceId
        </th>
        <th>
            ServiceInstanceId
        </th>
        <th>
            MessageRole
        </th>
        <th>
            Datetime
        </th>
        <th>
            Message
        </th>
        <th>
            Status
        </th>
        <th>
            ESBErrorCode
        </th>
        <th>
            ESBTecnicalErrorCode
        </th>
        <th>
            ErrorDescription
        </th>
        <th>
            PortName
        </th>
        <th>
            MachineName
        </th>
        <th>
            ConsumerId
        </th>
        <th>
            ExternalId
        </th>
        <th>
            ConsumerMachineName
        </th>
        <th>
            ServiceBehavior
        </th>
        <th>
            RouterConsumerId
        </th>
        <th>
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ServiceId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ServiceInstanceId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MessageRole)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Datetime)
            </td>
            <td>
                \
                @Html.DisplayFor(modelItem => item.Message.Context)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ESBErrorCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ESBTecnicalErrorCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ErrorDescription)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PortName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MachineName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ConsumerId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ExternalId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ConsumerMachineName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ServiceBehavior)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RouterConsumerId)
            </td>
        </tr>
    }
</table>
}

this is the Controler :

public ViewResult Refresh() {

        var tracks = db.Tracks.Include(t => t.Message);
        return View(tracks.ToList());
    } 

for some reason when i submit the button nothing happen

i already added

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

thanks miki

Answer 1

The unobtrusive js helper listens on the submit event with

$("form[data-ajax=true]").live("submit"...

but your "submit" button is "just a button" not a submit button:

<input type="button" value="Submit Form" />

Change it to type="submit"and it should work:

<input type="submit" value="Submit Form" />