Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Tuesday 5 August 2014

Action result types one of the common question in interview

ActionResult is an abstract class so you can never return it. You always return a derived class such as ViewResult, RedirectResult, JsonResult, FileResult, JavaScriptResult, ContentResult depending on what do you want your controller action to do (render a view, redirect to another url, return JSON formatted data, download a file, ...). As far as the signature of your action method is concerned I would recommend you always having ActionResult as return type.



ViewResult (View) --Renders a view as a Web page.

PartialViewResult  (PartialView)--Renders a partial view,which defines a section 

of view that can be rendered inside another view.

RedirectResult (Redirect)--Redirects to another action method by using its URL.


RedirectToRouteResult (RedirectToAction/RedirectToRoute)--Redirects to another action method.


ContentResult (Content)--Returns a user-defined 

content type.

JsonResult (Json)--Returns a serialized 

JSON object.

JavaScriptResult (JavaScript)--Returns a script that can

Be executed on the client.

FileResult (File)--Returns binary output to

 write to the response.


EmptyResult(None)--Represents a return value
that is used if the action
 method must return a
 null result (void).



Difference Between Asp.Net and MVC Web forms



Asp.Net Web Form follow a traditional event driven development model.
Asp.Net MVC is a lightweight and follow MVC (Model, View, Controller) pattern based development model.
Asp.Net Web Form has server controls
Asp.Net MVC has html helpers.
Asp.Net Web Form has state management (like as view state, session) techniques.
Asp.Net MVC has no automatic state management techniques.
Asp.Net Web Form has file-based URLs means file name exist in the URLs must have its physically existence.
Asp.Net MVC has route-based URLs means URLs are divided into controllers and actions and moreover it is based on controller not on physical file
Asp.Net Web Form follows Web Forms Syntax
Asp.Net MVC follow customizable syntax (Razor as default)
In Asp.Net Web Form, Web Forms(ASPX) i.e. views are tightly coupled to Code behind(ASPX.CS) i.e. logic.
In Asp.Net MVC, Views and logic are kept separately.
Asp.Net Web Form has Master Pages for consistent look and feels.
Asp.Net MVC has Layouts for consistent look and feels.
Asp.Net Web Form has User Controls for code re-usability.
Asp.Net MVC has Partial Views for code re-usability.
Asp.Net Web Form has built-in data controls and best for rapid development with powerful data access.
Asp.Net MVC is lightweight, provide full control over markup and support many features that allow fast & agile development. Hence it is best for developing interactive web application with latest web standards.

Tuesday 4 March 2014

Autocomplete Textbox in MVC 4 & the exact plugins required to achieve it

--I was struggling for the plugins for autocomplete textbox for since last one day. Now finally I wrote the code got the correct plugins and it worked like a wonder.

MODEL
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Tesco.RetalixTenNFR.MVC.Models
{
    public class Employee
    {
        public string EmployeeNames { get; set; }
        public string EmployeeId { get; set; }

    }

}

CONTROLLER
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Mvc;
using Tesco.RetalixTenNFR.MVC.Models;

namespace Tesco.RetalixTenNFR.MVC.Controllers
{
    public class SearchStoreController : Controller
    {

        public ActionResult StoreSearch()
        {
            return View();
        }


        [HttpPost]
        public JsonResult Employeename(string term)
        {

            Employee Emp = new Employee();

            var data = new object();

            List<Employee> EmployeeList = new List<Employee>();

   EmployeeList.Add(new Employee { EmployeeNames = "Anurag", EmployeeId = "11" });
   EmployeeList.Add(new Employee { EmployeeNames = "Abhi", EmployeeId = "12" });
   EmployeeList.Add(new Employee { EmployeeNames = "Anupama", EmployeeId = "13" });
   EmployeeList.Add(new Employee { EmployeeNames = "Abhishek", EmployeeId = "114" });
   EmployeeList.Add(new Employee { EmployeeNames = "Anirudh", EmployeeId = "23" });
   EmployeeList.Add(new Employee { EmployeeNames = "Bibek", EmployeeId = "234" });

            if (Regex.IsMatch(term, "[0-9]"))
            {
                data = (from r in EmployeeList
                        where r.EmployeeId.Contains(term)
                        select new { r.EmployeeId }).Distinct();
            }

            else
            {
                data = (from r in EmployeeList
                        where r.EmployeeNames.Contains(term)
                        select new { r.EmployeeNames }).Distinct();
            }


            return Json(data, JsonRequestBehavior.AllowGet);

        }


    }

}

VIEW
@model Tesco.RetalixTenNFR.MVC.Models.Employee




<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#Employee").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/SearchStore/Employeename",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {


                        response($.map(data, function (item) {

                            if (item.EmployeeNames != null)

                                return {


                                    label: item.EmployeeNames,
                                    value: item.EmployeeNames
                                };

                            else {
                                return {


                                    label: item.EmployeeId,
                                    value: item.EmployeeId
                                };
                            }
                        }))

                    }
                })
            },
          
            minLength: 1
        });
    })

</script>
 <div style="font-family: Arial">
        <input type="text" id="Employee" placeholder="Search for a product" required />

</div>

OUTPUT


























--i have used contains.
--you can use startswith as per your requirement.

--Note : TOP 10 and distinct [And also if you type small letter it will search for results]

data = 
(from r in EmployeeList
where r.EmployeeId.ToUpper().StartsWith(term.ToUpper()) ||                     r.EmployeeNames.ToUpper().StartsWith(term.ToUpper())
select new Employee { EmployeeId=r.EmployeeId, EmployeeNames=r.EmployeeNames}).Distinct().Take(10);


--Note :data: { term: request.term }  should be same as in function.
       This term should be same as 
        public JsonResult Employeename(string term)
        {
         \\..........
        }
   
Hope you liked it :)



Monday 17 February 2014

Grid In MVC 4



































MODEL


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

namespace GridViewMVC.Models
{
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Designation { get; set; }
    }

}

CONTROLLER
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using GridViewMVC.Models;

namespace GridViewMVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {

            List<Employee> ListEmpObj = new List<Employee>();

            ListEmpObj.Add(new Employee { Id=1, Designation="Software Engineer",Name="Anurag",Gender="Male"});
            ListEmpObj.Add(new Employee { Id = 2, Designation = "Project Lead", Name = "Rama", Gender = "Male" });
            ListEmpObj.Add(new Employee { Id = 3, Designation = "Lead Engineer", Name = "Nagesh", Gender = "Male" });

            return View(ListEmpObj);
        } 
    }

}

VIEW

@model  IEnumerable<GridViewMVC.Models.Employee>

@{
    ViewBag.Title = "Home Page";
    WebGrid grid = new WebGrid(Model);
}


@grid.GetHtml(

columns:grid.Columns(

        grid.Column("Id","Emp Id"),
        grid.Column("Name","Name"),
        grid.Column("Designation","Title"),
        grid.Column("Gender","Gender")

))


















==============================================================

/*-----------------Grid View-----------------------------------*/

.GridTable 
{
margin: 10px;
padding: 10px;
border-width: 10px;
border: 1px #c8c8c8 solid;
border-collapse: separate;
min-width: 550px; 
background-color: #00FF00;
color: #fff;
width: 100%;
}

.GridTable td 
{
border-width: 1px;
border-style: solid;
color: red;
}

.GridHeader th
{
 border-width: 1px;
border-style: solid;
color: black;
padding: 10px;
background-color: orange;

}



.GridHeader a:link{color:orange;},
.GridHeader a:visited{color:yellow;},
.GridHeader a:active{color:blue;}, /*when you click the header */ 
.GridHeader a:hover {color: #FF0000;}
.GridHeader a:hover {text-decoration:dotted;}



.GridTable tr.GridAlterRow
{
background-color: #efeeef;
}

/*done*/
.GridTable tr:hover{background-color: #FF0000;}

.GridAlterRow td
{
padding: 10px;
margin: 5px; 
color: #333;
}

.gridRow td
{
padding: 10px;
color: blue;/*text inside cell changes color*/
}


.gridFooter td
{
padding: 10px;
background-color: lightyellow;
color: #999;
font-size: 12pt;
text-align: center;
}

.gridFooter a
{
font-weight: bold;
color: #333;
border: 1px #333 solid;
}


VIEW:

@model  IEnumerable<GridViewMVC.Models.Employee>

@{
    ViewBag.Title = "Home Page";
    WebGrid grid = new WebGrid(Model);
}



<div>
@grid.GetHtml(
        tableStyle:"GridTable",
        headerStyle :"GridHeader",
        footerStyle :"GridFooter",
        alternatingRowStyle :"GridAlterRow",
        rowStyle:"gridRow",        
        
        columns:grid.Columns(
        grid.Column("Id","Emp Id"),
        grid.Column("Name","Name"),
        grid.Column("Designation","Title"),
        grid.Column("Gender","Gender")
))

</div>

Output

On mouse over red color we can see on second row.