Using Ajax Beginform in Asp.Net MVC | Code2night.com
Code2night
  • Home
  • Blogs
  • Guest Posts
  • Tutorial
  • Post Blog
  • Register
  • Login
  1. Home
  2. Blogpost

Using Ajax Beginform in Asp.Net MVC

Date- Jun 18,2023

4609

Free Download Pay & Download
Ajax Begin Form CSharp

In ASP.NET MVC, you can use the Ajax.BeginForm helper to create a form that submits data asynchronously using AJAX. This allows you to update specific parts of the page without refreshing the entire page. Here's an example of how to use Ajax.BeginForm in MVC:

1. Ensure you have included the necessary script references in your view. The jquery.unobtrusive-ajax.js script is required for Ajax.BeginForm to work. You can include it in your view by adding the following script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>

2. Create your form using the Ajax.BeginForm helper method. Here's an example:

@model AjaxBeginform.Models.Employee
@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>Ajax Begin Form</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

@using (Ajax.BeginForm("SubmitData", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "resultDiv", OnSuccess = "handleSuccess" }))
{
    <label>Name</label>
    @Html.TextBoxFor(x => x.Name)
    <label>Address</label>
    @Html.TextBoxFor(x => x.Address)
    <!-- form inputs here -->
    <input type="submit" value="Submit" />
}

<div id="resultDiv">
    <!-- result will be updated here -->
</div>


<script>
    function handleSuccess(result) {
        alert(result);
        // Handle the success response
    }
</script>

In this example, the Ajax.BeginForm method creates a form that will asynchronously submit data to the specified action method (ActionName) in the specified controller (ControllerName). The form data will be posted using the HTTP POST method.

The UpdateTargetId property of AjaxOptions is set to "resultDiv", which specifies that the response from the server should be rendered and updated in the element with the ID "resultDiv".

Now add a new class in the model and paste following code or create a class as per your requirement

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AjaxBeginform.Models
{
    public class Employee
    {
        public string Name { get; set; }
        public string Address { get; set; }
    }
}

3. Implement the corresponding action method in your controller. This action method will handle the form submission and return a partial view or JSON result that will be updated in the specified target element.

using AjaxBeginform.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxBeginform.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult SubmitData(Employee model)
        {
            // Process the form data and perform any necessary operations

            return Json("Success");
        }
    }
}

4. Optionally, you can handle additional events such as OnBegin, OnSuccess, OnFailure, etc., by adding properties to the AjaxOptions object in the Ajax.BeginForm method.

So this is how we can save data without reloading using Ajax Beginform in Asp.Net MVC.

Comments

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Free Download for Youtube Subscribers!

First click on Subscribe Now and then subscribe the channel and come back here.
Then Click on "Verify and Download" button for download link

Subscribe Now | 1210
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading
Be a Member
Join Us On Whatsapp Join Us On Facebook

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2025 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier
  • Guest Posts