HOW TO ADD NEW RECORD IN MVC USING AJAX.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
C#  Mvc  Ajaxform 
 732  View(s)
Ratings:
Rate this:
How to add new record in mvc Using ajax please help me
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to add new record in mvc Using ajax.

    _Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")  
        <script src="~/Scripts/jquery-2.1.4.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    </head>
    <body class="PageContainer">

        <div class="divMain">
            @RenderBody()
        </div>
        <div class="popup" style="display: none;" id="modelpopup">
        </div>
    </body>
    </html>
    <script type="text/javascript">
        $(function () {
            $(document).on('click', '.openDialog', function (e) {
                e.preventDefault();;
                $.get($(this).attr("href"), function (response) {
                    $('#modelpopup').html(response);
                    $('#modelpopup').slideDown();
                });
            });
        });
        function onSuccess() {
            $.ajax({
                type: "POST",
                url: "/Home/Search",
                data: {},
                success: function (response) {
                    $('#divUserList').html(response);
                    $('#modelpopup').slideUp();
                },
            });

        }
        $(document).on('click', '.pagination li a', function (e) {
            e.preventDefault();
            if ($(this).attr("href") != "" && $(this).attr("href") != undefined) {
                $.post($(this).attr("href"), { SearchText: $('#SearchText').val() }, function (response) {
                    $('#divUserList').html(response);
                });
            }
        });
        function showWindow() {
            $('#modelpopup').slideDown();
        }
        function HideWindow() {
            $('#modelpopup').slideUp();
        }
        function Confirmation() {
            if (confirm("Are you sure you want to Delete ?")) {
                return true;
            } else {
                return false;
            }
        }

    </script>

    _UserList.cshtml

    @model PagedList.PagedList<TestProjectMvc.Models.UserBAL>
    @using PagedList
    @using PagedList.Mvc
    <div class="Middle1">

        @if (Model != null)
        {

            foreach (var obj in Model)
            {
            <div class="Rowbox">
                <div class="Name">@obj.UserName </div>
                <div class="Phone">@obj.PhoneNumber </div>
                <div class="Email">@obj.EmailId </div>
                <div class="Action">
                    @Html.ActionLink("Edit", "Edit", "Home", new { @id = obj.UserId }, new { @class = "openDialog" })
                    @Ajax.ActionLink("Delete", "Delete", "Home", new { @id = obj.UserId }, new AjaxOptions { OnBegin = "Confirmation", OnSuccess = "onSuccess" }, new { @class = "deleteDialog" })
                </div>
            </div>
              
            }
        }
        <div class="pagedList">
            @Html.PagedListPager(Model, page => Url.Action("Search", new { page }), PagedListRenderOptions.PageNumbersOnly)
        </div>

    </div>

    _AddUser.cshtml

    @model TestProjectMvc.Models.UserViewModel
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    @using (Ajax.BeginForm(new AjaxOptions{HttpMethod = "POST",OnSuccess = "onSuccess"}))
    {
        <div class="Middle">
            <div onclick="HideWindow()" style="width: 20px; right: 0; position: absolute; top: 0; font-size: 22px; cursor: pointer;">X</div>
            <div style="text-align: center; font-size: 20px; color: #0CA3EF; font-weight: 500;">Create New User</div>
            <div>
                @Html.ValidationSummary()
                <div class="Rowbox">
                    <div class="lable">
                        Name:
                    </div>
                    <div class="textbox">
                        @Html.TextBoxFor(m => m.User.UserName, new { Class = "txt", @id = "username" })
                        @Html.ValidationMessageFor(model => model.User.UserName)
                        @Html.HiddenFor(m => m.User.UserId,new { @id = "userid" })
                    </div>
                </div>
                <div class="Rowbox">
                    <div class="lable">
                        Contact No:
                    </div>
                    <div class="textbox">
                        @Html.TextBoxFor(m => m.User.PhoneNumber, new { Class = "txt", @id = "phonenumber" })
                        @Html.ValidationMessageFor(model => model.User.PhoneNumber)
                    </div>
                </div>
                <div class="Rowbox">
                    <div class="lable">
                        Email Id:
                    </div>
                    <div class="textbox">
                        @Html.TextBoxFor(m => m.User.EmailId, new { Class = "txt", @id = "emailid" })
                        @Html.ValidationMessageFor(model => model.User.EmailId)
                        
                    </div>
                </div>
                <div class="Rowbox">
                    <input id="reset" type="reset" value="Reset" style="padding: 8px; width: 100px; margin-left: 100px;" />
                    <input id="save" type="submit" value="Save" style="padding: 8px; width: 100px; margin-left: 10px;" />
                </div>
            </div>
        </div>
    }

     

     

    HomeController

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using TestProjectMvc.Models;
    using PagedList;
    using PagedList.Mvc;
    namespace TestProjectMvc.Controllers
    {
        public class HomeController : Controller
        {

            public ActionResult Index()
            {
                UserViewModel obj = new UserViewModel();
                UserBAL user = new UserBAL();
                obj.UserList = user.GetListRecord(user).ToPagedList(1, 2);
                return View(obj);
            }

            public ActionResult Add()
            {
                return PartialView("_AddUser");
            }

            [HttpPost]
            public ActionResult Add(UserViewModel data)
            {
                UserViewModel obj = new UserViewModel();
                UserBAL user = new UserBAL();
                if (ModelState.IsValid)
                {
                    user.InsertUpdateRecord(data.User);
                }
                return new EmptyResult();
            }       

        }
    }

     

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!