MVC - Fix Error - JavaScript runtime error: Object doesn't support property or method 'datepicker'

 Watch this example on YouTube

 

To fix it go to

App_Start folder 

and add to BundleConfig.cs     

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                       "~/Scripts/jquery-ui-{version}.js"));

 

@Html.TextBox( Additional information: Value cannot be null or empty.

 

 Watch this example on YouTube

 

To fix it replace

     @Html.TextBox("")

 with 

    @Html.TextBox(" ")

 

MVC - jQuery - Modify @Html.DisplayFor

 

 

 

Watch this example on YouTube

 

 

@model WebApplication1.Models.OrderCustomClass

@using (Ajax.BeginForm("", "",null, new { @id = "frm" }))
{
    <div class="ModifyClass">
        @Html.DisplayFor(x => x.or.Column3)
        <br />

        
    </div>  
}
<input type="button" id="btnSubmit1" onclick="ModifyDisplay()" value="Modify Display For" />

    @section Scripts{
    <script type="text/javascript">
        function ModifyDisplay() {
           $('.ModifyClass').html('some new value')
        }
    </script>
    }

Ajax - jQuery - Reset Form

 Watch this example on YouTube

 

@model WebApplication1.Models.OrderCustomClass

@using (Ajax.BeginForm("", "",null, new { @id = "frm" }))
{
    <div>
        @Html.TextBoxFor(x => x.or.Column1)
        <br />
        @Html.TextBoxFor(x => x.or.Column2)
        <br />
        
    </div>  
}
<input type="button" id="btnSubmit1" onclick="Reset()" value="Reset Form" />

    @section Scripts{
    <script type="text/javascript">
        function Reset() {
            $('#frm')[0].reset();
        }
    </script>
    }

MVC - jQuery - Redirect to another controller

Watch this example on YouTube

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
    <div>
 
    </div>  
}
<input type="button" id="btnSubmit1" onclick="Redirect()" value="Redirect" />

    @section Scripts{
    <script type="text/javascript">
        function Redirect() {
            var url = "@Url.Action("Login", "Account")";
            window.location.pathname = url;
        }
    </script>
    }

jQuery - call jQuery on dropdownlist change

 Watch this example on YouTube

 

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
  @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod, "ProductID", "Name", Model.prod), "")

}

   

    @section Scripts{
    <script type="text/javascript">
        $("#or_ProductID").change(function () {
            alert("changed")
        });
    </script>
    }

jQuery - modify style (CSS) on the fly

 Watch this example on YouTube

 

1. CSS

 

.red{
    color: red;
    font-size:40px;
}

 

2. View

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
    @Html.Label("some text", new { @class="red" , @id ="lbl"})

}

<input type="submit" id="btn2" value="Modify CSS using jQuery" onclick="ModifyCSS()" />

@section Scripts{
<script type="text/javascript">
    function ModifyCSS() {
        var $test = $("#lbl").closest(".red");
        $test.css('font-size', '10px');
    }
</script>
}
 

jQuery - How to hide button

 

 

Watch this example on YouTube

 

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{


}
<input type="submit" id="btnSubmit1" value="Button1" />
<input type="submit" id="btnSubmit2" onclick="HideButton()" value="Hide Button1" />

@section Scripts{
<script type="text/javascript">
    function HideButton() {
        $("#btnSubmit1").hide();
    }
</script>
}

jQuery - Get data from hiden filed in table row

 

 Watch this example on YouTube

 

{
    <table>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Address</th>
            <th></th>
        </tr>
        <tr>
            <td class="fn">John</td>
            <td class="ln">Lennon</td>
            <td class="add">1 Main Street</td>
            <td>
                <input type="hidden" id="hid" value="10" />
                <input type="submit" value="EDIT" name="btn" id="btnEdit" onclick="EditUser(this);" />
            </td>
        </tr>
        <tr>
            <td class="fn">Jimmy</td>
            <td class="ln">Hendrix</td>
            <td class="add">2 Main Street</td>
            <td>
                <input type="hidden" id="hid" value="20" />
                <input type="submit" value="EDIT" name="btn" id="btnEdit" onclick="EditUser(this);" />
            </td>
        </tr>
        <tr>
            <td class="fn">Miles</td>
            <td class="ln">Davis</td>
            <td class="add">3 Main Street</td>
            <td>
                <input type="hidden" id="hid" value="30" />
                <input type="submit" value="EDIT" name="btn" id="btnEdit" onclick="EditUser(this);" />
            </td>
        </tr>
    </table>
 
}

@section Scripts{
<script type="text/javascript">
    function EditUser(e) {
        debugger;
        var row = $(e).closest('tr');
        var UserID = row.find($("[id*=hid]")).val();
        var FirstName = row.find(".fn").text();
        var LastName = row.find(".ln").text();
        var Address = row.find(".add").text();
    }
</script>
}

 

jQuery - Functions that returns string or any other value.

 Watch this example on YouTube

 

@using (Html.BeginForm("Index", "Home"))
{
    
 
}

@section Scripts{
<script type="text/javascript">
    $(document).ready(function () {
       
        function ReturnSomething() {
            return 'Something';
        }
        var res = ReturnSomething();
        alert(res);
    });
</script>
}
 

 

jQuery - find ID of clicked control

 Watch this example on YouTube

 

 

@using (Html.BeginForm("Index", "Home"))
{
    
    <input type="submit" id="btnSubmit1"  value="Submit" />
    <input type="submit" id="btnSubmit2" value="Submit" />
}

@section Scripts{
<script type="text/javascript">
    $(document).ready(function () {
        jQuery('input[type=submit]').click(function(event){
     
                alert($(this).attr('id'))
            });
        });
</script>
} 

jQuery - How to clear (empty) table (remove all TRs)

 

 Watch this example on YouTube

 

 @using (Html.BeginForm("Index", "Home"))
{
    <div>
        <table id="tbl">
            <tr>
                <td>abc</td>
                <td>abc</td>
                <td>abc</td>
            </tr>
            <tr>
                <td>abc</td>
                <td>abc</td>
                <td>abc</td>
            </tr>
        </table>
    </div>
    <input type="button" id="btnSubmit" value="Submit" />
}

@section Scripts{
<script type="text/javascript">
    $(document).ready(function () {
            $("#btnSubmit").click(function () {
                $("#tbl").empty();
            });
        });
</script>
}

jQuery - Generate HTML Table

 

 Watch this example on YouTube

 

 

@using (Html.BeginForm("Index", "Home"))
{
}

@section Scripts{
    <script type="text/javascript">
        var tbl = $("<table>").attr("id", "tbl1").addClass("table");
        var tr1 = $("<tr>").append($("<th>").append($("<b>").text("Some Text")))
            .append($("<th>").append($("<b>").text("Some other text")))
         .append($("<th>").append($("<b>").text("even more text")));
        var tr2 = $("<tr>").append($("<td>").append($("<b>").text("row 1 column 1")).append($("<span>").attr("id", "someValud")))
            .append($("<td>").append($("<b>").text("row 1 column 2")).append($("<span>").attr("id", "ID2")))
         .append($("<td>").append($("<b>").text("row 1 column 3")).append($("<span>").attr("id", "ID3")));
        tbl.append(tr1);
        tbl.append(tr2);
        $(document.body).append(tbl);
    </script>
}

jQuery - How to disable control (textbox) in seconds

 Watch this example on YouTube

 

 

    @Html.TextBoxFor(x=>x.or.Column3, new { @id="myID"})
    <input type="button" id="btnSubmit" value="Submit" />   
   
}


@section Scripts{
    <script type="text/javascript">

        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                $("#myID").prop("disabled", true);
            });
            
        });

    </script>
    }

jQuery - how to empty (clear) textbox

  

 

Watch this example on YouTube

 

 

   @Html.TextBoxFor(x=>x.or.Column3, new { @id = "myID"})
    <input type="submit" id="btnSubmit" value="Submit" />   
   
}


@section Scripts{
    <script type="text/javascript">

        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                $("#myID").val('');
            });
            
        });

    </script>
    }

jQuery - 2 ways to call button click function

 Watch this example on YouTube

 

    <input type="submit" id="btnSubmit" value="Submit" />   
   
}


@section Scripts{
    <script type="text/javascript">

        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                alert("in first function")
            });
            $(document).on("click", "#btnSubmit", function () {
                alert("in second function")
            })
        });

    </script>
    }

MVC - jQuery - Remove Class from control

 Watch this example on YouTube

 

1. View

     @Html.LabelFor(x => x.or.test,new { @id="someID", @class="red"});
   
}


@section Scripts{
    <script type="text/javascript">
 

        $(document).ready(function () {
            $("#someID").removeClass("red")
        });
    </script>
    }

2. CSS 

.red{
    color: red;
    font-size:40px;
}

MVC - jQuery - Add Class to the control

 Watch this example on YouTube

 

 

1. View

 

    @Html.LabelFor(x => x.or.test,new { @id="someID"});
   
}


@section Scripts{
    <script type="text/javascript">
 

        $(document).ready(function () {
             $("#someID").addClass("red")    
        });
    </script>
    }

 

2. CSS

.red{
    color: red;
    font-size:40px;
}

MVC - Fix Error - The type or namespace name 'Caching' does not exist in the namespace 'System.Runtime'

Watch this example on YouTube

 

 

The type or namespace name 'Caching' does not exist in the namespace 'System.Runtime' (are you missing an assembly reference?)   

To fix it add reference to System.Runtime.Caching

MVC - Fix Error - The type or namespace name 'Http' does not exist in the namespace 'System.Web'

Watch this solution on YouTube  

 

  The type or namespace name 'Http' does not exist in the namespace 'System.Web' (are you missing an assembly reference?) To fix it install NuGet Install-Package Microsoft.AspNet.WebApi.Core

MVC - How to make Drop Down List required field

 Watch this example on YouTube

 

1. Model

using System.ComponentModel.DataAnnotations;
namespace WebApplication1.Models
{
    using System;
    
    public partial class SelectOrders_Result
    {
        public int OrderID { get; set; }

        [Required]
        public Nullable<int> ProductID { get; set; }
        public Nullable<int> Qty { get; set; }
        public bool test { get; set; }
        public Nullable<bool> Column1 { get; set; }
        public Nullable<int> Column2 { get; set; }
        public string Column3 { get; set; }
    }
}
 

 

2. View

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
  @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod, "ProductID", "Name", Model.prod), "")
 @Html.ValidationMessageFor(x=>x.or.ProductID)
    <input type="submit"  value="Submit" />
}

MVC - Populate Drop Down Lists with months and years

 Watch this example on YouTube

 

1. Model

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

namespace WebApplication1.Models
{
    public class DropDownListSample
    {
        public IEnumerable<SelectListItem> Months
        {
            get
            {
                int curMonth = DateTime.Now.Month;
                return Enumerable.Range(1, 12).Select(x => new SelectListItem { Value = x.ToString("0"), Text = DateTimeFormatInfo.CurrentInfo.GetMonthName(x), Selected = (x == curMonth) });
            
            }
        }
        public IEnumerable<SelectListItem> Years
        {
            get
            {
                int curYear = DateTime.Now.Year;
                return Enumerable.Range(DateTime.Now.Year - 10, 11).Select(x => new SelectListItem { Value = x.ToString("0"),Text = x.ToString("0"), Selected = (x == curYear) }).Reverse();
            }
        }
    }
}

 

2. Controller

        public ActionResult Index()
        {
            var model = new DropDownListSample();
            return View(model);
        }

 

3. View

 

@model WebApplication1.Models.DropDownListSample

@using (Html.BeginForm("Index", "Home"))
{
  @Html.DropDownListFor(x => x.Months , Model.Months, "", new { @id = "ddlMonth"})
    @Html.DropDownListFor(x =>x.Years, Model.Years, "", new { @id = "ddlYear"})
}

MVC - Fix Error - The type or namespace name 'SelectListItem' could not be found (are you missing a using directive or an assembly reference?)

 Watch this solution on YouTube

 The type or namespace name 'SelectListItem' could not be found (are you missing a using directive or an assembly reference?)   

To fix this error add the following using

MVC - jQuery - How to add ID to drop down list and access drop down list by ID

 

 Watch this example on YouTube

 

 

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"), new { @id = "myID"})  
 
}
<input type="button" onclick="DoSomething()"   value="Submit" />

@section Scripts{
    <script type="text/javascript">
        function DoSomething() {
            alert($("#myID option:selected").text())
        }
      
        $(document).ready(function () {
       
      
        });
    </script>
    }

MVC - jQuery - get selected text from drop down list in seconds

 Watch this example on YouTube

 

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"), new { @id = "myID" })  
}
<input type="submit" class="submit" onclick="DoSomething()" value="Submit" />

@section Scripts{
    <script type="text/javascript">

        function DoSomething() {
            alert($("#myID option:selected").text())
        }

        $(document).ready(function () {
        
      
        });
    </script>
    }

 

MVC - jQuery - Get selected value from drop down list in few seconds

 

 Watch this example on YouTube

 

 

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"), new { @id = "myID" })

 
}
<input type="submit" class="submit" onclick="DoSomething()" value="Submit" />

@section Scripts{
    <script type="text/javascript">

        function DoSomething() {
            alert($("#myID").val())
        }

        $(document).ready(function () {
        
      
        });
    </script>
    }

MVC - get selected value from disabled drop down list

 

 Watch this example on YouTube

to view selected value of disabled drop down list in controller 

add it to hidden in View 

@using (Html.BeginForm("Index", "Home"))
{
    @Html.HiddenFor(x => x.or.ProductID)
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"), new { @id = "myID" })

    <input type="submit" class="submit" value="Submit" />

}

MVC - How to get Selected text from Drop Down List in Control

 Watch this example on YouTube

 

1. Model

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

namespace WebApplication1.Models
{
    public class OrderCustomClass
    {
        public SelectOrders_Result or { get; set; }
        public IEnumerable<SelectProducts_Result> prod { get; set; }

        public string SelectedValue { get; set; }
    }
}

 

2. View

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
    @Html.HiddenFor(x=>x.SelectedValue)
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"), new { @id = "myID" })

    <input type="submit" class="submit" value="Submit" />

}

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $(".submit").click(function (evt) {
                $("#SelectedValue").val($("#myID option:selected").text());
            });
        });
    </script>
    }

 

3. Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        CompanyEntities db = new CompanyEntities();




        public ActionResult Index()
        {
            OrderCustomClass model = new OrderCustomClass();
            model.or = new SelectOrders_Result();
            model.prod = db.SelectProducts();
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(OrderCustomClass model)
        {
            model.or = new SelectOrders_Result();
            model.prod = db.SelectProducts();
            return View(model);
        }



        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

MVC - jQuery - select specified item in drop down list using jQuery (in seconds!)

 Watch this example on YouTube

 

 

 @model WebApplication1.Models.OrderCustomClass




@using (Html.BeginForm("Index", "Home"))
{
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"), new { @id = "myID" })

    
}
<input type="submit" onclick="DoSomething()" value="Add empty value" />

@section Scripts{
    <script type="text/javascript">
        function DoSomething() {
            var myDDL = $('#myID');
            myDDL[0].selectedIndex = 2;
        }
    </script>
    }
 

MVC - jQuery - Check if strings contains specified text (substring)

 Watch this example on YouTube

 

@model WebApplication1.Models.OrderCustomClass


@using (Html.BeginForm("Index", "Home"))
{
    @Html.TextBoxFor(x=>x.or.Column1, new { @id = "test" })

}
<input type="submit" onclick="DoSomething()" value="check if string exists" />
@section Scripts{
    <script type="text/javascript">
        function DoSomething() {
            var test = $("#test").val();
            if (test.indexOf("abc") >= 0) {
                alert("found")
            }
            else {
                alert ("not found")
            }
        }
    </script>    
}
 

MVC - jQuery - how to add new empty line to drop down list using java script

 

 Watch this example on YouTube

@model WebApplication1.Models.OrderCustomClass

@using (Html.BeginForm("Index", "Home"))
{
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"),new { @id = "myID" })

    
}
<input type="submit" onclick="DoSomething()" value="Add empty value" />

@section Scripts{
    <script type="text/javascript">
        function DoSomething() {
            $("#myID").prepend("<option value=''></option>");
        }
    </script>
    }
 

MVC - JavaScript - jQuery - How to clear drop down list using javascript

 

 Watch this example on YouTube

 

 @using (Html.BeginForm("Index", "Home"))
{
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"), new { @id = "myID" })

    
}
<input type="submit" onclick="DoSomething()" value="Clear Drop Down List" />

@section Scripts{
    <script type="text/javascript">

         function DoSomething(){
            $("#myID").empty();
        }
    </script>
    }

MVC - Modify Drop Down List width

 

 Watch this example on YouTube

 

 

1. View

@using (Html.BeginForm("Index", "Home"))
{
    @Html.DropDownListFor(x=>x.or.ProductID, new SelectList(Model.prod,"ProductID", "Name"), new { @id = "myID" })
}
 

 

2. CSS

#myID{
    width:2em;
}

MVC - validate email - ensure it is from specified domain address

 

 Watch this example on YouTube:

 

1. Model

using System.Web;
using System.ComponentModel.DataAnnotations;

namespace WebApplication1.Models
{
    public class User
    {
        public string Name { get; set; }

        [RegularExpression(@"^[a-zA-Z0-9._%+-]+(@abc\.ca|@abc\.com)$", ErrorMessage ="{0} - invalid format (must be @abc.com)")]
     public string Email { get; set; }
    }
} 

2. View

@model WebApplication1.Models.User

@using (Html.BeginForm("Index", "Home"))
{
    @Html.TextBoxFor(x => x.Email)
    @Html.ValidationMessageFor(x => x.Email)

    <input type="submit" value="save" />
}

3. Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            User model = new Models.User();   
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(User model)
        {
            if (ModelState.IsValid)
            {

            }
            return View(model);
        }

MVC - jQuery - get value (text) of clicked button

 Watch this example on YouTube

 

 

1. View 

<div>
    <input type="submit" onclick="DoSomething()" value="Save" />
    <input type="submit" onclick="DoSomething()" value="Cancel" />
</div>

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            jQuery('input[type=submit]').click(function (event) {
                if (this.value == "Cancel") {
                    alert("CANCEL");
                }
                if (this.value == "Save") {
                    alert("SAVE");
                }
            });
        });
    </script>    
}