Greg Chu Technical History

http://forums.asp.net/t/1607440.aspx

Re: Debugging Javascript VS 2010 BreakPoints

Sep 29, 2010 01:05 PM|LINK

Best way to debug is using debugger; keyword. Simply add this keyword wherver you want to debug the script and run the application in debug mode

it also works in JS files

check below

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        function GetDimensions() {
            debugger;
            var txt = document.getElementById("<%=TextBox1.ClientID %>");
            alert("height " + txt.style.height);
            alert("width " + txt.style.width);
        }
    </script>
</head>
<body>
    <form runat="server">
    <asp:TextBox ID="TextBox1" runat="server" Height = "10" Width = "150"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick = "return GetDimensions()" />
    </form>
</body>
</html>

http://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine

https://www.nuget.org/packages/Bootstrap.Datepicker

Install-Package Bootstrap.Datepicker

http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4

In Solution Explorer, expand the Views folder, expand the Shared folder, and then right-click the Views\Shared\EditorTemplates folder.
Click Add, and then click View. The Add View dialog box is displayed.
In the View name box, type "Date". (http://www.aubrett.com/InformationTechnology/WebDevelopment/MVC/DatePickerMVC5.aspx, the view name part is not clear)
Select the Create as a partial view check box. Make sure that the Use a layout or master page and Create a strongly-typed view check boxes are not selected.

Click Add. The Views\Shared\EditorTemplates\Date.cshtml template is created.

below is copied from the reference web pages in case the website not available.

@model Nullable<DateTime>

@{

    DateTime dt = DateTime.Now;

    if (Model != null)

    {

       dt  = (System.DateTime) Model;

    }

    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "form-control datecontrol", type = "date"  })

}

move to our data model. In the case of a user registration form, this is likely going to be found in the "RegisterViewModel" class of "~/Models/AccountViewModels". We want to be sure that the data annotation is set to a type of DateTime as follows:

[Display(Name="Birth Date")]

 [Required]

[DataType(DataType.DateTime)]

public DateTime BirthDate { get; set; }


we move to the "Register.cshtml" view located under "~/Views/Account". The Birthdate field may or may not contain a textbox control. Let's change that just a bit to look like this:
<div class="form-group">

 @Html.LabelFor(m => m.BirthDate, new { @class = "col-md-2 control-label" })

   <div class="col-md-10"> @Html.EditorFor(m => m.BirthDate)

  </div>

  </div>


Now, we will add a script to our "~/Scripts" directory and name it "DatePickerReady.js". Inside this script file, place the following code:
 if (!Modernizr.inputtypes.date) {

    $(function () {

        $(".datecontrol").datepicker();

    });

}


Finally, we will add these javascript files to our "BundleConfig.cs" file located in "~/App_Start". Note that this is how we are getting these scripts loaded in this example. This method will make them global to the project. If only rarely using a datepicker component, you may want to load them only for individual views.

Change the default bootstrap and css bundles to look like this:
 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

                      "~/Scripts/bootstrap.js",

                      "~/Scripts/respond.js",

                      "~/Scripts/bootstrap-datepicker.js",

                      "~/Scripts/DatePickerReady.js"

                      ));



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

                      "~/Content/bootstrap.css",

                      "~/Content/bootstrap-datepicker3.css",

                      "~/Content/site.css"

                      ));

Greg Chu Technical History

Tuesday, March 3, 2015

debug javascript in Visual studio

Re: Debugging Javascript VS 2010 BreakPoints

Wednesday, February 25, 2015

General information of asp.net mvc

Date picker MVC 5

Friday, February 20, 2015

ASP.NET - Date Picker Server Contro