DML opreation in knockout and MVC

controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication14.Models;
using System.Data;
namespace MvcApplication14.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetData()
        {
            using(TestEntities obj=new TestEntities())
            {
                return Json(obj.EMP4.ToList(),JsonRequestBehavior.AllowGet);
            }
         
        }
        public JsonResult update(EMP4 emp)
        {
            using (TestEntities obj = new TestEntities())
            {
                obj.Entry(emp).State = EntityState.Modified;
                obj.SaveChanges();
                return Json("Data updated", JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult delete(EMP4 emp)
        {
            using (TestEntities obj = new TestEntities())
            {
                obj.Entry(emp).State = EntityState.Deleted;
                obj.SaveChanges();
                return Json("Data deleted", JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult save(EMP4 emp)
        {
            using (TestEntities obj = new TestEntities())
            {
                obj.Entry(emp).State = EntityState.Added;
                obj.SaveChanges();
                return Json("Data saved", JsonRequestBehavior.AllowGet);
            }
        }

    }
}


view

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/knockout-2.2.0.js"></script>
<table align="center">
    <tr>
        <td>EID</td>
        <td>:</td>
        <td><input type="text" id="tb" data-bind="value:EMP.EID" /></td>
    </tr>
    <tr>
        <td>NAME</td>
        <td>:</td>
        <td><input type="text" data-bind="value:EMP.NAME" /></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <input TYPE="button" value="Submit" data-bind="click:$root.save" />&nbsp;
            <input type="button" value="Update" data-bind="click:$root.update" />&nbsp;
            <input type="button" value="Reset" data-bind="click:$root.reset" />
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <table border="1" cellpadding="0" cellspacing="0" >
                <thead>
                    <tr>
                        <th>EID</th>
                        <th>NAME</th>
                        <th>UPDATE</th>
                        <th>DELETE</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach:list">
                    <tr>
                        <td data-bind="text:EID"></td>
                        <td data-bind="text:NAME"></td>
                        <td><a href="#" style="text-decoration:none" data-bind="click:$root.edit">Edit</a></td>
                        <td><a href="#" style="text-decoration:none" data-bind="click:$root.del">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
<script type="text/javascript">
    $(function () {
        $.ajaxSetup({cache: false});
        function EMP()
        {
            var self = this;
            self.EID = ko.observable();
            self.NAME = ko.observable();
        }
        function x()
        {
            var self = this;
            self.list = ko.observableArray();
            self.EMP = new EMP();
            y();
            self.save = function ()
            {
               
                $.getJSON('@Url.Action("save")', { EID: self.EMP.EID(), NAME: self.EMP.NAME() }, function (data) {
                    alert(data);
                    y();
                    z();
                });
            }
            self.update = function () {
                $.getJSON('@Url.Action("update")', { EID: self.EMP.EID(), NAME: self.EMP.NAME() }, function (data) {
                    alert(data);
                    y();
                    z();
                });
            }
            self.reset = function () {
                z();

            }
            self.edit = function (m) {
                self.EMP.EID(m.EID);
                self.EMP.NAME(m.NAME);
            }
            self.del = function (m) {
                if (confirm('Do you want to delete it ?'))
                {
                    $.getJSON('@Url.Action("delete")', m, function (data) {
                        alert(data);
                        y();
                        z();
                    });
                }
             
               
            }
            function z()
            {
                self.EMP.EID('');
                self.EMP.NAME('');
                $('#tb').focus();
            }
            function y() {
                $.getJSON('@Url.Action("GetData")', null, function (data) {
                    self.list(data);
                });
            }
        }
        ko.applyBindings(new x());
    });
</script>

Example of multiple select check box list in MVC

Press Me

Add 3 files in bundel
 "~/Scripts/core.js",
 "~/Scripts/widget.js",
 "~/Scripts/multiselect.js"
Add one css file in
jquery.multiselect.css


@model MvcApplication5.ViewModel.EmpVM

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EmpVM</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.CID)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.CID, new SelectList(Model.COUNTRYD,"CID","CNAME"), "Select", new { style = "width:200px"  })
            @Html.ValidationMessageFor(model => model.CID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.SID)
        </div>
        <div class="editor-field">
            <div>
                @Html.ListBoxFor(model => model.SID, new MultiSelectList(Model.STATED, "SID", "SNAME"), new { size = 3, style = "width:200px", @id = "ddl",@name="ddl" })
            </div>
            @Html.ValidationMessageFor(model => model.SID)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $('#ddl').multiselect();
        $('#CID').change(function(){
            $.getJSON('@Url.Action("Get")', { CID: $('#CID :selected').val() }, function (data)
            {
                $("#ddl").empty();
                $.each(data, function (i, j) {
                    $("#ddl").append($('<option>').text(j.SNAME).attr("value", j.SID));
                });
                $("#ddl").multiselect();
                $("#ddl").multiselect("refresh");
            });
        });
       
    });
    </script>
}

Some example of the event
---------------------------------------------------------------------------------------------------------------------
$('.ui-widget').multiselect("widget").find("input:checked").length

  $("#lstWorkgroup").multiselect({
        click: function (event, ui) {
            var count = $("#lstWorkgroup").multiselect("getChecked").map(function () {
                return this.value;
            }).get();
            if (count.length > 0)
            {

            }
        }
    });
$("#lstWorkgroup").multiselect({
        checkAll: function (event, ui) {
            $('#errormsgWorkgroup').empty();
        }
    });

Auto complete in MVC

autocomplete example
you have to add jquery libary file in bundle
  "~/Scripts/jquery-ui-1.8.24.js"


@model MvcApplication6.ViewModel.EMP

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EMP</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.EID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EID)
            @Html.ValidationMessageFor(model => model.EID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NAME)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NAME)
            @Html.ValidationMessageFor(model => model.NAME)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}



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


<script type="text/javascript">
    $(function () {


        $("#NAME").autocomplete({
            minLength: 0,
            source: '@Url.Action("Gets")',
            focus: function () {
            },
            select: function (event, ui) {
            }
        });


    });
</script>

}

controler

 public JsonResult Gets(string term)
        {
            using (TestEntities obj = new TestEntities())
            {
                return Json(obj.EMP1.Where(m => m.NAME.StartsWith(term)).Select(n => n.NAME).ToList(), JsonRequestBehavior.AllowGet);
            }
        }

Example of cascading drop down with multiselect checkbox in MVC

@model MvcApplication3.ViewModel.CSVM

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>CSVM</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.CID)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(m => m.CID, new SelectList(Model.CDETAILS, "CID", "CNAME"), "Select", new {@style="width:180px" })
            @Html.ValidationMessageFor(model => model.CID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.SIDDETAILS)
        </div>
        <div class="editor-field">
            <div id="dv">
                @Html.ListBoxFor(model => Model.SID, new MultiSelectList(Model.SDETAILS, "SID", "SNAME"))
            </div>
            @Html.ValidationMessageFor(model => model.SIDDETAILS)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $('#SID').multiselect();
        $('#CID').change(function ()
        {
            $.getJSON('@Url.Action("Gets")', { CID: $('#CID').val() }, function (data)
            {
                $('#dv').html("<select id='scid'></select>")
                $.each(data, function (i, j)
                {
                    $('#scid').append($('<option>').text(j.SNAME).attr("value", j.SID));
                });
                $('#scid').multiselect();
                $('#scid').multiselect("uncheckAll");
            });
         
        });
    });
    </script>
}

WPF VIDEO TUTORIALS

Press Me
PressMe1
PressMe2
PressMe3
PressMe4
PressMe5

jquery multi select link

Press Me
Press Me1

how to select a value in drop down in jquery

 $('#ddlClient').prop('selectedIndex', 1);