How to use Google Maps with multiple markers in ASP.NET MVC 3

If you load more then 20 markers in your google map page, it will only load 10 markers because google map api has limitations.To solve this limitation problem we will use the google utility called MarkerManager. Let's do a code: First we need to include our scripts for Google Maps API and MarkerManager. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script> In my database table i have complete address field,  latitude field, and longitude field andI'm using Massive by Rob Conery for my data access tool  In Controller: public ActionResult GoogleMaps(int id) { IEnumerable<dynamic> result = null; dynamic table = new Maps(); result = table.All(); return View(result); } In my View: <h2>MAPS</h2> <div id="map_canvas" style="height: 400px;"></div> And add your Script for loading the maps <script language="javascript" type="text/javascript"> var map; var mgr; function initialize() { var myOptions = { zoom: 8, center: new google.maps.LatLng(32.9756415, -96.8899636), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); mgr = new MarkerManager(map); var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." }); google.maps.event.addListener(mgr, 'loaded', function () { @foreach (var item in Model) { <text> var marker = new google.maps.Marker({ position: new google.maps.LatLng(@item.Latitude, @item.Longitude), html: "@item.CompleteAddress" }); google.maps.event.addListener(marker, "click", function () { infoWindow.setContent(this.html); infoWindow.open(map, this); }); mgr.addMarker(marker, 0); </text> } mgr.refresh(); }); } $(document).ready(function () { initialize(); }); </script> // //

How to use client side jquery validation in asp.net mvc 3

We can directly apply the validation by using jquery.validate.unobtrusive.min.js without using the model class.By adding html markup you can enable the client side validation. In your View this is how it looks like in your input text. First add the jquery scripts. <script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script> <script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.min.js"></script> Then your input text <input type="text" name="name" id="name" value="val" data-val="true" data-val-required="required" /> There very simple classic approach ^_^Happy Coding  // //

How to access stored procedure in Entity Framework

First we have to create stored procedure using MS SQL Server 2008 R2 CREATE PROCEDURE dbo.SelectCategories AS BEGIN SELECT * FROM dbo.Articles; END   From your Model(Model.edmx), let's right click in your model designer then Add -> Function Import.This is what it looks like when you add Function Import. Press Ok then Save and Build your project. You can now access your stored procedure using EF4 Public ActionResult Articles(){ ModelEntities _db = new ModelEntities (); var model = _db.SelectArticles(); return View(model); } Happy Coding ^_^ // //

How to use DevExpress MVC Gridview using Entity Framework 4

In Controller: We assume that you already created your model using Entity Framework 4 and generated a model class from your database. public ActionResult Categories(){ ModelEntities dbContex = new ModelEntities(); return View(dbContex.Categories.ToList()); } Now let's create PartialView. public ActionResult CategoryPartial() { var model = _db.SelectCategories(); return PartialView("CategoryPartial", model); } In View: Let's add the devexpress css and js. @Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }, new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor }, new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }, new StyleSheet { ExtensionSuite = ExtensionSuite.Chart }, new StyleSheet { ExtensionSuite = ExtensionSuite.Report } ) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, new Script { ExtensionSuite = ExtensionSuite.HtmlEditor }, new Script { ExtensionSuite = ExtensionSuite.GridView }, new Script { ExtensionSuite = ExtensionSuite.Editors }, new Script { ExtensionSuite = ExtensionSuite.Chart }, new Script { ExtensionSuite = ExtensionSuite.Report } ) @Html.Partial("CategoryPartial", Model) In PartialView: @Html.DevExpress().GridView( settings => { settings.Name = "gvCategories"; settings.CallbackRouteValues = new {Controller = "Admin", Action = "CategoryPartial" }; settings.Columns.Add("CategoryId").Caption = "ID"; settings.Columns.Add("Title"); settings.Columns.Add("Description"); settings.Columns.Add( column => { column.Caption = "Action"; column.SetDataItemTemplateContent(c => { ViewContext.Writer.Write( Html.ActionLink("Edit", "EditCategory", new { id = DataBinder.Eval(c.DataItem, "CategoryId") }) + "&nbsp" + Html.ActionLink("Delete", "DeleteCategory", new { id = DataBinder.Eval(c.DataItem, "CategoryId") }, new { onclick = "return confirm('Do you really want to delete this record?')" }) ); }); } ); }).Bind(Model).GetHtml() Happy Coding // //