Thursday, March 20, 2014

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

Wednesday, March 19, 2014

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:

 

 

Wednesday, March 5, 2014

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

}

Tuesday, February 25, 2014

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

The jQuery UI Helpers entry point.

 

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))



Getting Started with Entity Framework 6 Using MVC 5