Konckout js

It is the library for having incredible feature like automatically refresh UI path .
It has the main part is observables . 

Edit grid view in MVC with Knockoutjs

@using System.Web.Script.Serialization

@model IOrderedEnumerable<iAtHealth.Model.DailyRoutine>
@{
    ViewBag.MainTitle = "Daily Routine";
    ViewBag.Title = "DailyRoutine";
}
@section Header {
    @Html.ActionLink("Back", "DailyRoutine", "DailyRoutine", null, new { data_icon = "arrow-l", data_rel = "back", data_ajax = "false" })
    <h1>@ViewBag.MainTitle</h1>
}
<form id="form1" method="post">
    <div id="divDailyRoutineContainer">
    <div style="margin-top: 30px">
        <div class="ui-grid-d">
            <div class="ui-block-a"></div>
            <div class="ui-block-b"><label for="spinner">Height<span class="ui-astrisk">*</span>:</label></div>
            <div class="ui-block-c">
             
                <input type="number" id="height" data-bvalidator-modifier="trim" name="value" data-bind="value: Height" value="float" step=".1" Maxlength="5" data-bvalidator="number,required">
            </div>
            <div class="ui-block-d" style="">
                <table>
                    <tr>
                        <td>
                            <input type="radio" name="radio" id="inches" class="radio2" value="" checked="checked" onchange="mycalcHeight()" style="padding-left: 0px">
                            <label for="inches">inches</label>
                        </td>
                        <td>
                            <input type="radio" name="radio" id="meters" class="radio2" value=""  onchange="mycalcHeight()">
                            <label for="meters">metres</label>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="ui-block-e"></div>
        </div>
        <div class="ui-grid-d">
            <div class="ui-block-a"></div>
            <div class="ui-block-b"><label for="spinner">Weight<span class="ui-astrisk">*</span>:</label></div>
            <div class="ui-block-c">
                <input type="number" id="weight" name="value" data-bind="value: Weight" value="" step=".1"  data-bvalidator-modifier="trim" data-bvalidator="number,required"></div>
            <div class="ui-block-d" style="">
                <table>
                    <tr>
                        <td>
                            <input type="radio" name="radioo" id="pounds" value="pounds" checked="checked" onchange="mycalcWeight()" style="padding-left: 0px">
                            <label for="pounds">pounds</label>
                        </td>
                        <td>
                            <input type="radio" name="radioo" id="kg" value="kg" onchange="mycalcWeight()">
                            <label for="kg">kg</label>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="ui-block-e"></div>
        </div>
        <div class="ui-grid-d">
            <div class="ui-block-a"></div>
            <div class="ui-block-b"><label for="spinner">Pulse<span class="ui-astrisk"></span>:</label></div>
            <div class="ui-block-c">
                <table>
                    <tr>
                        <td>
                            <label id="Label1"></label>
                            <input type="number" id="pulse1" data-bind="value: Pulse_40_120" name="pulse1" min="40" max="120" style="width:95px;">
                        </td>
                        <td>
                            <label id="Label2"></label>
                            <input type="number" id="pulse2" data-bind="value: Pulse_60_160" name="pulse2" min="60"  max="160" style="width:95px;">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="ui-block-d" style=""></div>
            <div class="ui-block-e">
                @* <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
          <img src="~/Content/images/facebookimg.jpg" width="75px;" height="45px;" style="margin-left: -8px;" alt="Share on Facebook">
          </a>*@
            </div>
        </div>
        <div class="ui-grid-d">
            <div class="ui-block-a"></div>
            <div class="ui-block-b"><label for="spinner">Temperature<span class="ui-astrisk">*</span>:</label></div>
            <div class="ui-block-c">
                <input type="number" id="temp1" name="temp1" data-bind="value: Temperature" min="98" max="109" data-bvalidator="number,required">
             
            </div>
            <div class="ui-block-d" style=""></div>
            <div class="ui-block-e">
                @*  <a href="https://accounts.google.com/ServiceLogin?service=oz&passive=1209600&continue=https://plus.google.com/up/?type%3Dst%26client%3D1%26gpsrc%3Dwidget%26parent%3Dhttps://apis.google.com%26proxy%3DI0_1387870476073%26rsz%3D1%26hl%3Den%26partnerid%3Dwidget&hl=en" target="_blank">
          <img src="~/Content/images/g+.jpg" style="margin-top:5px;" width="40px;" height="25px;" alt="Share on gmail">
          </a>*@
            </div>
        </div>
        <div class="ui-grid-d">
            <div class="ui-block-a"></div>
            <div class="ui-block-b"><label for="spinner">BloodPressure<span class="ui-astrisk"></span>:</label></div>
            <div class="ui-block-c">
                <table>
                    <tr>
                        <td>
                            <label id="Number1"></label>
                            <input type="number" data-bind="value: BloodPressure_80_180" id="bp1" name="bp1" min="80" max="180" style="width:95px;">
                        </td>
                        <td>
                            <label id="Number4"></label>
                            <input type="number" data-bind="value: BloodPressure_60_110" id="bp2" name="bp2" min="60" max="110" style="width:95px;">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="ui-block-d" style=""></div>
            <div class="ui-block-e">
                @* <a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&text=Twitter%20buttons&tw_p=tweetbutton&url=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&via=twitter" target="_blank">
          <img src="~/Content/images/twit.jpg" width="60px;" height="25px;" alt="Share on Twitter">
          </a>*@
            </div>
        </div>
        <div class="ui-grid-d">
            <div class="ui-block-a"></div>
            <div class="ui-block-b"><label for="spinner">BMI:</label></div>
            <div class="ui-block-c">
                <input type="text" id="bmi" data-bind="value: BMI"></div>
            <div class="ui-block-d" style=""></div>
            <div class="ui-block-e"></div>
        </div>
        <div>&nbsp;</div>
        <div></div>
        <div class="ui-grid-d">
            <div class="ui-block-a"></div>
            <div class="ui-block-b">
                <input type="submit" value="Submit" data-bind="click: SaveChanges">
            </div>
            <div class="ui-block-c">
           
                <input type="button" value="Cancel" >
            </div>

            <div class="ui-block-d"></div>
            <div class="ui-block-e"></div>
        </div>
        <div class="ui-grid-d">
            <div class="ui-block-a"></div>
            <div class="ui-block-b">
         
            </div>
            <div class="ui-block-c">
           
         
            </div>

            <div class="ui-block-d"></div>
            <div class="ui-block-e"> @*<input id="btnHistory" type="button" value="Show History"  />*@
                @*  <div class="ui-button"> @Html.Action("Index", "DailyRoutine");</div> *@
                <a href="@Url.Action("Index","DailyRoutine")"  data-ajax="false" data-role="button">Show History</a>
            </div>
        </div>
    </div>
</div>
 

</form>

<div id="divDailyRoutine">
    <div>   @* it for ko *@
            <table style="width: 100%">
                <tr>
                    <td>
                        <div>
                            <table style="width: 100%;">
                                <thead>
                                    <tr>
                                          <th class="users_gridhead" style="width: 2%; border: 1px solid;"></th>
                                        <th class="users_gridhead" style="width: 2%; border: 1px solid;"></th>
                                        <th class="users_gridhead" style="width: 10%; border: 1px solid;">Height</th>
                                        <th class="users_gridhead" style="width: 10%; border: 1px solid;">Weight</th>
                                        <th class="users_gridhead" style="width: 10%; border: 1px solid;">Pulse 20-120</th>
                                        <th class="users_gridhead" style="width: 10%; border: 1px solid;">Pulse 60-160</th>
                                        <th class="users_gridhead" style="width: 10%; border: 1px solid;">Temperture</th>
                                        <th class="users_gridhead" style="width: 10%; border: 1px solid;">Blood Pressure 80-100</th>
                                        <th class="users_gridhead" style="width: 10%; border: 1px solid;">Blood Pressure 60-110</th>
                                        <th class="users_gridhead" style="width: 10%; border: 1px solid;">BMI(Body Mass Index)</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div style="height: 485px; overflow: auto;">
                            <table class="users" style="width: 100%;">
                                <tbody data-bind="foreach: DailyRoutineList">
                                    <tr data-bind="css: $index() % 2 == 0 ? 'even' : 'odd'" style="height: 25px;">
                                          <td class="tacenter" style="width: 2%; border: 1px solid;">
                                            <img src="@Url.Content("/Content/themes/anniversary/images/icon-edit.png")" title="Edit Record" style="cursor: pointer; width: 0.8em;" data-bind="click: $parent.EditUser" />
                                     
                                                 </td>
                                        <td class="tacenter" style="width: 2%; border: 1px solid;">
                                            <img src="@Url.Content("/Content/themes/anniversary/images/trash.png")" title="Delete Record" data-bind="click: $parent.RemoveRow" style="cursor: pointer; width: 0.8em;" />
                                        </td>
                                     
                                        <td style="width: 10%; border: 1px solid;">
                                            <div class="bodytext taleft" style="width: 20%; word-wrap: break-word;" data-bind="text: Height"></div>
                                        </td>
                                        <td style="width: 10%; border: 1px solid;">
                                            <div class="bodytext taleft" style="width: 20%; word-wrap: break-word;" data-bind="text: Weight"></div>
                                        </td>
                                        <td style="width: 10%; border: 1px solid;">
                                            <div class="bodytext taleft" style="width: 20%; word-wrap: break-word;" data-bind="text: Pulse_40_120"></div>
                                        </td>
                                        <td style="width: 10%; border: 1px solid;">
                                            <div class="bodytext taleft" style="width: 20%; word-wrap: break-word;" data-bind="text: Pulse_60_160"></div>
                                        </td>
                                        <td style="width: 10%; border: 1px solid;">
                                            <div class="bodytext taleft" style="width: 20%; word-wrap: break-word;" data-bind="text: Temperature"></div>
                                        </td>
                                        <td style="width: 10%; border: 1px solid;">
                                            <div class="bodytext taleft" style="width: 30%; word-wrap: break-word;" data-bind="text: BloodPressure_80_180"></div>
                                        </td>
                                        <td style="width: 10%; border: 1px solid;">
                                            <div class="bodytext taleft" style="width:30%; word-wrap: break-word;" data-bind="text: BloodPressure_60_110"></div>
                                        </td>
                                        <td style="width: 10%; border: 1px solid;">
                                            <div class="bodytext taleft" style="width: 30%; word-wrap: break-word;" data-bind="text: BMI"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
    </div>
    </div>

<style type="text/css">
    .Editbutton {
        color: transparent;
    }
    .NewRoutinebutton{color: transparent;}
    .Underline {
        text-decoration: none;
    }
    table.users tr.odd {
        background-color: #ffffff;
    }

    table.users tr.even {
        background-color: #fffafa;
    }

    .users_gridhead {
        font-size: 1em;
        background: #f2f2f2;
        color: #000000;
        background:
        background: -moz-linear-gradient(top, #f2f2f2 0%, #ebebeb 50%, #dbdbdb 51%, #dadada 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f2f2), color-stop(50%, #ebebeb), color-stop(51%, #dbdbdb), color-stop(100%, #dadada)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #f2f2f2 0%, #ebebeb 50%, #dbdbdb 51%, #dadada 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #f2f2f2 0%, #ebebeb 50%, #dbdbdb 51%, #dadada 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #f2f2f2 0%, #ebebeb 50%, #dbdbdb 51%, #dadada 100%); /* IE10+ */
        background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 50%, #dbdbdb 51%, #dadada 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#dadada', GradientType=0 ); /* IE6-8 */
        border-right: 0.1em #aaa solid;
        padding: 0.5em;
    }
</style>
@section fscripts{
 
 
    <script type="text/javascript">
        @{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model)); };
        var DailyRoutine;
        // var DailyRoutineId = 0;

        function DailyRoutineMgmt(jsonData) {
            var self = this;
            var editItem = null;
            function userListItem(dailyItem) {
                var that = this;
                that.DailyRoutineId = ko.observable(dailyItem.DailyRoutineId);
                that.UserId = ko.observable(dailyItem.UserId);
                that.Height = ko.observable(dailyItem.Height);
                that.Weight = ko.observable(dailyItem.Weight);
                that.Pulse_40_120 = ko.observable(dailyItem.Pulse_40_120);
                that.Pulse_60_160 = ko.observable(dailyItem.Pulse_60_160);
                that.Temperature = ko.observable(dailyItem.Temperature);
                that.BloodPressure_80_180 = ko.observable(dailyItem.BloodPressure_80_180);
                that.BloodPressure_60_110 = ko.observable(dailyItem.BloodPressure_60_110);
                that.BMI = ko.observable(dailyItem.BMI);

            }

            var userList = $.map(jsonData, function(value) {
                return new userListItem(value);
            });
     
            self.divDailyRoutine = ko.observableArray(userList);
            self.DailyRoutineList = self.divDailyRoutine();
       

            var openEditDialog = function() {

                var dialog = $('#divDailyRoutineContainer');
                var data = newItem(editItem);
                ko.applyBindings(data, dialog[0]);

                //  $("#UserEditDialog").popup("open");
            };

            self.editMode = ko.observable('ReadOnly');
            self.editMode.subscribe(function() {
                //  $('#divDailyRoutineContainer').text(self.editMode());

                switch (self.editMode()) {
                case 'Add':
                    editItem = null;
                    openEditDialog();
                    break;
                case 'Edit':
                    openEditDialog();
                    self.editMode('');
                    break;
                case 'ReadOnly':
                    editItem = null;
                    break;
                default:
                    break;
                }
            });
            var newItem = function(edititemData) {
                return new UserItem(edititemData);
            };
            self.GetList = function() {
                var jsonitem = "{}";
                executeOnServerAsValue(jsonitem, '@Url.Action("GetRoutineDeails", "DailyRoutine")');
                userList = $.map(jsonData, function(value) {
                    return new userListItem(value);
                });
                self.divDailyRoutine(userList);
            };

            self.EditUser = function(item) {
                editItem = item;
                self.editMode('Edit');
            };


            var jsonitem = "";
            self.saveitems = function(item) {

                if (self.editMode() == "Add") {
                    jsonitem = "{" +
                        "height:'" + item.Height() + "'" +
                        ",weight:'" + item.Weight() + "'" +
                        ",pulse_40_120:'" + item.Pulse_40_120() + "'" +
                        ",pulse_60_160:'" + item.Pulse_60_160() + "'" +
                        ",temperature:'" + item.Temperature() + "'" +
                        ",bloodpressure_80_180:'" + item.BloodPressure_80_180() + "'" +
                        ",bloodpressure_60_110:'" + item.BloodPressure_60_110() + "'" +
                        ",bmi:'" + item.BMI() + "'" +
                        "}";

                    executeOnServerAsValue(jsonitem, '@Url.Action("DailyRoutineSave", "DailyRoutine")');

                    delete item.__ko_mapping__;
                    for (var index in item) {
                        if (ko.isObservable(item[index])) {
                            if (index == "Id")
                                item[index](0);
                            else if (index == "Height")
                                item[index]('');
                            else if (index == "Weight")
                                item[index]('');
                            else if (index == "BMI")
                                item[index]('');
                            else {
                                item[index]('');

                            }
                        }
                    }

                } else {
                 
                }
            };

        }

        function UserItem(editObject) {
            var self = this;
            if (!!editObject) {
                ko.mapping.fromJS(editObject, {}, self);
            } else {
                self.DailyRoutineId = ko.observable(0);
                self.Height = ko.observable('');
                self.Weight = ko.observable('');
                self.Pulse_40_120 = ko.observable('');
                self.Pulse_60_160 = ko.observable('');
                self.Temperature = ko.observable('');
                self.BloodPressure_80_180 = ko.observable('');
                self.BloodPressure_60_110 = ko.observable('');
                self.BMI = ko.observable('');
            }


            self.SaveChanges = function() {
         
                if ((self.Height() != 0.0 || self.Height() != '') && (self.Weight() != 0.0 || self.Weight() != '')) {
                    var weight = parseFloat(self.Weight());
                    var height = parseFloat(self.Height());
                    if ($("#pounds").is(":checked")) {
                        weight = weight / 2.2;
                    }
                    if ($("#inches").is(":checked")) {
                        height = height / 39.37;
                    }
                    self.BMI(parseFloat(weight / (height * height * 703)).toFixed(2));

                }
                if (self.Height() == 0.0 || self.Height() == '') {
                    return false;
                }
                if (self.Weight() == 0.0 || self.Weight() == '') {
                    return false;
                }
                if (self.Pulse_40_120() == 0 || self.Pulse_40_120() == '') {
                    // return false;
                }
                if (self.Pulse_60_160() == 0 || self.Pulse_60_160() == '') {
                    // return false;
                }
                if (self.Temperature() == 0 || self.Temperature() == '') {
                    return false;
                }
                if (self.BloodPressure_80_180() == 0 || self.BloodPressure_80_180() == '') {
                    //return false;
                }
                if (self.BloodPressure_60_110() == 0 || self.BloodPressure_60_110() == '') {
                    // return false;
                }
                if (self.BMI() == 0.0 || self.BMI() == '') {
                    // return false;
                }

                DailyRoutine.saveitems(self);
            };


        }

        $("#@ViewBag.Title").one('pageinit', function() {
            DailyRoutine = new DailyRoutineMgmt(@jsonData);
            ko.applyBindings(DailyRoutine, document.getElementById("divDailyRoutine"));

        });

    </script>



 
 
}

MVC

MVC- Model View Controller

ASP.NET, C# and .NET: Working with Modal Popup extender control.

ASP.NET, C# and .NET: Working with Modal Popup extender control.
hello Sandeep

This is my code to using ajax pop up extender.

front end code on materpage:


PopupControlID="Panel1" EnableViewState="false"
Position="Bottom"
/>









ValidationGroup="LoginUserValidationGroup"/>

Email Id:

CssClass="failureNotification" ErrorMessage="User Id / Email Id is required." ToolTip="User Id / Email Id is required."
ValidationGroup="LoginUserValidationGroup">*
*



Password:

CssClass="failureNotification" ErrorMessage="Password is required." ToolTip="Password is required."
ValidationGroup="LoginUserValidationGroup">*




Keep me logged in

New User

code behind code:

protected void LoginButton_click(object sender, EventArgs e)

{//some code here


}