Wednesday 16 May 2012

Insert and display data in MVC using json

Add model class

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

namespace MvcApplication35.Models
{
    public class Test
    {
       
        public int EID
        { get; set; }
      
        public string NAME
        { get; set; }
    }
}
Code of the Controllers page

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

namespace MvcApplication35.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        DataClasses2DataContext o = new DataClasses2DataContext();
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }
        [HttpPost]
        public JsonResult xx(Test p)
        {
           
                EMP q = new EMP();
                q.EID = p.EID;
                q.NAME = p.NAME;
                o.EMPs.InsertOnSubmit(q);
                o.SubmitChanges();
                return Json(q,JsonRequestBehavior.AllowGet);
        }
        public JsonResult yy()
        {
            var m = from x in o.EMPs select x;
            return Json(m, JsonRequestBehavior.AllowGet);
        }
    }
}

Code of the designer page

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication35.Models.Test>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="../../Scripts/MicrosoftMvcValidation.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready
(
function () {
    z();
    $("#tb").click(
function () {
    if ($("#EID").val() == "") {

        alert('EID should not blank.')
        $('#EID').focus()
        return false
    }
    else if ($('#NAME').val() == "") {

        alert('Name should not blank.')
        $('#NAME').focus()
        return false
    }
    var m = y()
    $.post('/Home/xx', m, function (data) {
        alert('One record saved.')
        z()

    }
        )



}
)
    function y() {
        var eid = $("#EID").val();
        var name = $("#NAME").val();
        return (name == "") ? null : { EID: eid, NAME: name };
    }
    function z() {
        $.getJSON("/Home/yy", "", function (data) {
            $('#gv').html(" ");
            $('#gv').append("<tr><th>EID</th><th>NAME</th></tr>");
            $.each(data, function (index, value) {
                $("<tr><td>"
                                + value["EID"]
                                + "</td>"
                                + "<td>"
                                + value["NAME"]
                                + "</td>"
                                + "</tr>")
                                .appendTo("#gv");
            });

        });
    }
}
)
</script>
<%Html.EnableClientValidation(); %>
<%using (Html.BeginForm())
  { %>
  <form id="f">
  <table align="center">
  <tr><th colspan="2"> <h2><%: ViewData["Message"] %></h2></th></tr>
  <tr><td><label for="EID">EID</label></td><td><%=Html.TextBoxFor(Model=>Model.EID) %></td></tr>
  <tr><td><label for="EID">NAME</label></td><td><%=Html.TextBoxFor(Model=>Model.NAME) %></td></tr>
  <tr><td>&nbsp;</td><td><input type="button" value="Save" name="tb" id="tb" /></td></tr>
  <tr><td colspan="2">
    <table id="gv" width="100%"></table>
  </td></tr>
  </table>
  </form>
<%} %>
  
   
</asp:Content>

No comments:

Post a Comment