Click here to Skip to main content
15,394,023 members
Articles / Web Development / HTML
Tip/Trick
Posted 1 Feb 2015

Stats

31.6K views
14 bookmarked

How to Use Ajax.BeginForm

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
1 Feb 2015CPOL2 min read
The tip aims to demonstrate the usage of Ajax.BeginForm

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.

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:

HTML
@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

HTML
@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

HTML
@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 Image 1

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:

Image 2

  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.

Image 3

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.

Image 4

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

Image 5

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…

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Veronica S. Zotali
Software Developer (Senior)
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
QuestionDatabase Pin
Opis-Kladno18-May-17 1:00
MemberOpis-Kladno18-May-17 1:00 
AnswerRe: Database Pin
Veronica S. Zotali18-May-17 8:54
MemberVeronica S. Zotali18-May-17 8:54 
PraiseBest on the line ariticle Pin
Member 1205125715-Dec-15 3:49
MemberMember 1205125715-Dec-15 3:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.