How to add new record in mvc Using ajax

How to add new record in mvc Using ajax please help me
Last updated:11/19/2015 10:13:06 PM

1 Answers

Anonymous User
Anonymous User

_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