How to add new record in mvc Using ajax

How to add new record in mvc Using ajax please help me

_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();
        }

}
}

forum

How to add new record in mvc Using ajax

Can you answer this question?

1 Answers