mp3s for you

1) Create MVC 4 Web API Project
2) Add MVC Controller and Create View

HTML for View

@{
    ViewBag.Title = "SaveStudent";
}

$h2>SaveStudent$/h2>


$h3>Save Student$/h3>


$div class="container" id="div-save-student">
    $div class="row">


        $div class="col-md-12">
            $div class="col-md-5">
                $label>Student ID$/label>
                $input type="text" data-bind="value:StudentID" class="form-control" placeholder="Student ID" aria-describedby="basic-addon2">
            $/div>
        $/div>

        $div class="col-md-12">
            $div class="col-md-5">
                $label>First Name$/label>
                $input type="text" data-bind="value: FirstName" class="form-control" placeholder="First Name" aria-describedby="basic-addon2">
            $/div>
        $/div>

        $div class="col-md-12">
            $div class="col-md-5">
                $label>Last Name$/label>
                $input type="text" data-bind="value: LastName" class="form-control" placeholder="Last Name" aria-describedby="basic-addon2">
            $/div>
        $/div>

        $div class="col-md-12">
            $button type="button" class="btn btn-success" value="Save" data-bind="click:AddStudent">
                Save
 
            $/button>
        $/div>
    $/div>
$/div>

@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/bootstrapcss")
@Scripts.Render("~/bundles/bootstrapjs")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/knockout")

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

3) Add Bootstrap through NuGet Manager
4) Import Bootstrap and Knckout to BundleConfig - 

bundles.IgnoreList.Clear();

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

            bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
                        "~/Scripts/bootstrap.min.js"));

            bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
                        "~/Content/bootstrap.min.css",
                        "~/Content/bootstrap-responsive.min.css"));

            //Knockout js
            bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
            "~/Scripts/knockout-2.2.0.js"));

            bundles.Add(new ScriptBundle("~/bundles/SaveStudent").Include(
                        "~/Scripts/Pages/SaveStudent.js"));

5) Add SaveStudent.js to Scripts/Pages -

$(document).ready(function ()
{
    SaveStudent.Init();
});


SaveStudent = {
    svm: null,

    Init: function () {

        SaveStudent.svm = new SaveStudent.SaveStudentViewModel();
        ko.applyBindings(SaveStudent.svm, $('#div-save-student')[0]);
    },

    SaveStudentViewModel: function ()
    {

        var self = this;
        self.StudentID = ko.observable();
        self.FirstName = ko.observable();
        self.LastName = ko.observable();

        self.AddStudent = function ()
        {
            
            try {
                var req = {

                    StudentID: self.StudentID(),
                    Fname: self.FirstName(),
                    Lname: self.LastName(),
                    
                    
                }
                $('.waitArea').show();
                $.ajax({
                    url: 'http://localhost:49873/' + 'API/Student/AddStudent',
                    type: 'POST',
                    data: req,
                    dataType: "json",
                    async: true,
                    success: function (result) {

                        alert("Success");
                    },
                    error: function (e) {
                        
                        alert("Error");
                    }
                });


            }
            catch (e) {
              
            }

        }
    }

}

6) Add API Controller, 

public partial class StudentController : ApiController
    {
        [HttpPost]
        public int AddStudent(ServiceAPP.WCFStudent.Student student)
        {

            StudentAPIService apisvc = new StudentAPIService();
            int id = apisvc.SaveStudent(student);
            return id;
        }


    }

7) Add Class Library called ServiceAPP to the MVC Solution
8) Add Service Reference to it and Add Class to ClassLibrary for implement the service.

StudentAPIService class

public class StudentAPIService:IStudentService
    {
        public int SaveStudent(WCFStudent.Student student)
        {
           // WCFStudent.StudentServiceClient obj = new WCFStudent.StudentServiceClient();
            //return obj.SaveStudent(student);

            var serviceAddress = new System.ServiceModel.EndpointAddress("http://localhost:49861/StudentService.svc");

            using (var studentService = new WCFStudent.StudentServiceClient(new System.ServiceModel.BasicHttpBinding(), serviceAddress))
            {
                return studentService.SaveStudent(student);
            } 

        }
    }

    public interface IStudentService
    {
        int SaveStudent(WCFStudent.Student student);

    }

9) Add WCF Service Reference to both ServiceAPP and MVC Web App. ***
10) End Points for Service Project

   
    $system.serviceModel>
        $bindings>
            $basicHttpBinding>
                $binding name="BasicHttpBinding_IStudentService" />
            $/basicHttpBinding>
        $/bindings>
        $client>
            $endpoint address="http://localhost:49861/StudentService.svc"
                binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IStudentService"
                contract="WCFStudent.IStudentService" name="BasicHttpBinding_IStudentService" />
        $/client>
    $/system.serviceModel>