Asp.net Mvc Crud with all functionalities like pagination checkbox radio btn template

Asp.net Mvc Crud with all functionalities like pagination checkbox radio btn template

Step 1.) Create Mvc app with db 1st approaches.

Step 2.) Using jQuery for dataTable.

Step 3.) Applying Radio btn, check box, multiline textbox, dropdownlist with hardcode, datepicker using                  jQuery.

Step 4.) Here copy n paste code.

create.cshtml

@model WebMvcJune2.Models.Tbl_Registr

@{

    ViewBag.Title = "Create";

}

<script src="~/scripts/jquery-1.12.4.min.js"></script>

<script src="~/scripts/jquery-ui-1.12.1.min.js"></script>

<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />

<h2>Create</h2>

@section scripts{

    @Scripts.Render("~/bundles/jqueryui")

    @Styles.Render("~/Content/cssjqryUi")

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

    <script>

        $(document).ready(function () {

            $('input[type=datetime]').datepicker({

                dateFormat: "dd/M/yy",

                changeMonth: true,

                changeYear: true,

                yearRange: "-60:+0"

            });

        });

    </script>

}

@using (Html.BeginForm())

{

    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <h4>Tbl_Registr</h4>

        <hr />

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">

            @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Sex, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @*@Html.EditorFor(model => model.Sex, new { htmlAttributes = new { @class = "form-control" } })*@

                Male

                @Html.RadioButtonFor(model => model.Sex, "Male")

                Female

                @Html.RadioButtonFor(model => model.Sex, "Female")

                @Html.ValidationMessageFor(model => model.Sex, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.CSharp, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                <div class="checkbox">

                    @*@Html.EditorFor(model => model.CSharp)*@

                    @Html.CheckBox("isActive", true)

                    @Html.ValidationMessageFor(model => model.CSharp, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Asp, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                <div class="checkbox">

                    @*@Html.EditorFor(model => model.Asp)*@

                    @Html.CheckBox("isActive", true)

                    @Html.ValidationMessageFor(model => model.Asp, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Mvc, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                <div class="checkbox">

                    @*@Html.EditorFor(model => model.Mvc)*@

                    @Html.CheckBox("isActive", true)

                    @Html.ValidationMessageFor(model => model.Mvc, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Sql, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                <div class="checkbox">

                    @*@Html.EditorFor(model => model.Sql)*@

                    @Html.CheckBox("isActive", true)

                    @Html.ValidationMessageFor(model => model.Sql, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.DateofBirth, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.DateofBirth, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.DateofBirth, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Image, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Image, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Image, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @*@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })*@

                @Html.TextAreaFor(model => model.Address, new { style = "width: 420px; height: 100px;", placeholder = "Placeholder here.." })

                @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @*@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })*@

                @Html.DropDownList("City", new List<SelectListItem>

    {

       new SelectListItem{ Text="ASP.NET MVC", Value = "1" },

       new SelectListItem{ Text="ASP.NET WEB API", Value = "2" },

       new SelectListItem{ Text="ENTITY FRAMEWORK", Value = "3" },

       new SelectListItem{ Text="DOCUSIGN", Value = "4" },

       new SelectListItem{ Text="ORCHARD CMS", Value = "5" },

           })

                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Username, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

                <input type="submit" value="Create" class="btn btn-default" />

            </div>

        </div>

    </div>

}

@*<div>

        @Html.ActionLink("Back to List", "Index")

    </div>*@

@*@section Scripts {

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

    }*@

BundleConfig.cs

using System.Web;

using System.Web.Optimization;

namespace WebMvcJune2

{

    public class BundleConfig

    {

        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js",

                        "~/Scripts/datatables/jquery.datatables.js",

                        "~/Scripts/datatable/datatables.bootstrap.js"

                        ));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

          "~/Scripts/jquery-ui-{version}.js"));

            //css  

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

                   "~/Content/jquery-ui.css"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));

            bundles.Add(new Bundle("~/bundles/bootstrap").Include(

                      "~/Scripts/bootstrap.js"));

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

                      "~/Content/bootstrap.css",

                      "~/Content/site.css",

                      "~/Content/datatables/css/datatables.bootstrap.css"

                      ));

        }

    }

}

Index.cshtml

@model IEnumerable<WebMvcJune2.Models.Tbl_Registr>

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

@section scripts{

        <script>

        $(document).ready(function () {

            $('#tblRegister').DataTable({

            });

                

        });

    </script>

}

<p>

    @Html.ActionLink("Create New", "Create")

</p>

<table id="tblRegister" class="table table-border table-striped">

    <thead>

        <tr>

            <th>

                @Html.DisplayNameFor(model => model.Name)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Age)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Sex)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Email)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Phone)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.CSharp)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Asp)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Mvc)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Sql)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.DateofBirth)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Image)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Date)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Address)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.City)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Username)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Password)

            </th>

            <th></th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model)

        {

            <tr>

                <td>

                    @Html.DisplayFor(modelItem => item.Name)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Age)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Sex)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Email)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Phone)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.CSharp)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Asp)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Mvc)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Sql)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.DateofBirth)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Image)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Date)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Address)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.City)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Username)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Password)

                </td>

                <td>

                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |

                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |

                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })

                </td>

            </tr>

        }

    </tbody>

</table>