How to Use Ajax.BeginForm

• Download source (RAR) - 6.5 MB

Introduction

Imagine that you are required to build a form that is constituted by multiple searches. On each search, every time you post, you don’t want to reload the entire page. Ajax.BeginForm enables asynchronous data retrieval from the server and to update parts of the existing page. This results in better user experience by making the Web application more responsive.

• https://msdn.microsoft.com/en-us/library/dd381533%28v=vs.100%29.aspx

The following is an admin tool where users can do the following:

• Search
• Insert
• Delete
• Export in Excel

The attachment includes a .bak file that you will need for data access.

Our Admintool is constituted by three views:

@using (Ajax.BeginForm("GetCustomerSegments", "CustomerCode", 
    new AjaxOptions { UpdateTargetId = "dataset", OnSuccess = "ValidateForm(data)" }))
{
    <div style="padding: 50px;">
        @Html.LabelFor(x => x.CodeBrand, "Code 1 : ")
        @Html.TextBoxFor(x => x.CodeBrand)
        @Html.ValidationMessageFor(model => model.CodeBrand)

        @Html.LabelFor(x => x.CodeCategory, "Code 2: ")
        @Html.TextBoxFor(x => x.CodeCategory)
        @Html.ValidationMessageFor(model => model.CodeCategory)

        @Html.LabelFor(x => x.CodePrice, "Code 3 : ")
        @Html.TextBoxFor(x => x.CodePrice)
        @Html.ValidationMessageFor(model => model.CodePrice) 
        
        <input type="submit" value="Search" />
    </div>
}

<div id="dataset"></div>

Instead of doing a full page refresh, the above will only update the defined targetid.

Delete View

@using (Ajax.BeginForm("Delete", "Operations", 
    new AjaxOptions { OnSuccess = "ValidateInsertForm(data)" }))
{
    <div style="padding: 50px;">
        @Html.LabelFor(x => x.CodeId, "CodeId : ")
        @Html.TextBoxFor(x => x.CodeId)

        @Html.HiddenFor(x=>x.CustomerId)
        <input type="submit" value="Delete" />
    </div>
}

Insert View

@using (Ajax.BeginForm("Insert", "Operations", 
    new AjaxOptions { OnSuccess = "ValidateInsertForm(data)" }))
{
    <div style="padding: 50px;">
        @Html.LabelFor(x => x.CodeId, "Code 1 : ")
        @Html.TextBoxFor(x => x.CodeId)
        @Html.ValidationMessageFor(model => model.CodeId)
        
        @Html.LabelFor(x => x.CustomerId, "CustomerId : ")
        @Html.TextBoxFor(x => x.CustomerId)
        @Html.ValidationMessageFor(model => model.CustomerId)

        <input type="submit" value="Insert" />
    </div>
}

<div id="errorBlock"></div>

Search View

It's interesting to observe what happens after we click on the Search:

1. A successful search will return a dataset as we see in the image below. Note that the URL is still the same, despite the fact that we just posted to the same controller but different Action GetCustomerSegments, so instead of seeing CustomerCode/GetCustomerSegments, we see CustomerCode/Index:

1. The values entered in the fields have been preserved, following the post. Something that conventionally does not happen, during full page load. Unless we use some get-away state management mechansims, the values entered are gone after a full page load.

User can export products List by clicking on the export column, i.e., DOC_BR12.

By editing the CodeId, users will be able to see Delete View where they can delete the CodeId.

Finally, we have our Insert View, where user can create a new entry for a customer:

Views could have been designed better with data that make more sense. The goal of this tip is to demonstrate the implementation of Ajax.BeginForm feature.

Happy coding…