JQuery Datepicker in asp.net MVC 5 With Snapshots

JQuery Datepicker in asp.net MVC 5

STEP-1:Tools > Library Package Manager>Package Manager Console

STEP-2: Install The Package "Install-Package jQueryUIHelpers.Mvc5"

               PM> Install-Package jQueryUIHelpers.Mvc5 

STEP-3:In the BundleConfig file create  new bundles

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

            "~/Scripts/jquery-ui-{version}.js",

            "~/Scripts/jquery-ui.unobtrusive-{version}.js"));

And

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

        "~/Content/themes/base/jquery.ui.core.css",

        "~/Content/themes/base/jquery.ui.datepicker.css",

        "~/Content/themes/base/jquery.ui.theme.css")); 

STEP-4:Render the bundles on the layout page

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/themes/base/css")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/jqueryui") 
 

 OR
 (If  The layout does not get the css properly )

   <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/themes/base/css")

    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")

STEP-5:  
              Add JQueryUI().Datepicker at Views e.g.

 @Html.JQueryUI().DatepickerFor(model => model.EnrollmentDate)

STEP-6:
               Build the Solution to get like-

STEP-7:            
               Date Format using Data Annotation:

To get dd/mm/yyyy format for example 24/12/2013, the Data Annotation Attribute
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]  can be used...

STEP-8:
               Display Name Using data annotation-

STEP-9: 
                To get...

Another Example of JQuery UI Datepicker in asp.net MVC5    here

How to add asp.net web forms with existing asp.net mvc5

 asp.net web forms with existing asp.net mvc5

Create a Partial View  and introduce the Web Forms path source:

<iframe src="~/WebForms/WebForm1.aspx"</iframe>



                                             
                                                   

Uses Of Data Annotation Attributes To Control The Behavior of The Model Classes

Uses of Data Annotation Attributes 

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

namespace DhakaUniversity.Models
{
    public class Student
    {
        public int ID { get; set; }
         [Required]
         [StringLength(50)]
         [Display(Name = "Last Name")]
        public string LastName { get; set; }
         [Required]
         [StringLength(50, MinimumLength = 1, ErrorMessage = "First name cannot be longer than 50  characters.")]
         [Column("FirstName")]
         [Display(Name = "First Name")]
        public string FirstMidName { get; set; }
         [DataType(DataType.Date)]
         [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = True )]
         [Display(Name = "Enrollment Date")]
        public DateTime EnrollmentDate { get; set; }
         [Display(Name = "Full Name")]
        public string FullName
        {
            get
            {
                return LastName + ", " + FirstMidName;
            }
        }
        //A course can have any number of students enrolled in it, so the Enrollments navigation property is a collection:
        public virtual ICollection<Enrollment> Enrollments { get; set; }
    }
}

How To Remove Comma and Decimal point from decimal Type data in asp.net mvc5

To Remove comma and decimal point of decimal type property

For Example:
We want to get Value  54321    Instead of  54321.00 

Just Use The Attribute in The model class:

[DisplayFormat(DataFormatString = "{0}")]

e.g.
 public class Mn{

        [DisplayFormat(DataFormatString = "{0}")]

         public decimal NoOfInstallments{ get; set; }

}


And Also Use(carefully):

 TextBoxFor() Instead of  EditFor()

e.g.

 @Html.TextBoxFor(model => model.NoOfInstallments)

For Example:
To Get Value  54321    Instead of  54321.00

How To Create a Dynamic DropdownList in ASP.NET MVC5 Step by Step

Dynamic DropdownList in ASP.NET MVC5 Step By Step

Create Two DB Tables e.g.

1.Designstions
Colunns: DesignationID(PK,FK,numeric(6,0),not null)
                Designation (Varchar(50),null)


2.Persons
Columns: PersonID(PK,numeric(6,0),not null)
                 DesignationID(FK,numeric(6,0),not null)

Create The Models:

Designation.cs

{

   public decimal DesignationID { get; set; }
    public string Designation { get; set; }

}

Person.cs

{

 
    public decimal PersonID{ get; set; }
     [DisplayName("Designation")]
   public decimal DesignationID{ get; set; }
 
   public virtual  Designation designation { get; set; }

 

} 

PersonController.cs

{

  public class PersonController: Controller

{

     public ActionResult Index()
        {
            var  mamun= db.Persons.Include(t => t.designation );
            return View(mamun.ToList());
        }


 public ActionResult Create()
        {

          ViewBag.DesignstionID= new SelectList(db.Designstions, "DesignstionID", "Designstion");
            return View();
        }

  public ActionResult Edit(decimal id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Person person = db.Persons.Find(id);
            if (tblsalesperson == null)
            {
                return HttpNotFound();
            }
         ViewBag.DesignstionID= new SelectList(db.Designstions, "DesignstionID", "Designstion",person.DesignstionID);
                   return View(person);
        }

}

}

Create.cshtml & Edit.cshtml:

<div class="form-group">
                @Html.Label("Designation", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("DesignstionID")
                    @Html.ValidationMessageFor(model => model.DesignstionID)
                </div>
            </div>
To Add CSS class  'dropdownList' ,Use:

@Html.DropDownList("DesignstionID", (IEnumerable<SelectListItem>)ViewBag.DesignstionID, new { @class = "dropdownList" })  Instead Of that.

Index: 

 @foreach (var item in Model) 

{

    <td>
                    @Html.DisplayFor(modelItem => item.Designation.Designation)      
  </td> 

} 

To Get a Fanstatic One:

 

 

 

 

 

 

 

Static DropdownList in MVC 5 Razor

Static List of Items in a DropdownList using MVC 5 

Create.cshtml

 <div class="form-group">

                @Html.LabelFor(model => model.ProjectStatus, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                @{
                 List<SelectListItem> lstItems = new List<SelectListItem>();

                lstItems.Add(new SelectListItem
           
                {
                  Text = "Upcoming",
                  Value = "1",
                 //Selected=true
                });

               lstItems.Add(new SelectListItem
               {

               Text = "Ongoing",
               Value = "2"
       

               });
              lstItems.Add(new SelectListItem
                {

                Text = "Ready",
                  Value = "3"
         

                 });


                    }
                    @Html.DropDownList("ProjectStatus", lstItems)
                    @Html.ValidationMessageFor(model => model.ProjectStatus)
                </div>
            </div>

To add CSS Class 'dropdownList'  : 

@Html.DropDownList("ProjectStatus",listItems,new{@class="dropdownList"}) 

Index.cshtml 

<td>
    @{

  @(item.ProjectStatus.ToString()=="1"?"Upcoming":
(item.ProjectStatus.ToString()=="2"?"Ongoing":"Ready"))                
      }
  </td>

To Get:

 

 

How To Customize The Style of All The DropDownLists in ASP.NET MVC 5 Razor

To Customize The Style of All The DropDownLists  in ASP.NET MVC 5 Razor

 Just Add The Class To bootstrap.min.css

.col-md-10 select {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #848484;
    outline: 0;
    height: 25px;
    padding-left: 3px;
    margin-left: 5px
}

How To Add CSS Class For EditFor To Customize All The TextBoxes in ASP.NET MVC 5 Razor

To Add CSS Class For  EditFor To Customize All The TextBoxes in ASP.NET MVC 5 Razor

 Just Add The Class To bootstrap.min.css

.col-md-10 input{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #848484;
    outline: 0;
    height: 25px;
    padding-left: 3px;
    margin-left: 5px
}

JQuery UI Datepicker Popup Calendar with ASP.NET MVC 5

JQuery UI Datepicker in ASP.NET MVC 5 STEP BY STEP

STEP-1: 

Tools > Library Package Manager>Package Manager Console

PM> Install-Package jQueryUIHelpers.Mvc5 

  Concentrate on the Images carefully(double Click) for JQuery Datepicker in asp.net MVC 5:

STEP-2: 

In the BundleConfig file create a new bundle((for the jquery-ui.unobtrusive-x.y.z.js). It is also possible to add this to the jQuery UI bundle so it will always be included when jQuery UI is referenced. The following example demonstrates this.)

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

            "~/Scripts/jquery-ui-{version}.js",

            "~/Scripts/jquery-ui.unobtrusive-{version}.js"));

Make sure there is also a bundle with the required jQuery UI CSS files. The example below shows how to create one that uses only the JQuery UI datepicker, but all other CSS files can be included in the list.

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

        "~/Content/themes/base/jquery.ui.core.css",

        "~/Content/themes/base/jquery.ui.datepicker.css",

        "~/Content/themes/base/jquery.ui.theme.css")); 

Render the bundles on the layout page or the views that need them. Add the jQuery UI CSS files like so (you also have to define the bundle in BundleConfig):

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/themes/base/css")

And the JavaScript files: 

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/jqueryui")

If you use client side validation include the validation scripts before the jQuery UI Helpers script      

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/jqueryui")  

STEP-3:
The library adds a single extension method JQueryUI<TModel>()which serves as the entry point of the library

 

For example  a simple JQuery Datepicker can be like this:

             <div>

                <label for="date">Select a date:</label>
                @Html.JQueryUI().Datepicker("date")

             </div>

Detail example of a JQuery UI Datepicker in asp.net mvc5:

Model>model.cs

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    [DisplayName("Due Date")]
    public DateTime? InsDueDate { get; set; }


View > Create >create.cshtml

 <div class="form-group">
@Html.LabelFor(model => model.InsDueDate, new{@class = "control-label col-md-2"})
                
     <div class="col-md-10">


                    <label for="Install Due Date"></label>
                     @Html.JQueryUI().DatepickerFor(model => model.InsDueDate)
                     @Html.ValidationMessageFor(model => model.InsDueDate)
    
     </div>           
 </div>

To Get:

FOR More Than One Month

The jQuery UI widgets have many options to customize their behaviour. The jQuery UI Helpers library supports this with a fluent configuration API.

Another JQuery UI Datepicker in asp.net MVC 5 can be created like the below:

<div>

<label for="anotherDate">Select another date: </label>

@(Html.JQueryUI().Datepicker("anotherDate").MinDate(DateTime.MinValue).ShowButtonPanel(true)

.ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))

</div>

To Get:

JQuery Datepicker in asp.net MVC 5 With Snapshots  here

 

Getting Started with Entity Framework 6 Using MVC 5

Entity Framework 6 Using MVC 5

JQuery UI Datepicker In Asp.net MVC5

How to add asp.net web forms with existing asp.net mvc5 step by step

Uses Of Data Annotation Attributes To Control The Behavior of The Model Classes

 How To Remove Comma and Decimal point from decimal Type data in asp.net mvc5

Dynamic DropdownList in ASP.NET MVC5 Step By Step

Static DropdownList in MVC 5 Razor

How To Customize The Style of All The DropDownLists in ASP.NET MVC 5 Razor

How To Add CSS Class For EditFor To Customize All The TextBoxes in ASP.NET MVC 5 Razor 

Data Context Class And Connection String For asp.net mvc5

To Start Click here.