web Controller plus views

 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }
        //[HandleError]
        //[HandleError(View = "ErrorDeatils")]
        public ActionResult About()
        {
            //ViewBag.Message = "Your app description page.";
            throw new Exception("Some unknown error encountered!");
            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult ShowGrid() {
            GetReportData();
            return View();
     
        }



        public ActionResult Getdata() {

            GetStateData();
            return View();
        }


        [HttpGet]
        public ActionResult GetStateData()
        {
            //  return View();
            var lstReportData = new List<States>();
            GetData ob = new GetData();
            var dt = ob.GetAllData();

            if (dt.Rows.Count > 0)
            {
                lstReportData = GetStateList(dt);
            }
            return Json(lstReportData, JsonRequestBehavior.AllowGet);
        }



        private List<States> GetStateList(DataTable dt)
        {
            var lsrCar = new List<States>();
            foreach (DataRow dr in dt.Rows)
            {
                var objPC = new States();
                objPC.State = dr["State"].ToString();
                objPC.City = dr["City"].ToString();
                lsrCar.Add(objPC);
            }
            return lsrCar;
        }


        [HttpGet]
        public ActionResult GetReportData()
        {
          //  return View();
            var lstReportData = new List<ActivityModel>();
            GetData ob = new GetData();
            var dt = ob.GetAllActivity();

            if (dt.Rows.Count > 0) {
                lstReportData = GetList(dt);
            }
           return  Json(lstReportData, JsonRequestBehavior.AllowGet);
        }



        private List<ActivityModel> GetList(DataTable dt)
        {
            var lsrCar = new List<ActivityModel>();
            foreach (DataRow dr in dt.Rows)
            {
                var objPC = new ActivityModel();
                objPC.id = dr["id"].ToString();
                objPC.name = dr["name"].ToString();
                objPC.active = dr["active"].ToString();
                lsrCar.Add(objPC);
            }
            return lsrCar;
        }


        public ActionResult NewGrid() {

            return View();
     
        }


        [HttpGet]
        public ActionResult GetCountryList()
        {

            var obj = new GetData();
            var dt = obj.GetAllCounrty();
            var ListCenter = GeCityList(dt).ToList();
            return Json(ListCenter, JsonRequestBehavior.AllowGet);

        }




        [HttpGet]
        public ActionResult GetCityList()
        {

            var obj = new GetData();
            var dt = obj.GetAllCity();
            var ListCenter = GeCityList(dt).ToList();
            return Json(ListCenter, JsonRequestBehavior.AllowGet);

        }

        private List<City> GeCityList(DataTable dt)
        {
            var lstcomplain = new List<City>();
            foreach (DataRow dr in dt.Rows)
            {
                var objPC = new City();
                objPC.Id = dr["Id"].ToString();
                objPC.Name = dr["Name"].ToString();
                lstcomplain.Add(objPC);
            }
            return lstcomplain;
        }
   
        //

        [HttpPost]
        public ActionResult SaveData(string StrMTL, string listvals)
        {
                List<string> strList = new List<string>();
                GetData ob = new GetData();
                ob.savedata(StrMTL, listvals);
                string Msg = "Complaint Assigned Successfully";
                strList.Add(Msg);
                return Json(strList, JsonRequestBehavior.AllowGet);
     
        }


    }

/////////////////////////////////////////////////////////////
@{
    ViewBag.Title = "Home Page";
}

<h3>We suggest the following:</h3>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            fillCities();
            fillCountry();
        });


        function fillCities() {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("GetCityList", "Home")',
                data: {},
                success: function (data) {
                    $.each(data, function (i, val) {
                        $('#ChooseLeft').append($('<option>', {
                            value: val.Id,
                            text: val.Name
                        }));
                    });
                },
                error: function (xhr, status) {
                },


                complete: function (data) {
                },

                dataType: "json"
            });
        }

        //selectcountry

        function fillCountry() {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("GetCountryList", "Home")',
                data: {},
                success: function (data) {
                    $.each(data, function (i, val) {
                        $('#selectcountry').append($('<option>', {
                            value: val.Id,
                            text: val.Name
                        }));
                    });
                },
                error: function (xhr, status) {
                },


                complete: function (data) {
                },

                dataType: "json"
            });
        }


        function SaveData() {

       
           var StrMTL = $("#selectcountry").val();
           var a = hdvalues.value;
           var listvals = a.substring(0, a.length - 1)
           alert(listvals);
         
   

            if (StrMTL != "0") {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("SaveData", "Home")',
                    data: "{'StrMTL':'" + StrMTL + "','listvals':'" + listvals + "'}",
                    success: function (data) {
                        alert(data);
                   
                    },
                    error: function (xhr, status) {
                        alert('Unknown error ' + status);
                    },
                    dataType: "json"
                });
            }
            else {
                alert("Kindly Provide Fields !");
            }


        }






        $(function () {
            $("#ShiftRight,#ShiftLeft").click(function (event) {
                var ID = $(event.target).attr("ID");


                var ChooseFrom = ID == "ShiftRight" ? "#ChooseLeft" : "#ChooseRight";
                var moveTo = ID == "ShiftRight" ? "#ChooseRight" : "#ChooseLeft";

                var SelectData = $(ChooseFrom + " :selected").toArray();

                var result = "";
                var x = document.getElementById("ChooseLeft");
                for (var i = 0; i < x.options.length; i++) {
                    if (x.options[i].selected == true) {
                        alert(x.options[i].value);
                        result += x.options[i].value + ',';
                    }
                }
                //alert(result);

                hdvalues.value = result;
   
                alert(hdvalues.value);

                $(moveTo).append(SelectData);
                SelectData.remove;
            });
        });
    </script>
</head>
<body>




    <form method="get">


        <select id="selectcountry" style="width:202px;">
            <option value="0">Select</option>
        </select>


        <select id="ChooseLeft" multiple="multiple">
            @*<option value="1">Lucknow</option>
                <option value="2">Kanpur</option>
                <option value="3">Delhi</option>
                <option value="4">Gurgao</option>
                <option value="5">Noida</option>
                <option value="5">Agra</option>
                <option value="5">Banglore</option>
                <option value="5">Rajasthan</option>
                <option value="5">Pune</option>*@
        </select>
        <input id="ShiftRight" type="button" value=" ShftRight (>>) " />
        <input id="ShiftLeft" type="button" value="ShiftLeft(<<) " />

        <select id="ChooseRight" multiple="multiple"></select>



        <button id="submit3"  type="submit" onclick="SaveData();">Savedata</button>

    </form>



</body>
</html>
<input type="hidden"  id="hdvalues" />
/////////////////////////////////////////////////////////////////////////////////////////////////

For Grid work

@{
    ViewBag.Title = "ShowGrid";
    Layout = null;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<link href="https://cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />


    <script type="text/javascript">
       
        $(document).ready(function () {
            var grid = jQuery("#myGrid");

            $(function () {
                "use strict";
                $("#myGrid").jqGrid({
                    url: '@Url.Action("GetReportData", "Home")',
                    data:JSON,
                    mytype: 'get',
                    colNames: ['ID', 'NAME','active'],
                    colModel: [
                    { name: 'ID', width: '35px' },
                    { name: 'Name', width: '160px' },

                    //{
                    //    name: 'enbl', index: 'enbl', width: 60, align: 'center',
                    //    formatter: 'checkbox', editoptions: { value: '1:0' },
                    //    formatoptions: { disabled: false },
                    //}
                    {
                        name: 'active', width: 60, align: 'center',
                        edittype: 'checkbox',
                        editoptions: { value: 'Yes:No', defaultValue: 'Yes' },
                        formatoptions: { disabled: false },
                        formatter: function (cellvalue, options, rowObject) {
                            return '<input type="checkbox" id="cbPassed-' + rowObject.ID +
                                (rowObject.active === true ? '" checked="checked" />' : '" />');
                        }
                    }

                   

                    ],


                    cmTemplate: { width: 220 },
                    beforeSelectRow: function (rowid, e) {
                        var $self = $(this), $td = $(e.target).closest("tr.jqgrow>td"),
                            iCol = $td.length > 0 ? $td[0].cellIndex : -1,
                            cmName = iCol >= 0 ? $self.jqGrid("getGridParam", "colModel")[iCol].Name : "",
                            localData = $self.jqGrid("getLocalRow", rowid);
                        if (cmName === "active" && $(e.target).is("input[type=checkbox]")) {
                            localData.active = $(e.target).is(":checked");
                        }

                        return true;
                    },

                    threeStateSort: true,
                    autoencode: true,
                    viewrecords: true,
                    sortorder: "asc",
                    pager: $('#myPager'),
                    rowNum: 5,
                    sortname: 'ID',
                    gridview: true,
                    sortorder: 'desc',
                    loadonce: true,
                    rowList: [5, 10, 20, 50],
                    width: 600,
                    height: 110,
                    viewrecords: true,
                    caption: 'Employee details in JQ Grid'
                });
            });


            //$("#button1").click(function() {
            //    var str = '';
            //    var data = grid.getRowData();
            //    for (i = 0; i < data.length; i++) {

            //        alert(data[i]);
            //        //if(data[i].checkbox==='1')
            //        //    str += data[i].ID+',';
            //    }
            //    alert(str);
            //});


            $('#btn').click(function () {
                var myGrid = $('#myGrid'), i, rowData, names = [],
                    rowIds = myGrid.jqGrid("getDataIDs"),
                    n = rowIds.length;
                for (i = 0; i < n; i++) {
                    rowData = myGrid.jqGrid("getLocalRow", rowIds[i]);
                    if (rowData.active) {
                        names.push(rowData.Name);
                    }
                     }

                //console.log(names);
                alert(names.join(";"));
            })
        });














        //    $('#btn').click(function () {
        //        var str = '';
        //        var myGrid = $('#myGrid'), i, rowData, names = [],
        //            rowIds = myGrid.jqGrid("getDataIDs"),
        //            n = rowIds.length;
        //        for (i = 0; i < n; i++) {
        //            rowData = myGrid.jqGrid("getLocalRow", rowIds[i]);
        //           // if (rowData.enbl==1) {
        //                if (rowData.enbl) {
        //                    //alert(rowIds);

        //                alert(rowData.ID);
        //                //str += rowData.ID + ',';
        //                 }
        //              }
        //        //alert(str);
        //    })

        //});



        //function Callfunc() {


        //    //alert('1');

        //    //var a = grid.get
        //    //alert(a);
        //    //var str = '';
        //    var data = grid.getRowData();
         
        //    for (i = 0; i < data.length; i++) {

        //        alert(data[i].ID);
        //        alert(data[i].length);
        //        //if (data[i].checkbox === '1')
        //        //    str += data[i].Id + ',';
        //    }
        //    //alert(str);

        //}

</script>
<style type="text/css">
    .ui-jqgrid .ui-widget-header {
        background-color: #336699;
        background-image: none;
        color: white;
    }

    .ui-jqgrid .ui-jqgrid-labels th.ui-th-column {
        background-color: #FFCC66;
        background-image: none;
        color: #336699;
        height: 30px;
        font-weight: bold;
    }
</style>

<h2>ShowGrid</h2>

<div>
    <table id="myGrid"></table>
    <div id="myPager"></div>


    <input type="button" value="CheckValues" id="btn"/>
</div>