• Ajax Scripting to an MVC Project

    by  • December 23, 2015 • Microsoft .NET AJAX • 0 Comments

    This article illustrates ; how to add ajax script to an MVC Project.

    First i illustrate, what is ajax. Ajax (short for asynchronous JavaScript and XML) is a set of web development techniques utilizing many web technologies used on the client-side to create asynchronous Web applications.

    Ajax can be used in our web application projects as ajax has the following features,

    • Familiar interactive UI elements such as progress indicators, tooltips, and pop-up windows.
    • Improved efficiency for Web Forms application, because significant parts of a Web page’s processing can be performed in the browser.
    • Partial-page updates that refresh only the parts of the Web page that have changed.
    • Client integration with ASP.NET application services for forms authentication, roles, and user profiles.
    • Auto-generated proxy classes that simplify calling Web service methods from client script.
    • The ability to customize server controls to include client capabilities.
    • Support for the most popular browsers, which includes Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari.

    From the above features, i will elaborate Partial page update with the following given code and images.

    First add the Ajax libraries jquery.unobtrusive-ajax.js  and  jquery.unobtrusive-ajax.min.js  in the scripts folder of MVC project.

     

    script folder

     

     

    Then reference these libraries in the Head Section of MVC Views.

    Now add these files in the BundleConfig.cs in App_Start folder

    Now add Ajax.ActionLink Helper Method in Staff.cshtml file in MVC View.

    Now i will illustrate Ajax.ActionLink method.

    @ Ajax.ActionLink(Text to Display, ActionName, ControllerName,

    new AjaxOption{UpdateTargetId=Element to update, InsertionMode=Replace/Get})

    Now the output of the above code will elaborate this furthur that how page is updated partially.

    Staff index.PNG                            staff details

    The above code generates the Staff List and when we click on the staff Name, only updated target id that is div having id details is updated only, not whole page .




    Namecheap.com

    Leave a Reply